{#-
Show menu: the shows in the current shows folder, plus actions that add a
show to it or point offshore at a different folder. Reads the live
workspace (a template global), so it's the same on every page.
-#}
{%- set ws_slugs = workspace.slugs() -%}
{%- set current = slug if slug is defined and slug else none -%}
<details class="relative mr-auto" data-show-menu>
  <summary class="flex cursor-pointer list-none items-center gap-2 rounded-md border border-gray-300 py-1 pl-2 pr-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-500 dark:border-gray-700 [&::-webkit-details-marker]:hidden" aria-label="Shows{% if current %}, current show {{ current }}{% endif %}">
    <span class="max-w-[12rem] truncate">{{ current or "Shows" }}</span>
    <span aria-hidden="true" class="text-gray-500">⌄</span>
  </summary>
  <div class="absolute left-0 top-full z-40 mt-1 w-64 border border-gray-200 bg-white py-1 text-sm shadow-lg dark:border-gray-700 dark:bg-gray-950">
    <ul aria-label="Shows">
      {%- for s in ws_slugs %}
        <li>
          <a href="/?slug={{ s }}" class="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-gray-800" {% if s == current %}aria-current="true"{% endif %}>
            <span aria-hidden="true" class="w-3 text-gray-500">{% if s == current %}✓{% endif %}</span>
            <span class="truncate">{{ s }}</span>
          </a>
        </li>
      {%- else %}
        <li class="px-3 py-1.5 text-gray-500 dark:text-gray-400">No shows yet</li>
      {%- endfor %}
    </ul>
    <div class="my-1 border-t border-gray-200 dark:border-gray-800" role="separator"></div>
    <button type="button" data-show-menu-action hx-get="/welcome?modal=true" hx-select="[data-show-switch-content]" hx-target="#show-switch-modal" hx-swap="innerHTML" hx-push-url="false" hx-boost="false" aria-haspopup="dialog" aria-controls="show-switch-modal" class="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-gray-100 dark:hover:bg-gray-800">
      <span aria-hidden="true" class="w-3 text-gray-500">+</span>Add show…
    </button>
    <button type="button" data-show-menu-action hx-get="/setup?modal=true" hx-select="[data-setup-content]" hx-target="#show-switch-modal" hx-swap="innerHTML" hx-push-url="false" hx-boost="false" aria-haspopup="dialog" aria-controls="show-switch-modal" class="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-gray-100 dark:hover:bg-gray-800">
      <span aria-hidden="true" class="w-3"></span>Change shows folder…
    </button>
  </div>
</details>