AudioBookRequest/templates/settings_page/prowlarr.html

{% extends "settings_page/base.html" %} {% block head %}
<title>Settings - Prowlarr</title>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script>
{% include 'scripts/toast.html' %} {% endblock %} {% block content %}

<div class="flex flex-col gap-2">
  <h2 class="text-lg">Prowlarr</h2>

  {% if prowlarr_misconfigured %}
  <p class="text-red-400">Prowlarr is misconfigured. Please configure it.</p>
  {% endif %}

  <label for="prowlarr-api-key">API Key</label>
  <form
    class="join w-full"
    hx-put="/settings/prowlarr/api-key"
    hx-disabled-elt="#api-button"
  >
    <!-- prettier-ignore -->
    <input
      id="prowlarr-api-key"
      name="api_key"
      type="password"
      {% if prowlarr_api_key %}placeholder="●●●●●●●●●●●●●●●●●"{% endif %}
      class="input join-item w-full"
      minlength="1"
      required
    />
    <button id="api-button" class="join-item btn">
      {% if prowlarr_api_key %} Update {% else %} Add {% endif %}
    </button>
  </form>

  <label for="prowlarr-base-url" class="pt-2">Base URL</label>
  <form
    class="join w-full"
    hx-put="/settings/prowlarr/base-url"
    hx-disabled-elt="#base-url-button"
  >
    <input
      id="prowlarr-base-url"
      name="base_url"
      type="url"
      value="{{ prowlarr_base_url }}"
      class="input join-item w-full"
      minlength="1"
      required
    />
    <button id="base-url-button" class="join-item btn">
      {% if prowlarr_base_url %} Update {% else %} Add {% endif %}
    </button>
  </form>

  {% block category %}
  <form
    id="category-select"
    class="flex flex-col gap-1"
    x-data="{ selected: [{{ selected_categories|join(',') }}].sort(), categories: {{ indexer_categories }}, dirty: false }"
    hx-put="/settings/prowlarr/category"
    hx-disabled-elt="#category-submit-button"
    hx-target="this"
    hx-swap="outerHTML"
  >
    <label for="group">Categories</label>
    <p class="text-xs opacity-60">
      Categories to search for using Prowlarr. If none are selected, all
      categories will be searched for.
    </p>

    {% if success %}
    <script>
      toast("{{success|safe}}", "success");
    </script>
    {% endif %}

    <div class="flex flex-wrap gap-1">
      <template x-for="sel in selected">
        <div
          class="badge badge-secondary badge-sm w-[13rem] justify-between h-fit"
        >
          <input type="hidden" name="c" x-bind:value="sel" />
          <span
            x-text="`${String(sel).padStart(4, '0')} - ${categories[sel]}`"
          ></span>
          <button
            class="cursor-pointer [&>svg]:size-4 hover:opacity-70 transition-opacity duration-150"
            x-on:click="selected = selected.filter((item) => item !== sel); dirty = true"
            type="button"
          >
            {% include 'icons/xmark.html' %}
          </button>
        </div>
      </template>
    </div>

    <select name="group" class="select w-full">
      <template x-for="sel in Object.keys(categories)">
        <template x-if="!selected.includes(Number(sel))">
          <option
            x-text="`${String(sel).padStart(4, '0')} - ${categories[sel]}`"
            x-on:click="selected = [...selected, Number(sel)].sort(); dirty = true"
          ></option>
        </template>
      </template>
    </select>
    <button id="category-submit-button" x-bind:disabled="!dirty" class="btn">
      Save
    </button>
  </form>
  {% endblock %}
</div>
{% endblock %}