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

Render the same strip on every list page in the Indicators namespace so the
active highlight tracks the user as they move between indicators, logframes,
outcomes and impact evaluations.

Active state is derived from request.resolver_match (bound to ``ns`` /
``url_name`` via the {% with %} block below — same pattern as topnav.html).
Include just below the page ``<header>`` and above the main content / filters.
{% 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 indicators sections">
    <a href="{% url 'mel_indicators:indicator_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_indicators' and url_name|slice:':9' == 'indicator' %}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_indicators' and url_name|slice:':9' == 'indicator' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Indicators
    </a>
    <a href="{% url 'mel_indicators:validation_queue' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_indicators' and url_name == 'validation_queue' %}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_indicators' and url_name == 'validation_queue' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Validation
    </a>
    <a href="{% url 'mel_indicators:logframe_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_indicators' and url_name|slice:':8' == 'logframe' %}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_indicators' and url_name|slice:':8' == 'logframe' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Strategic Objectives
    </a>
    <a href="{% url 'mel_indicators:outcome_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_indicators' and url_name|slice:':7' == 'outcome' %}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_indicators' and url_name|slice:':7' == 'outcome' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Outcomes
    </a>
    <a href="{% url 'mel_indicators:impact_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_indicators' and url_name|slice:':6' == 'impact' %}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_indicators' and url_name|slice:':6' == 'impact' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Impact
    </a>
    {% if user.role == 'mel_officer' or user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'program_manager' or user.role == 'program_director' %}
    <a href="{% url 'mel_indicators:escalation_list' %}"
       role="tab"
       aria-selected="{% if ns == 'mel_indicators' and url_name|slice:':10' == 'escalation' %}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_indicators' and url_name|slice:':10' == 'escalation' %}border-ruforum-primary text-ruforum-primary{% else %}border-transparent text-ruforum-text-muted hover:text-ruforum-text hover:border-ruforum-border{% endif %}">
      Alerts
    </a>
    {% endif %}
  </nav>
</div>
{% endwith %}