{#- chirp-ui: Tabs component
    htmx-powered tab switching with active state tracking.

    Usage:
        from "chirpui/tabs.html" import tabs, tab

        call tabs(active="overview")
            tab("overview", "Overview", url="/tabs/overview", hx_target="#content")
            tab("details", "Details", url="/tabs/details", hx_target="#content")
        end

        <div id="tab-content"> ... tab content loaded via htmx ... </div>
-#}

{% def tabs(active=none, cls="") %}
<nav class="chirpui-tabs{{ " " ~ cls if cls else "" }}" role="tablist">
    {% slot %}
</nav>
{% end %}

{% def tab(id, label, url=none, hx_target=none, hx_swap="innerHTML", active=false, cls="") %}
<a class="chirpui-tab{{ " chirpui-tab--active" if active else "" }}{{ " " ~ cls if cls else "" }}"
   id="tab-{{ id }}"
   role="tab"
   aria-selected="{{ "true" if active else "false" }}"
   {% if url %}
       href="{{ url }}"
       {% if hx_target %}
           hx-get="{{ url }}"
           hx-target="{{ hx_target }}"
           hx-swap="{{ hx_swap }}"
           hx-push-url="false"
       {% end %}
   {% end %}>
    {{ label }}
</a>
{% end %}