{#-
Shows-folder panel. First run (setup_pending): the only content on the
page, not dismissable. From the show menu (closable): a modal to point
offshore at a different shows folder.
-#}
<div data-setup-content>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-white/80 p-4 dark:bg-black/80" role="presentation">
    <section role="dialog" aria-modal="true" aria-labelledby="setup-title" {% if closable %}data-closable{% endif %} class="relative max-h-[calc(100vh-2rem)] w-full max-w-2xl overflow-y-auto border border-gray-200 bg-white p-6 shadow-2xl dark:border-gray-700 dark:bg-gray-950 md:p-8">
      {% if closable %}
        <button type="button" aria-label="Close" class="absolute right-4 top-4 p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white" onclick="closeShowSwitcher()">×</button>
      {% endif %}

      {% if setup_pending %}
        <h1 id="setup-title" class="mb-2 pr-10 text-3xl font-bold">Welcome to offshore</h1>
        <p class="mb-6 text-gray-600 dark:text-gray-400">Choose a shows folder. Each show lives in its own subfolder here, and new or imported shows are added to it.</p>
      {% else %}
        <h1 id="setup-title" class="mb-2 pr-10 text-3xl font-bold">Change shows folder</h1>
        <p class="mb-6 text-gray-600 dark:text-gray-400">offshore lists and store all shows in this folder. The choice is saved for next time.</p>
      {% endif %}

      <form method="post" action="/setup" hx-post="/setup" hx-target="#setup-error" hx-swap="innerHTML" hx-boost="false" class="m-0 flex flex-col gap-3">
        <label for="setup-shows-dir" class="font-medium text-gray-700 dark:text-gray-300">Shows folder</label>
        <div class="flex gap-2">
          <input id="setup-shows-dir" type="text" name="shows_dir" value="{{ shows_dir_value }}" required autofocus
                 placeholder="/absolute/path/to/shows" aria-describedby="setup-hint"
                 class="min-w-0 flex-1 border border-gray-300 bg-transparent px-3 py-2 font-mono text-sm outline-none focus:ring-2 focus:ring-gray-500 dark:border-gray-700">
          {% if folder_picker_enabled(request) %}
            <button type="button" data-pick-folder="setup-shows-dir" data-pick-purpose="shows_dir" data-pick-status="setup-pick-status"
                    class="shrink-0 border border-gray-300 px-3 py-2 text-sm font-medium transition-colors hover:bg-gray-100 disabled:cursor-wait disabled:opacity-50 dark:border-gray-700 dark:hover:bg-gray-800">Choose…</button>
          {% endif %}
        </div>
        <p id="setup-pick-status" class="text-sm text-red-700 empty:hidden dark:text-red-400" aria-live="polite"></p>
        <p id="setup-hint" class="text-sm text-gray-500 dark:text-gray-400">{% if folder_picker_enabled(request) %}Choose a folder or type an absolute path.{% else %}An absolute path.{% endif %} It will be created if it doesn't exist. You can override the current setting with <code class="rounded bg-gray-100 px-1 py-0.5 text-xs dark:bg-gray-800">offshore config --shows-dir</code>.</p>
        {% if env_override %}
          <p class="text-sm text-gray-500 dark:text-gray-400">Note: <code class="rounded bg-gray-100 px-1 py-0.5 text-xs dark:bg-gray-800">OFFSHORE_SHOWS_DIR</code> is set, so it takes priority over this choice on the next launch.</p>
        {% endif %}
        <div id="setup-error" aria-live="polite">
          {%- if setup_error %}
            <div class="rounded border border-red-300 bg-red-50 p-3 text-sm text-red-800 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400" role="alert">
              <p class="font-medium">Can't use this folder</p>
              <p class="mt-1">{{ setup_error }}</p>
            </div>
          {%- endif %}
        </div>
        <div class="mt-2">
          <button type="submit" class="bg-gray-900 px-4 py-2 font-medium text-white shadow-sm transition-colors hover:bg-gray-800 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white">{% if setup_pending %}Confirm and continue{% else %}Use this folder{% endif %}</button>
        </div>
      </form>
    </section>
  </div>
</div>