{% extends "main.html" %}
{% block title %} Items {% endblock %}

{% block content %}

<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="showSidebar('item-create-form')"
      >
        Add
      </button>
    </div>
  </div>

  <div id="items" class="container">
    {% include "catalog-item-table.html" %}
  </div>
</div>

{% endblock %}

{% block sidebar_title %}
<h2 class="text-lg font-semibold uppercase" x-show="sidebar.content === 'item-create-form'">Add Item</h2>
{% endblock %}

{% block sidebar_content %}
<div x-show="sidebar.content === 'item-create-form'"
     x-on:form-submit-success="hideSidebar()"
>
  <div
    hx-get="/item/create"
    hx-trigger="load"
    hx-swap="outerHTML"
  ></div>
</div>
{% endblock %}