{#- chirp-ui: Tab panels (button-based, client-side switching)
    Use tab_button() for each button, tab_panel() for each content. Requires Alpine.js.

    Renamed from tab() to tab_button() to avoid collision with the htmx-based
    tab() in tabs.html.

    Usage:
        from "chirpui/tabs_panels.html" import tabs_container, tab_button, tab_panel

        {% call tabs_container(active="overview") %}
            {{ tab_button("overview", "Overview", active=true) }}
            {{ tab_button("details", "Details") }}
            {{ tab_panel("overview", active=true) %}
                Overview content
            {% end %}
            {{ tab_panel("details") %}
                Details content
            {% end %}
        {% end %}
-#}

{% def tab_button(id, label, active=false) %}
<button type="button" class="chirpui-tabs__tab"
        data-tab-id="{{ id }}"
        :class="{ 'chirpui-tabs__tab--active': active === $el.dataset.tabId }"
        role="tab" :aria-selected="active === $el.dataset.tabId"
        :aria-controls="$id('tabpanel', $el.dataset.tabId)" :id="$id('tab', $el.dataset.tabId)"
        @click="selectTab($el)">
    {{ label }}
</button>
{% end %}

{#- Deprecated alias — use tab_button() instead. -#}
{% def tab(id, label, active=false) %}{{ tab_button(id, label, active=active) }}{% end %}

{% def tab_panel(id, active=false) %}
<div class="chirpui-tab-panel" data-tab-id="{{ id }}" :id="$id('tabpanel', $el.dataset.tabId)" role="tabpanel"
     :aria-labelledby="$id('tab', $el.dataset.tabId)"
     x-show="active === $el.dataset.tabId" x-cloak x-transition>
    {% slot %}
</div>
{% end %}

{% def tabs_container(active=none) %}
<div class="chirpui-tabs" x-id="['tab', 'tabpanel']" x-data="chirpuiTabs()" data-active="{{ active or '' }}">
    {% slot %}
</div>
{% end %}