{% set manager_path = request.url.path %}
<div class="mb-6 overflow-x-auto rounded-2xl border border-slate-200 bg-white p-2 shadow-soft">
  <div class="flex min-w-max items-center gap-2">
    <a href="/manager/dashboard" class="rounded-xl px-4 py-2 text-sm font-semibold transition {% if manager_path == '/manager/dashboard' %}bg-brand-600 text-white{% else %}text-slate-700 hover:bg-slate-100{% endif %}">Overview</a>
    <a href="/manager/work" class="rounded-xl px-4 py-2 text-sm font-semibold transition {% if manager_path.startswith('/manager/work') %}bg-brand-600 text-white{% else %}text-slate-700 hover:bg-slate-100{% endif %}">Team Work Board</a>
    <a href="/employees/work" class="rounded-xl px-4 py-2 text-sm font-semibold transition {% if manager_path.startswith('/employees/work') %}bg-brand-600 text-white{% else %}text-slate-700 hover:bg-slate-100{% endif %}">Detailed Allocation</a>
    <a href="/employees/progress" class="rounded-xl px-4 py-2 text-sm font-semibold transition {% if manager_path.startswith('/employees/progress') %}bg-brand-600 text-white{% else %}text-slate-700 hover:bg-slate-100{% endif %}">Engagement Progress</a>
    <a href="/employees/attendance" class="rounded-xl px-4 py-2 text-sm font-semibold transition {% if manager_path.startswith('/employees/attendance') %}bg-brand-600 text-white{% else %}text-slate-700 hover:bg-slate-100{% endif %}">Team Attendance</a>
    <a href="/employees/leave" class="rounded-xl px-4 py-2 text-sm font-semibold transition {% if manager_path.startswith('/employees/leave') %}bg-brand-600 text-white{% else %}text-slate-700 hover:bg-slate-100{% endif %}">Team Leave</a>
    <a href="/alerts" class="rounded-xl px-4 py-2 text-sm font-semibold transition {% if manager_path.startswith('/alerts') %}bg-brand-600 text-white{% else %}text-slate-700 hover:bg-slate-100{% endif %}">My Alert</a>
  </div>
</div>