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

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

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

{% def tab(id, label, active=false) %}
<button type="button" class="chirpui-tabs__tab"
        :class="{ 'chirpui-tabs__tab--active': active === '{{ id }}' }"
        role="tab" :aria-selected="active === '{{ id }}'"
        :aria-controls="$id('tabpanel', '{{ id }}')" :id="$id('tab', '{{ id }}')"
        @click="active = '{{ id }}'; $dispatch('chirpui:tab-changed', { tab: '{{ id }}' })">
    {{ label }}
</button>
{% end %}

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

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