{# Image picker grid for the TipTap editor.

   Loaded into a `<dialog>` via htmx by the post / page admin edit
   pages. Each card carries `data-*` attributes that the editor's
   client-side script reads to build a markdown image link, then
   inserts it at the cursor.

   Pagination uses htmx swap-into-this-container so an operator
   can page through without closing the dialog.

   Tab support: if any plugin contributes via `register_image_picker_tab`,
   a tab nav appears with "Library" always first, then contributed tabs
   in the order the hook returns them. When no plugin contributes,
   the single-pane shape is rendered with no extra chrome, preserving
   the existing UX exactly. #}

{% set _picker_tabs = image_picker_tabs() %}

<div id="attachment-picker"
     style="max-height: 70vh; overflow-y: auto;">
  {# Picker is scoped to the current site by URL (P2 #78); the
     post / page editor that opens this dialog is itself
     site-scoped, so the picker always loads the right corpus. #}

  {% if _picker_tabs %}
    {# Tab nav: Library (built-in) + each contributed tab. Tab styling
       lives in the scoped <style> block below; the JS only toggles
       aria-selected and CSS reacts via [aria-selected="true"]. Doing
       it this way avoids inline styles inheriting the dialog's heading
       typography (which made the tabs render giant-bold without
       explicit font-size). #}
    <style>
      #attachment-picker [role="tablist"] {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #ddd;
        padding: 0 0.5rem;
        background: #fafafa;
      }
      #attachment-picker [role="tab"] {
        appearance: none;
        font: inherit;
        font-size: 0.875rem;
        font-weight: 500;
        color: #555;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        padding: 0.5rem 1rem;
        margin: 0;
        cursor: pointer;
        line-height: 1.4;
      }
      #attachment-picker [role="tab"]:hover {
        color: #111;
        background: #f0f0f0;
      }
      #attachment-picker [role="tab"][aria-selected="true"] {
        color: #111;
        font-weight: 600;
        border-bottom-color: #333;
      }
      #attachment-picker [role="tab"]:focus-visible {
        outline: 2px solid #2a6;
        outline-offset: -2px;
      }
    </style>
    <div role="tablist">
      <button role="tab"
              id="tab-btn-library"
              aria-selected="true"
              aria-controls="tab-pane-library"
              type="button">
        Library
      </button>
      {% for tab in _picker_tabs %}
        <button role="tab"
                id="tab-btn-{{ tab.slug }}"
                aria-selected="false"
                aria-controls="tab-pane-{{ tab.slug }}"
                type="button">
          {{ tab.label }}
        </button>
      {% endfor %}
    </div>

    {# Library pane (always present). #}
    <div id="tab-pane-library"
         role="tabpanel"
         aria-labelledby="tab-btn-library">
      {% include "admin/_attachments_picker_library.html" %}
    </div>

    {# Contributed plugin panes. #}
    {% for tab in _picker_tabs %}
      <div id="tab-pane-{{ tab.slug }}"
           role="tabpanel"
           aria-labelledby="tab-btn-{{ tab.slug }}"
           hidden>
        {% include tab.template_path %}
      </div>
    {% endfor %}

    <script>
      (function () {
        var picker = document.getElementById('attachment-picker');
        if (!picker) return;

        var tablist = picker.querySelector('[role="tablist"]');
        if (!tablist) return;

        tablist.addEventListener('click', function (e) {
          var btn = e.target.closest('[role="tab"]');
          if (!btn) return;

          var targetId = btn.getAttribute('aria-controls');
          if (!targetId) return;

          // Deselect all tabs and hide all panes. CSS reacts to
          // [aria-selected="true"] for the active-tab styling, so
          // we only toggle the attribute here.
          tablist.querySelectorAll('[role="tab"]').forEach(function (t) {
            t.setAttribute('aria-selected', 'false');
          });
          picker.querySelectorAll('[role="tabpanel"]').forEach(function (p) {
            p.hidden = true;
          });

          // Activate the clicked tab and its pane.
          btn.setAttribute('aria-selected', 'true');
          var pane = document.getElementById(targetId);
          if (pane) pane.hidden = false;
        });
      })();
    </script>

  {% else %}
    {# No plugin tabs: render the library grid directly, same shape
       as before this tab mechanism was added. #}
    {% include "admin/_attachments_picker_library.html" %}
  {% endif %}
</div>