{% if notifications %}

    <a href="#" data-bs-toggle="dropdown" class="navbar-link dropdown-toggle icon">
        <i class="fa fa-bell"></i>
        <span class="badge bg-danger">{{ notifications|length }}</span>
    </a>
    <div class="dropdown-menu media-list dropdown-menu-end">
        <div class="dropdown-header">
            NOTIFICATIONS ({{ notifications|length }})
        </div>

    {% for notification in notifications %}
    <div class="alert alert-{% if notification.notification_type == 'info' %}info
                    {% elif notification.notification_type == 'warning' %}warning
                    {% elif notification.notification_type == 'seasonal' %}secondary
                    {% elif notification.notification_type == 'success' %}success
                    {% elif notification.notification_type == 'maintenance' %}cyan
                    {% elif notification.notification_type == 'security' %}red
                    {% elif notification.notification_type == 'feature' %}purple
                    {% elif notification.notification_type == 'update' %}pink
                    {% endif %} notification {{ notification.notification_type }} alert-dismissible fade show" role="alert">

                <small class="alert-heading">
                    {% if notification.notification_type == 'INFO' %}
                        <i class="fas fa-info-circle"></i>
                    {% elif notification.notification_type == 'WARNING' %}
                        <i class="fas fa-exclamation-triangle"></i>
                    {% elif notification.notification_type == 'ERROR' %}
                        <i class="fas fa-exclamation-circle"></i>
                    {% elif notification.notification_type == 'SUCCESS' %}
                        <i class="fas fa-check-circle"></i>
                    {% elif notification.notification_type == 'MAINTENANCE' %}
                        <i class="fas fa-tools"></i>
                    {% elif notification.notification_type == 'SECURITY' %}
                        <i class="fas fa-shield-alt"></i>
                    {% elif notification.notification_type == 'FEATURE' %}
                        <i class="fas fa-star"></i>
                    {% elif notification.notification_type == 'UPDATE' %}
                        <i class="fas fa-sync-alt"></i>
                    {% endif %}
                    {{ notification.title }}
                    <span class="badge
                    bg-{% if notification.priority == 'low' %}success
                    {% elif notification.priority == 'medium' %}info
                    {% elif notification.priority == 'high' %}warning
                    {% else %}danger{% endif %} ms-2">
                        {{ notification.priority|upper }}
                    </span>
                </small>
{#                <p class="mb-1">{{ notification.message }}</p>#}
                <small class="text-muted">
                    <i class="fas fa-clock"></i> {{ notification.created_at|timesince }} ago
                </small>
{#                {% if notification.action_url and notification.action_text %}#}
{#                <div class="mt-2">#}
{#                    <a href="{{ notification.action_url }}" class="btn btn-sm btn-outline-primary">#}
{#                        {{ notification.action_text }}#}
{#                    </a>#}
{#                </div>#}
{#                {% endif %}#}

            {% if notification.is_dismissible %}
            <a type="button"
                    class="btn-close" 
                    href="{% url 'core:dismiss_notification' notification.notification_id %}"
                    aria-label="Close"></a>
            {% endif %}

    </div>
    {% endfor %}

    <div class="dropdown-footer text-center">
            <a href="{% url 'core:system_notification_list' %}" class="text-decoration-none">View more</a>
        </div>

{% endif %}