{% extends "base.html" %} {% block head %}
<title>Search</title>
<script>
  const onSearch = () => {
    const search_term = document.querySelector("input").value;
    document.getElementById("search").disabled = true;
    document.getElementById("search-text").style.display = "none";
    document.getElementById("search-spinner").style.display = "inline-block";
    window.location.href = `/search?q=${encodeURIComponent(search_term)}`;
  };
  const onPageChange = page => {
    const url = new URL(window.location);
    url.searchParams.set("page", page);
    window.location = url;
  };
</script>
{% endblock %} {% block body %}
<div
  class="w-screen flex flex-col items-center justify-center p-6 sm:p-8 overflow-x-hidden gap-4"
>
  <div class="flex w-full justify-between items-center">
    <h1 class="text-3xl font-bold text-left">Search</h1>
    <a
      preload
      href="/search/manual"
      title="Manually add request"
      class="btn btn- flex items-center justify-center"
    >
      Manual {% include 'icons/plus.html' %}
    </a>
  </div>

  <div class="flex flex-col gap-4 justify-start items-center">
    <form class="flex items-start w-full join" onsubmit="onSearch();">
      <!-- prettier-ignore -->
      <input
        name="q"
        class="input join-item"
        placeholder="Book name..."
        {% if not search_term %}autofocus{% endif %}
        value="{{ search_term }}"
        spellcheck="false"
        autocomplete="off"
        list="search-suggestions"
        hx-get="/search/suggestions?region={{ selected_region }}"
        hx-target="#search-suggestions"
        hx-swap="outerHTML"
        hx-trigger="keyup changed delay:250ms"
      />
      {% block search_suggestions %}
      <datalist id="search-suggestions">
        {% for suggestion in suggestions %}
        <option value="{{ suggestion }}"></option>
        {% endfor %}
      </datalist>
      {% endblock %}

      <select
        class="select join-item max-w-[4rem] sm:max-w-[5rem]"
        name="region"
      >
        {% for region in regions.keys() %}
        <!-- prettier-ignore -->
        <option
          value="{{ region }}"
          {% if region.__eq__(selected_region) %}selected="selected"{% endif %}
        >
          {{ region }}
        </option>
        {% endfor %}
      </select>
      <button id="search" class="btn btn-primary join-item" type="submit">
        <span id="search-text">Search</span>
        <span id="search-spinner" class="loading" style="display: none"></span>
      </button>
    </form>

    {% block book_results %}
    <div
      id="book-results"
      class="min-w-[60vw] max-w-[90vw] sm:max-w-[80vw] h-full grid gap-1 gap-y-2 sm:gap-y-4 sm:gap-2 p-1 grid-flow-row grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7"
    >
      {% for book in search_results %}
      <div class="flex flex-col">
        <div
          class="relative w-[8rem] h-[8rem] sm:w-[10rem] sm:h-[10rem] rounded-md overflow-hidden shadow shadow-black items-center justify-center flex"
        >
          {% if book.cover_image %}
          <img
            class="object-cover w-full h-full hover:scale-110 transition-transform duration-500 ease-in-out"
            src="{{ book.cover_image }}"
            alt="{{ book.title }}"
          />
          {% else %} {% include 'icons/photo-off.html' %} {% endif %}
          <!-- prettier-ignore -->
          <button
            class="absolute top-0 right-0 rounded-none rounded-bl-md btn-sm btn btn-square items-center justify-center flex {% if book.downloaded or book.already_requested %}btn-ghost bg-success text-neutral/20{% else %}btn-info{% endif %}"
            hx-post="/search/request/{{ book.asin }}"
            hx-disabled-elt="this"
            hx-target="#book-results"
            hx-include="this"
            hx-swap="outerHTML"
            hx-on:click="this.disabled = true;"
            {% if book.downloaded or book.already_requested %}disabled{% endif %}
          >
            <input type="hidden" name="query" value="{{ search_term }}" />
            <input type="hidden" name="region" value="{{ selected_region }}" />
            <input type="hidden" name="page" value="{{ page }}" />
            <input type="hidden" name="search_term" value="{{ search_term }}" />
            {% if book.downloaded or book.already_requested %}
            <span>{% include 'icons/checkmark.html' %}</span>
            {% else %} {% if auto_start_download and user.can_download() %}
            <span>{% include 'icons/download.html' %}</span>
            {% else %}
            <span>{% include 'icons/plus.html' %}</span>
            {% endif %} {% endif %}
          </button>
        </div>
        <a
          class="text-sm text-primary font-bold pt-1"
          title="Title"
          target="_blank"
          href="https://audible{{ regions[selected_region] }}/pd/{{ book.asin }}?ipRedirectOverride=true"
        >
          {{ book.title }}
        </a>
        {% if book.subtitle %}
        <div class="opacity-60 font-semibold text-xs" title="Subtitle">
          {{ book.subtitle }}
        </div>
        {% endif %}
        <div class="text-xs font-semibold" title="Authors">
          {{ book.authors | join(", ") }}
        </div>
      </div>
      {% endfor %}
    </div>
    {% endblock %} {% if search_results or page > 0 %}
    <div class="join">
      <!-- prettier-ignore -->
      <button
        class="join-item btn"
        onclick="onPageChange('{{ page-1 }}')"
        {% if page.__eq__(0) %}disabled{% endif %}
      >«</button>
      <!-- prettier-ignore -->
      <button class="join-item btn flex flex-col" onclick="onPageChange('{{ 0 }}')" {% if page.__eq__(0) %}disabled{% endif %} style="gap: 0;">
        Page {{ page+1 }}
        <span class="text-[0.5rem]">back to first</span>
      </button>
      <button class="join-item btn" onclick="onPageChange('{{ page+1 }}')">
        »
      </button>
    </div>
    {% endif %} {% if not search_results %}
    <div
      class="pt-8 flex flex-col gap-1 items-center justify-center text-center max-w-[20rem]"
    >
      {% if search_term %}
      <span class="text-xl font-semibold">No results found</span>
      <span class="text-sm"
        >No audiobooks were found. Do note, that internally Audible is used for
        searching. If the book doesn't exist on Audible it'll have to be added
        <a class="link" preload href="/search/manual">manually</a>.</span
      >
      {% else %}
      <span class="text-xl font-semibold">Perform a search</span>
      <span class="text-sm opacity-60">Nothing has been searched yet.</span>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}