{# Tab navigation. Usage: {% include "_tabs.html" with tabs=tab_list active=active_tab %} #}
<div class="border-b border-slate-200 mb-6">
  <nav class="flex gap-6" aria-label="Tabs">
    {% for tab in tabs %}
    <a href="?tab={{ tab.id }}"
       class="py-3 px-1 text-sm font-medium border-b-2 transition-colors
              {% if active_tab == tab.id %}border-brand-600 text-brand-600{% else %}border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300{% endif %}">
      {{ tab.label }}
      {% if tab.count is not None %}<span class="ml-1.5 bg-slate-100 text-slate-600 text-xs px-1.5 py-0.5 rounded-full">{{ tab.count }}</span>{% endif %}
    </a>
    {% endfor %}
  </nav>
</div>