AudioBookRequest/templates/search.html

{% 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 head %}
{% 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="{{ base_url }}/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();">
        <input name="q"
               class="input join-item focus:z-10"
               placeholder="Book name..."
               {% if not search_term %}autofocus{% endif %}
               value="{{ search_term }}"
               spellcheck="false"
               autocomplete="off"
               list="search-suggestions"
               hx-get="{{ base_url }}/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 or [])[:3] %}<option value="{{ suggestion }}"></option>{% endfor %}
          </datalist>
        {% endblock search_suggestions %}
        <select class="select join-item max-w-[4rem] sm:max-w-[5rem] focus:z-10" name="region">
          {% for region in regions.keys() %}
            <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 hidden"></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"
                       height="128"
                       width="128"
                       src="{{ book.cover_image }}"
                       alt="{{ book.title }}" />
                {% else %}
                  {% include "icons/photo-off.html" %}
                {% endif %}
                <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="{{ base_url }}/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">
                {% for author in book.authors %}
                  <a href="{{ base_url }}/search?q={{ author }}"
                     title="Search for {{ author }}">
                    {{ author }}
                    {{- "," if loop.index < book.authors | length else "" -}}
                  </a>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
      {% endblock book_results %}
      {% if search_results or page > 0 %}
        <div class="join">
          <button class="join-item btn"
                  onclick="onPageChange('{{ page-1 }}')"
                  {% if page.__eq__(0) %}disabled{% endif %}>«</button>
          <button class="join-item btn flex flex-col gap-0"
                  onclick="onPageChange('{{ 0 }}')"
                  {% if page.__eq__(0) %}disabled{% endif %}>
            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="{{ base_url }}/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 body %}