{% extends 'base.html' %}
{% load i18n %}

{% block title %}
    {% trans "Notifications" %}
{% endblock title %}

{% block customeCSS %}

/* General Layout */
body {
    background-color: #f8f9fa; /* Light gray background for contrast */
}

/* List Item Styling */
.list-item {
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    cursor: pointer;
}

.list-item:hover {
    background-color: #f1f3f5;
    transform: translateY(-2px); /* Subtle lift on hover */
}

/* Unread Notification Dot */
.unread-dot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* HTMX Loading Indicator */
.htmx-request #loading-indicator {
    display: block;
}
{% endblock %}
{% block content %}
    <main class="container-fluid p-5">
        <div class="row gx-5">
            <div class="col-lg-8">
                <header class="d-flex justify-content-between align-items-center mb-5 border-bottom pb-4">
                    <h1 class="display-5 fw-bolder">{% trans "Inbox" %}</h1>
                    <div class="d-flex align-items-center">
                        <span class="text-muted d-none d-md-block me-3">
                            <span id="unread-count-text" class="fw-bold me-1">{{ total_count}}</span> {% trans "Notifications" %}
                        </span>
                        <a href="{% url 'mark_all_notifications_as_read' %}"
                           class="btn btn-sm btn-outline-secondary rounded-pill fw-bold">
                            <i class="fas fa-check-double me-2"></i>{% trans "Mark all read" %}
                        </a>
                    </div>
                </header>

                {% if notifications %}
                    <div class="list-container" hx-indicator="#loading-indicator">
                        {% for notification in notifications %}
                            <div class="list-item d-flex align-items-start py-4 border-bottom position-relative">
                                {% if not notification.is_read %}
                                    
                                 <div class="me-4 mt-1">
                                    <i class="fas fa-info-circle fa-2x text-primary"></i>
                                 </div>
                                   
                                {% else %}
                                   <div class="me-4 mt-1">
                                    <i class="fas fa-info-circle fa-2x text-secondary"></i>
                                  </div>
                                {% endif %}
                                
                                <div class="flex-grow-1">
                                    <h5 class="mb-1  fw-normal">
                                        {{ notification.message|safe }}
                                    </h5>
                                    <p class="text-muted fs-6 mb-0 mt-2">
                                        <i class="far fa-clock me-1"></i>
                                        <span class="text-nowrap">{{ notification.created|timesince }} ago</span>
                                    </p>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5 mt-5">
                        <i class="fas fa-bell-slash fa-4x text-muted mb-4"></i>
                        <h4 class="text-secondary fw-bold">{% trans "No new notifications" %}</h4>
                        <p class="text-muted">{% trans "You're all caught up. Check back later for updates." %}</p>
                    </div>
                {% endif %}

                {% if page_obj.paginator.num_pages > 1 %}
                    <div class="d-flex justify-content-center mt-5">
                        {% include 'partials/pagination.html' %}
                    </div>
                {% endif %}
            </div>

            <div class="col-lg-4 d-none d-lg-block">
                <div class="card  border-0 rounded-4 p-4 sticky-top position-static mt-3 bg-gray-200 w-100">
                    <h4 class="fw-bold mb-3">{% trans "Status" %}</h4>
                    <ul class="list-unstyled mb-0">
                        <li class="d-flex align-items-center mb-2">
                            <i class="fas fa-circle-check me-2"></i>
                            <span>{% trans "Read:" %}<span class="fw-bold ms-1">{{read_count}}</span></span>
                        </li>
                        <li class="d-flex align-items-center">
                            <i class="fas fa-bell text-primary me-2"></i>
                            <span>{% trans "Unread:" %} <span class="fw-bold ms-1">{{unread_count}}</span></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </main>

    <div id="loading-indicator" class="spinner-border text-primary d-none position-fixed bottom-0 end-0 m-3" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
{% endblock %}