{% if themis_notifications_enabled %}
<!-- Notification bell dropdown -->
<div class="dropdown dropdown-end" id="themis-notification-bell">
    <div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-circle indicator"
         aria-label="Notifications">
        <!-- Bell icon -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
             viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <!-- Badge (hidden when count is 0) -->
        <span id="themis-notification-badge"
              class="badge badge-primary badge-xs indicator-item{% if not themis_unread_notification_count %} hidden{% endif %}">
            {{ themis_unread_notification_count|default:"0" }}
        </span>
    </div>
    <div tabindex="0"
         class="dropdown-content bg-base-200 rounded-box z-20 mt-3 w-80 shadow-lg">
        <div class="p-3">
            <div class="flex items-center justify-between mb-2">
                <h3 class="font-semibold text-sm">Notifications</h3>
                <a href="{% url 'themis:notification-list' %}"
                   class="link link-primary text-xs">View all</a>
            </div>

            <div id="themis-notification-dropdown-list" class="max-h-64 overflow-y-auto">
                {% if themis_unread_notification_count %}
                <p class="text-xs opacity-60 text-center py-2">
                    {{ themis_unread_notification_count }} unread notification{{ themis_unread_notification_count|pluralize }}
                </p>
                {% else %}
                <p class="text-xs opacity-60 text-center py-4">
                    No new notifications
                </p>
                {% endif %}
            </div>

            {% if themis_unread_notification_count %}
            <div class="border-t border-base-300 pt-2 mt-2">
                <form method="post" action="{% url 'themis:notification-mark-all-read' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-ghost btn-xs btn-block">
                        Mark all as read
                    </button>
                </form>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endif %}