{% comment %}
M&EL Tracking surface — section tabs.

Include just below the page ``<header>`` on activity_list, output_deliverable_list,
event_log, and smehub_portfolio. The Dashboard (tracking_dashboard) is *not* a tab
target — it is its own top-nav surface.

Upstream events and SME-Hub portfolio are role-gated to match topnav and view gates.
{% endcomment %}
{% with ns=request.resolver_match.namespace url_name=request.resolver_match.url_name %}
<div class="border-b border-ruforum-border mb-6">
  <nav class="-mb-px flex flex-wrap gap-1" role="tablist" aria-label="MEL tracking sections">
    <a href="{% url 'mel_tracking:activity_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_tracking' and url_name|slice:':8' == 'activity' %}true{% else %}false{% endif %}"
       class="rounded-t-md border-b-2 px-4 py-2 font-meta text-xs uppercase tracking-[0.10em] transition-colors
              {% if ns == 'mel_tracking' and url_name|slice:':8' == 'activity' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Activities
    </a>
    <a href="{% url 'mel_tracking:output_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_tracking' and url_name|slice:':6' == 'output' %}true{% else %}false{% endif %}"
       class="rounded-t-md border-b-2 px-4 py-2 font-meta text-xs uppercase tracking-[0.10em] transition-colors
              {% if ns == 'mel_tracking' and url_name|slice:':6' == 'output' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Outputs
    </a>
    {% if user.role == 'mel_officer' or user.role == 'program_manager' or user.role == 'program_director' or user.is_superuser or user.role == 'admin' or user.role == 'system_admin' %}
    <a href="{% url 'mel_tracking:corrective_action_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_tracking' and url_name|slice:':10' == 'corrective' %}true{% else %}false{% endif %}"
       class="rounded-t-md border-b-2 px-4 py-2 font-meta text-xs uppercase tracking-[0.10em] transition-colors
              {% if ns == 'mel_tracking' and url_name|slice:':10' == 'corrective' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Corrective actions
    </a>
    {% endif %}
    {% if user.role == 'mel_officer' or user.is_superuser or user.role == 'admin' or user.role == 'system_admin' %}
    <a href="{% url 'mel_tracking:event_log' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_tracking' and url_name == 'event_log' %}true{% else %}false{% endif %}"
       class="rounded-t-md border-b-2 px-4 py-2 font-meta text-xs uppercase tracking-[0.10em] transition-colors
              {% if ns == 'mel_tracking' and url_name == 'event_log' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Upstream events
    </a>
    {% endif %}
    {% if user.role == 'mel_officer' or user.role == 'sme_admin' or user.is_superuser or user.role == 'admin' or user.role == 'system_admin' %}
    <a href="{% url 'mel_tracking:smehub_portfolio' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_tracking' and url_name|slice:':7' == 'smehub_' %}true{% else %}false{% endif %}"
       class="rounded-t-md border-b-2 px-4 py-2 font-meta text-xs uppercase tracking-[0.10em] transition-colors
              {% if ns == 'mel_tracking' and url_name|slice:':7' == 'smehub_' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      SME-Hub portfolio
    </a>
    {% endif %}
    {% if user.role == 'mel_officer' or user.role == 'program_manager' or user.role == 'program_director' or user.is_superuser or user.role == 'admin' or user.role == 'system_admin' %}
    <a href="{% url 'mel_tracking:indicator_reference' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_tracking' and url_name == 'indicator_reference' %}true{% else %}false{% endif %}"
       class="rounded-t-md border-b-2 px-4 py-2 font-meta text-xs uppercase tracking-[0.10em] transition-colors
              {% if ns == 'mel_tracking' and url_name == 'indicator_reference' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Indicator reference
    </a>
    {% endif %}
  </nav>
</div>
{% endwith %}