{% load i18n conjunto %}
{% 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. Subsequent
  updates arrive on the Server-Sent-Events stream and are swapped into
  #notifications-dropdown by htmx' sse extension. The stream needs ASGI,
  hence the second gate on ``cj_layout.notifications_stream``.
{% endcomment %}
{% if cj_layout.notifications_stream %}{% require_script "conjunto/js/htmx/ext/sse.js" %}{% endif %}
<div class="nav-item dropdown"{% if cj_layout.notifications_stream %} hx-ext="sse" sse-connect="{% url 'notifications:notifications-stream' %}"{% endif %}>
  <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"
           sse-swap="notifications">
      </div>
    </div>
  </div>
</div>