{% import "partials/icons.html" as icons %}
{% import "partials/entity_icon.html" as ei %}

<div
  data-signals:{{ tab_signal }}="'{{ active_type }}'"
  data-signals:_tabs-open="false"
>
  <!-- Desktop tabs -->
  <nav class="hidden md:flex gap-1.5" role="tablist">
    {% for tab in tabs %}
      <button
        type="button"
        role="tab"
        class="tab"
        data-class:tab-active="{{ tab_signal_js }} === '{{ tab.key }}'"
        data-on:click="{{ tab_signal_js }} = '{{ tab.key }}'{% if !tab_base_url.is_empty() %}
          ; history.pushState(null, '', '{{ tab_base_url }}{{ tab.key }}');
          @get('{{ tab_base_url }}{{ tab.key }}', {responseOverrides: {selector:
          '{{ tab_fetch_target }}', mode: '{{ tab_fetch_mode }}'}})
        {% endif %}"
      >
        {{ ei::entity_icon(tab.key, "h-4 w-4 shrink-0") }}
        {{ tab.label }}
      </button>
    {% endfor %}
  </nav>
  <!-- Mobile tab selector -->
  <div class="md:hidden">
    <button
      type="button"
      class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm font-medium text-accent"
      data-on:click="$_tabsOpen = !$_tabsOpen"
    >
      <span>
        {% for tab in tabs %}
          <span
            data-show="{{ tab_signal_js }} === '{{ tab.key }}'"
            class="inline-flex items-center gap-1.5"
            >{{ ei::entity_icon(tab.key, "h-4 w-4 shrink-0") }}
            {{ tab.label }}</span
          >
        {% endfor %}
      </span>
      <span data-show="!$_tabsOpen">{{ icons::chevron_down("h-5 w-5") }}</span>
      <span data-show="$_tabsOpen" style="display:none"
        >{{ icons::chevron_up("h-5 w-5") }}</span
      >
    </button>
    <div
      class="mt-1 flex flex-col rounded-md border overflow-hidden"
      data-show="$_tabsOpen"
      style="display:none"
    >
      {% for tab in tabs %}
        <button
          type="button"
          class="tab-mobile"
          data-class:tab-mobile-active="{{ tab_signal_js }} === '{{ tab.key }}'"
          data-on:click="{{ tab_signal_js }} = '{{ tab.key }}'; $_tabsOpen = false{% if !tab_base_url.is_empty() %}
            ; history.pushState(null, '', '{{ tab_base_url }}{{ tab.key }}');
            @get('{{ tab_base_url }}{{ tab.key }}', {responseOverrides:
            {selector: '{{ tab_fetch_target }}', mode: '{{ tab_fetch_mode }}'}})
          {% endif %}"
        >
          {{ ei::entity_icon(tab.key, "h-4 w-4 shrink-0") }}
          {{ tab.label }}
        </button>
      {% endfor %}
    </div>
  </div>
</div>