<%
  // Tab-Leiste der Jobangebote-Seiten. `aktiv` ist einer von 'offen',
  // 'favoriten', 'uebernommen'. Der Favoriten-Tab zeigt gemerkte Angebote quer
  // über alle Status und wird nur eingeblendet, wenn es Favoriten gibt (oder er
  // gerade offen ist) — leere Tabs braucht niemand.
  var tabs = [
    { key: 'offen',       href: '/jobangebote',             label: 'Offen',       count: offenCount },
    { key: 'favoriten',   href: '/jobangebote/favoriten',   label: 'Gemerkt',     count: favoritenCount, stern: true },
    { key: 'uebernommen', href: '/jobangebote/uebernommen', label: 'Übernommen',  count: uebernommenCount },
  ].filter(function (t) { return t.key !== 'favoriten' || t.count > 0 || aktiv === 'favoriten'; });
%>
<div class="flex flex-wrap items-center gap-2 mb-6">
    <% tabs.forEach(function (t) { %>
        <a href="<%= t.href %>"
           <%= aktiv === t.key ? 'aria-current="page"' : '' %>
           class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors <%= aktiv === t.key
                ? 'bg-blue-600 text-white shadow-sm'
                : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700' %>">
            <% if (t.stern) { %>
                <svg class="h-4 w-4 <%= aktiv === t.key ? 'text-white' : 'text-amber-500' %>" viewBox="0 0 24 24" fill="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79-5.2-2.73-5.2 2.73.99-5.79-4.21-4.1 5.82-.85 2.6-5.27z"/></svg>
            <% } %>
            <%= t.label %> (<%= t.count %>)
        </a>
    <% }); %>
</div>
