303 lines
26 KiB
Plaintext
303 lines
26 KiB
Plaintext
<% layout("layout/base") -%>
|
|
|
|
<%- include("header") -%>
|
|
|
|
<div id="table" class="--prevent-on-load-init max-w-full px-4 sm:px-6">
|
|
<div class="flex flex-col">
|
|
<div class="-m-1.5">
|
|
<div class="max-w-full min-w-full p-1.5 inline-block align-middle">
|
|
<div class="bg-white border border-gray-200 rounded-lg shadow-xs dark:bg-neutral-900 dark:border-neutral-700">
|
|
|
|
<!-- Header -->
|
|
<div class="px-6 py-4 gap-3 flex flex-nowrap justify-between items-center">
|
|
|
|
<div class="hidden sm:block sm:col-span-1">
|
|
<label for="search" class="sr-only">Search</label>
|
|
<div class="relative">
|
|
<input type="text" id="search" class="form-input px-3 ps-11 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600" placeholder="Search" data-hs-datatable-search="">
|
|
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4">
|
|
<svg class="shrink-0 size-4 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sm:col-span-2">
|
|
<button type="button" id="deleteRowsBtn" disabled class="py-2 px-3 inline--lex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-red-500 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
|
|
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
|
|
<span>
|
|
<span class="hidden sm:inline">Delete</span>
|
|
<span class="rows-selected-count-js zero-empty-js before:content-['('] after:content-[')'] empty:hidden"></span>
|
|
</span>
|
|
</button>
|
|
<button type="button" class="open-edit-modal-js py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
|
|
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
|
|
<span>
|
|
Create
|
|
<span class="hidden sm:inline">a style</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="min-w-full overflow-x-auto">
|
|
<table class="cj-table">
|
|
<thead class="cj-thead">
|
|
<tr>
|
|
<th scope="col" class="cj-table-header --exclude-from-ordering">
|
|
<label for="selectAllBox" class="flex">
|
|
<input type="checkbox" id="selectAllBox" class="cj-table-checkbox">
|
|
<span class="sr-only">Checkbox</span>
|
|
</label>
|
|
</th>
|
|
<th scope="col" data-dt-column="name" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Name</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="colour" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Colour</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="title_mutator" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Title Mutator</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="description_mutator" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Description Mutator</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="show_author" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Show Author</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="show_image" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Show Image</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="show_thumbnail" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Show Thumbnail</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="show_footer" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Show Footer</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="show_timestamp" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Show Timestamp</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
<th scope="col" data-dt-column="created_at" class="cj-table-header">
|
|
<div class="cj-table-header-content cursor-pointer">
|
|
<span>Created at</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="cj-table-footer">
|
|
<div class="max-w-sm space-y-3">
|
|
<select id="selectPageSize-js" data-hs-datatable-page-entities="">
|
|
<option value="5">5</option>
|
|
<option value="10" selected>10</option>
|
|
<option value="15">15</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
<div class="sm:inline-flex items-center gap-x-2" data-hs-datatable-info="">
|
|
<p class="text-sm text-gray dark:text-neutral-400">
|
|
<span data-hs-datatable-info-from=""></span>
|
|
to
|
|
<span data-hs-datatable-info-to=""></span>
|
|
of
|
|
<span data-hs-datatable-info-length=""></span>
|
|
</p>
|
|
</div>
|
|
<div class="inline-flex gap-x-2" data-hs-datatable-paging="">
|
|
<button type="button" class="cj-table-paging-btn" data-hs-datatable-paging-prev="">
|
|
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
|
|
Prev
|
|
</button>
|
|
<div class="flex items-center space-x-1" data-hs-datatable-paging-pages=""></div>
|
|
<button type="button" class="cj-table-paging-btn" data-hs-datatable-paging-next="">
|
|
Next
|
|
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="editModal" class="hs-overlay hidden size-full fixed top-0 start-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1">
|
|
<div class="hs-overlay-animation-target hs-overlay-open:scale-100 hs-overlay-open:opacity-100 scale-95 opacity-0 ease-in-out transition-all duration-200 lg:max-w-4xl lg:w-full m-3 lg:mx-auto min-h-[calc(100%-3.5rem)] flex items-center">
|
|
<div class="w-full p-4 sm:p-7 flex flex-col bg-white border shadow-xs rounded-lg pointer-events-auto dark:bg-neutral-900 dark:border-neutral-800 dark:shadow-neutral-700/70">
|
|
<div class="mb-8">
|
|
<h2 class="text-xl font-bold text-gray-800 dark:text-neutral-200">Message Style</h2>
|
|
<p class="text-sm text-gray-600 dark:text-neutral-400">
|
|
message style placeholder description.
|
|
</p>
|
|
</div>
|
|
<form id="editForm" novalidate class="group grid sm:grid-cols-2 gap-y-4 sm:gap-y-6 md:gap-y-8 gap-x-6 sm:gap-x-8 md:gap-x-10">
|
|
|
|
<div>
|
|
<label for="formName" class="text-input-label">Name</label>
|
|
<input type="text" id="formName" name="name" class="form-input text-input peer invalid:group-[.submitted]:border-red-500 invalid:group-[.submitted]:ring-red-500" required>
|
|
<p class="text-input-help block peer-invalid:group-[.submitted]:hidden">
|
|
Human-readable name for this entry.
|
|
</p>
|
|
<p class="mt-2 text-sm text-red-500 hidden peer-invalid:group-[.submitted]:block">
|
|
Please enter a name.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label for="formColour" class="text-input-label">Colour</label>
|
|
<input type="text" id="formColour" name="colour" class="form-input text-input peer invalid:group-[.submitted]:border-red-500 invalid:group-[.submitted]:ring-red-500" required>
|
|
<p class="text-input-help block peer-invalid:group-[.submitted]:hidden">
|
|
hex colour placeholder
|
|
</p>
|
|
<p class="mt-2 text-sm text-red-500 hidden peer-invalid:group-[.submitted]:block">
|
|
Please enter a colour.
|
|
</p>
|
|
</div>
|
|
<div class="relative">
|
|
<label for="formTitleMutator" class="text-input-label">Title Mutator</label>
|
|
<select name="title_mutator" id="formTitleMutator" class="peer --prevent-on-load-init">
|
|
<option value="">Choose</option>
|
|
</select>
|
|
<p class="text-input-help block peer-has-invalid:group-[.submitted]:hidden">
|
|
title mutator placeholder.
|
|
</p>
|
|
</div>
|
|
<div class="relative">
|
|
<label for="formDescriptionMutator" class="text-input-label">Description Mutator</label>
|
|
<select name="description_mutator" id="formDescriptionMutator" class="peer --prevent-on-load-init">
|
|
<option value="">Choose</option>
|
|
</select>
|
|
<p class="text-input-help block peer-has-invalid:group-[.submitted]:hidden">
|
|
title mutator placeholder.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="formShowAuthor" class="flex gap-4">
|
|
<input type="checkbox" id="formShowAuthor" name="show_author" class="form-radio relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
|
|
<span class="flex flex-col">
|
|
<span class="block text-sm dark:text-neutral-400">Show author</span>
|
|
<span class="block text-sm text-gray-500 dark:text-neutral-500">
|
|
Show author placeholder
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="formShowImage" class="flex gap-4">
|
|
<input type="checkbox" id="formShowImage" name="show_image" class="form-radio relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
|
|
<span class="flex flex-col">
|
|
<span class="block text-sm dark:text-neutral-400">Show image</span>
|
|
<span class="block text-sm text-gray-500 dark:text-neutral-500">
|
|
Show image placeholder
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="formShowThumbnail" class="flex gap-4">
|
|
<input type="checkbox" id="formShowThumbnail" name="show_thumbnail" class="form-radio relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
|
|
<span class="flex flex-col">
|
|
<span class="block text-sm dark:text-neutral-400">Show thumbnail</span>
|
|
<span class="block text-sm text-gray-500 dark:text-neutral-500">
|
|
Show thumbnail placeholder
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="formShowFooter" class="flex gap-4">
|
|
<input type="checkbox" id="formShowFooter" name="show_footer" class="form-radio relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
|
|
<span class="flex flex-col">
|
|
<span class="block text-sm dark:text-neutral-400">Show footer</span>
|
|
<span class="block text-sm text-gray-500 dark:text-neutral-500">
|
|
Show footer placeholder
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label for="formShowTimestamp" class="flex gap-4">
|
|
<input type="checkbox" id="formShowTimestamp" name="show_timestamp" class="form-radio relative w-[3.25rem] h-7 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200">
|
|
<span class="flex flex-col">
|
|
<span class="block text-sm dark:text-neutral-400">Show timestamp</span>
|
|
<span class="block text-sm text-gray-500 dark:text-neutral-500">
|
|
Show timestamp placeholder
|
|
</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
</form>
|
|
<div class="flex items-center gap-x-2 mt-8">
|
|
<button type="button" class="me-auto py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
|
|
Templates
|
|
</button>
|
|
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" data-hs-overlay="#editModal">
|
|
Close
|
|
</button>
|
|
<button type="submit" form="editForm" class="group-invalid:pointer-events-none group-invalid:opacity-30 py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
|
|
Save changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var guildId = "<%- guild.id %>";
|
|
var textMutators = JSON.parse(`<%- JSON.stringify( textMutators ) %> `);
|
|
</script>
|
|
<% block("scripts").append('<script src="/public/generated/js/guild/styles.js"></script>'); %> |