{% extends "main.html" %} {% block title %} Home {% endblock %} {% block content
%}


<div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
  <label
    for="default-search"
    class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white"
    >Search</label
  >
  <div class="relative mb-4 max-w-56 content-center">
    <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="default-search"
      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="Search"
      aria-label="Search"
      value='{{ query.search.as_deref().unwrap_or("") }}'
      hx-get="/home/search"
      hx-trigger="search, keyup delay:500ms changed"
      hx-target="#items"
      hx-push-url="true"
    />
  </div>

  <div id="items" class="container">
    {% include "home_search_item_fragment.html" %}
  </div>
</div>

{% endblock %}