{% comment %}
Component: Tabs (c-tabs)
APG Accessible Tabs container (role="tablist")
Props:
  tabs: list of dicts with id, label, count, href, content
  active: active tab id
  mode: client | htmx
  fit: start | stretch
{% endcomment %}
<div class="w-full"
     data-active="{{ active }}"
     x-data="{
        activeTab: $el.dataset.active || '',
        tabIds: [],
        init() {
            this.tabIds = Array.from($el.querySelectorAll('[role=tab]')).map(el => el.dataset.tabId);
            if (!this.activeTab && this.tabIds.length) {
                this.activeTab = this.tabIds[0];
            }
        },
        selectTab(id, evt) {
            this.activeTab = id;
            {% if mode == 'client' %}
            if (evt) { evt.preventDefault(); }
            {% endif %}
        },
        focusTab(idx) {
            if (!this.tabIds.length) {
                this.tabIds = Array.from($el.querySelectorAll('[role=tab]')).map(el => el.dataset.tabId);
            }
            if (idx < 0) idx = this.tabIds.length - 1;
            if (idx >= this.tabIds.length) idx = 0;
            const targetId = this.tabIds[idx];
            this.activeTab = targetId;
            const el = $el.querySelector('[role=tab][data-tab-id=\'' + CSS.escape(targetId) + '\']');
            if (el) {
                el.focus();
                {% if mode == 'htmx' %}
                el.click();
                {% endif %}
            }
        },
        nextTab() {
            const i = this.tabIds.indexOf(this.activeTab);
            this.focusTab(i + 1);
        },
        prevTab() {
            const i = this.tabIds.indexOf(this.activeTab);
            this.focusTab(i - 1);
        },
        firstTab() { this.focusTab(0); },
        lastTab() { this.focusTab(this.tabIds.length - 1); }
     }">
    <div class="border-b border-border w-full">
        <nav class="flex gap-4 -mb-px overflow-x-auto select-none{% if fit == 'stretch' %} justify-between{% endif %}"
             role="tablist"
             aria-label="Abas"
             @keydown.arrow-right.prevent="nextTab()"
             @keydown.arrow-left.prevent="prevTab()"
             @keydown.home.prevent="firstTab()"
             @keydown.end.prevent="lastTab()">
            {% for tab in tabs %}
            <a href="{{ tab.href|default:'#' }}"
               role="tab"
               id="{{ instance_id }}_tab_{{ tab.id }}"
               data-tab-id="{{ tab.id }}"
               aria-controls="{{ instance_id }}_panel_{{ tab.id }}"
               :aria-selected="activeTab === $el.dataset.tabId"
               :tabindex="activeTab === $el.dataset.tabId ? 0 : -1"
               @click="selectTab($el.dataset.tabId, $event)"
               {% if mode == 'htmx' and tab.href %}hx-get="{{ tab.href }}" hx-target="#{{ instance_id }}_panel_{{ tab.id }}" hx-push-url="true"{% endif %}
               class="inline-flex items-center gap-2 py-3 px-1 border-b-2 text-sm font-medium transition-colors whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus"
               :class="activeTab === $el.dataset.tabId ? 'border-accent text-accent font-semibold' : 'border-transparent text-muted hover:text-text hover:border-border'">
                <span>{{ tab.label }}</span>
                {% if tab.count is not None %}
                <span class="inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-mono rounded-full bg-surface-sunken text-muted">{{ tab.count }}</span>
                {% endif %}
            </a>
            {% endfor %}
        </nav>
    </div>
    {% for tab in tabs %}
    <div role="tabpanel"
         id="{{ instance_id }}_panel_{{ tab.id }}"
         data-tab-id="{{ tab.id }}"
         aria-labelledby="{{ instance_id }}_tab_{{ tab.id }}"
         tabindex="0"
         x-show="activeTab === $el.dataset.tabId"
         class="py-4 focus:outline-none">
        {{ tab.content|default:"" }}
    </div>
    {% endfor %}
</div>