{#-
Add-show panel. As the /welcome page (no shows yet, or opened directly) it
is the page content and has no close button. From the show menu's
"Add show…" (modal=true) it opens as a closable modal.
-#}
<div data-show-switch-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="show-switch-title" {% if modal %}data-closable{% endif %} class="relative max-h-[calc(100vh-2rem)] w-full max-w-3xl 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 modal %}
      <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 not has_shows %}
      <h1 id="show-switch-title" class="mb-2 pr-10 text-3xl font-bold">Welcome to offshore</h1>
      <p class="mb-8 text-gray-600 dark:text-gray-400">No shows in <code class="rounded bg-gray-100 px-1 py-0.5 text-sm dark:bg-gray-800">{{ shows_dir }}</code> yet. Create or import one to get started.</p>
    {% else %}
      <h1 id="show-switch-title" class="mb-2 pr-10 text-3xl font-bold">Add a show</h1>
      <p class="mb-8 text-gray-600 dark:text-gray-400">New and imported shows are added to <code class="rounded bg-gray-100 px-1 py-0.5 text-sm dark:bg-gray-800">{{ shows_dir }}</code>.</p>
    {% endif %}

    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
      <section class="flex h-full flex-col border border-gray-200 bg-white p-6 shadow-sm transition-colors hover:border-gray-400 dark:border-gray-800 dark:bg-gray-950 dark:hover:border-gray-600">
        <h2 class="mb-2 text-xl font-semibold">New</h2>
        <p class="flex-1 text-sm text-gray-500 dark:text-gray-400">Scaffold a brand-new show from a short form.</p>
        <div class="mt-6">
          <button type="button" class="w-full 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" onclick="location.href='/init'">Create new show</button>
        </div>
      </section>

      <section class="flex h-full flex-col border border-gray-200 bg-white p-6 shadow-sm transition-colors hover:border-gray-400 dark:border-gray-800 dark:bg-gray-950 dark:hover:border-gray-600">
        <h2 class="mb-2 text-xl font-semibold">Import</h2>
        <p class="flex-1 text-sm text-gray-500 dark:text-gray-400">Seed a new show from an existing RSS feed URL or offshore generated JSON. Metadata will be preserved to ensure a seamless migration.</p>
        <div class="mt-6">
          <button type="button" class="w-full 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" onclick="location.href='/import'">Import</button>
        </div>
      </section>
    </div>
    </section>
  </div>
</div>