{% load i18n %}
{% comment %}
  Bell + dropdown markup, rendered into ``conjunto/app_base.html`` →
  ``top_bar_right`` whenever ``cj_layout.notifications`` is true and
  the user is authenticated.

  Initial content is loaded once via HTMX on dropdown render; the WS
  consumer (NotificationConsumer) pushes subsequent updates as OOB
  swaps targeting #notifications-dropdown.
{% endcomment %}
<div class="nav-item dropdown" hx-ext="ws" ws-connect="/ws/notifications/">
  <a href="#" class="nav-link px-2"
     data-bs-toggle="dropdown" data-bs-auto-close="outside" tabindex="-1"
     aria-label="{% translate 'Show notifications' %}">
    <i class="ti ti-bell fs-2"></i>
    <span id="notifications-badge" class="badge bg-red d-none"></span>
  </a>
  <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow dropdown-menu-card">
    <div class="card">
      <div id="notifications-dropdown"
           class="list-group list-group-flush list-group-hoverable"
           hx-get="{% url 'notifications:notifications-unread' %}"
           hx-trigger="load"
           hx-swap="innerHTML">
      </div>
    </div>
  </div>
</div>