{# Sub-nav strip for a /ui page with multiple actions.

   Rendered as a navbar-styled bar that visually attaches to the
   main navbar above (the layout renders it via ``{% block subnav %}``
   immediately after the dark navbar). Pills inside the bar carry
   the per-section actions; the bar itself stays compact so it
   reads as "row of buttons" rather than "second-class header".

   Usage: include with ``sections`` (list of dicts) + ``active``
   (string key).

   Each section dict has:
     key:   short identifier matching ``?section=<key>``
     label: display text
     icon:  Bootstrap Icon class fragment (e.g. "list-ul")
     href:  the URL the pill links to

   The default-key section (``"list"``) is reached by visiting
   the page without ``?section=`` -- so refreshing the default
   view stays on the default view.

   Accessibility: ``aria-label`` on the <nav> labels the strip
   for screen readers; ``aria-current="page"`` on the active <a>
   tells assistive tech which sub-section is currently visible.
#}
<nav class="navbar subnav-strip"
     aria-label="Section sub-navigation">
    <div class="container">
        {% if sections %}
        <ul class="nav nav-pills me-auto">
            {% for s in sections %}
            <li class="nav-item">
                <a class="nav-link{% if s.key == active %} active{% endif %}"
                   href="{{ s.href }}"
                   {% if s.key == active %}aria-current="page"{% endif %}>
                    {% if s.icon %}<i class="bi bi-{{ s.icon }} me-1"></i>{% endif %}{{ s.label }}
                </a>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        {# No sub-sections on this page; the strip still renders
           (the user wants the chrome to stay consistent across
           pages so transitions don't reflow the header). #}
        <span class="me-auto"></span>
        {% endif %}
    </div>
</nav>