You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.3 KiB
95 lines
3.3 KiB
{% extends "main.html" %}
|
|
{% block title %} Items {% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="relative h-auto" x-data="{ show_sidebar: false }"
|
|
x-on:form-submit-success="show_sidebar = false;"
|
|
>
|
|
<div class="absolute w-screen h-full" x-show="show_sidebar">
|
|
<div class="relative w-full h-full bg-neutral-300 backdrop-blur-md opacity-90 py-4 z-10">
|
|
</div>
|
|
<div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 max-w-[40rem] z-20">
|
|
<div class="flex">
|
|
<div class="flex-1 inline-flex items-center">
|
|
<h2 class="text-lg font-semibold uppercase">Add Item</h2>
|
|
</div>
|
|
<button
|
|
class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
|
|
@click="show_sidebar = ! show_sidebar"
|
|
>
|
|
<span class="sr-only">Close Sidebar</span>
|
|
X
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<div
|
|
hx-get="/item/create"
|
|
hx-trigger="load"
|
|
hx-swap="outerHTML"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
|
|
<div class="flex space-x-4">
|
|
<div class="relative mb-4 max-w-56 content-center">
|
|
<label
|
|
for="item-filter"
|
|
class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
|
>
|
|
Search
|
|
</label>
|
|
<div
|
|
class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3"
|
|
>
|
|
<svg
|
|
class="h-4 w-4 text-gray-500 dark:text-gray-400"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
id="item-filter"
|
|
class="block w-full rounded-lg border border-gray-300 bg-slate-100 p-4 ps-10 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:bg-neutral-900 dark:text-slate-100"
|
|
type="search"
|
|
name="q"
|
|
placeholder="Filter"
|
|
aria-label="Filter"
|
|
value='{{ query.search.as_deref().unwrap_or("") }}'
|
|
hx-get="/items"
|
|
hx-trigger="search, keyup delay:500ms changed"
|
|
hx-target="#items"
|
|
hx-push-url="true"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button
|
|
class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
|
|
@click="show_sidebar = ! show_sidebar"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="items" class="container">
|
|
{% include "catalog-item-table.html" %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% endblock %}
|