{# Navbar notifications dropdown: a no-JS <details> menu, refreshed in JS
   mode by Unpoly polling /_construct/notifications, which returns this same
   fragment. Requires `construct` in context. #}
<details id="fcu-notifications" class="fcu-navbar__dropdown" data-fcu-navbar-dropdown
         up-poll up-interval="60000" up-source="{{ construct.notifications_url }}">
  {# No aria-label on the <summary>: it would override everything inside,
     including the unread count, leaving the badge unannounced. The name is
     built from the content instead — icon label plus the count. #}
  <summary class="fcu-navbar__icon-btn" title="{{ construct.t('nav-notifications') }}">
    {{ icon("notifications", label=construct.t("nav-notifications")) }}
    {# The fragment is reloaded on a 60s poll, so the count changes silently.
       role="status" announces a new count without interrupting. #}
    <span class="fcu-sr-only" role="status">
      {% if construct.notifications.count > 0 %}{{ construct.t("crud-num-notifications", {"count": construct.notifications.count}) }}{% endif %}
    </span>
    {% if construct.notifications.count > 0 %}
    <span class="fcu-navbar__badge" aria-hidden="true">{{ construct.notifications.count }}</span>
    {% endif %}
  </summary>
  <div class="fcu-navbar__menu fcu-navbar__menu--wide">
    <span class="fcu-navbar__menu-header">
      {{ construct.t("crud-num-notifications", {"count": construct.notifications.count}) }}
    </span>
    {% for item in construct.notifications.get_notices() %}
    <a href="{{ item.url or '#' }}" class="fcu-navbar__menu-item">
      {% if item.icon %}{{ icon(item.icon) }}{% endif %}
      <span class="fcu-navbar__menu-item-title">{{ item.title }}</span>
    </a>
    {% endfor %}
  </div>
</details>