{% extends 'base.html.twig' %}

{% block title %}{{ 'notifications.page_title'|trans({}, 'Notifications') }}{% endblock %}

{% block body %}
<div class="container" style="margin-top: 80px; padding-top: 20px; max-width: 800px;">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
        <h2 style="margin: 0; color: #333; font-size: 24px;">
            <i class="fa fa-bell" style="color: #00a550; margin-inline-end: 8px;"></i>
            {{ 'notifications.page_title'|trans({}, 'Notifications') }}
        </h2>
        {% if count > 0 %}
        <span style="color: #888; font-size: 14px;">
            {{ 'notifications.total'|trans({'%count%': count}, 'Notifications') }}
        </span>
        {% endif %}
    </div>

    {% if notifications|length == 0 %}
        <div style="text-align: center; padding: 60px 20px; color: #999;">
            <i class="fa fa-bell-slash-o" style="font-size: 48px; margin-bottom: 16px; display: block;"></i>
            <p style="font-size: 16px;">{{ 'notifications.empty'|trans({}, 'Notifications') }}</p>
        </div>
    {% else %}
        <div style="background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden;">
            {% for notification in notifications %}
                <a href="{{ notification.link }}"
                   class="notification-page-item"
                   data-notification-id="{{ notification.id }}"
                   style="display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; text-decoration: none; color: #333; border-bottom: 1px solid #f0f0f0; transition: background 0.15s;
                   {% if notification.seen == 0 %}background: #f0faf4;{% endif %}">
                    <div style="flex-shrink: 0; width: 10px; height: 10px; border-radius: 50; margin-top: 6px;
                        {% if notification.seen == 0 %}background: #00a550;{% else %}background: transparent;{% endif %}">
                    </div>
                    <div style="flex: 1; min-width: 0;">
                        <p style="margin: 0 0 4px 0; font-size: 14px; line-height: 1.5;
                            {% if notification.seen == 0 %}font-weight: 600;{% else %}font-weight: 400; color: #666;{% endif %}">
                            {{ notification.message }}
                        </p>
                        <span style="font-size: 12px; color: #999;">
                            {{ notification.datetime|date('Y-m-d H:i') }}
                        </span>
                    </div>
                    {% if notification.clicked == 0 %}
                    <div style="flex-shrink: 0; align-self: center;">
                        <i class="fa fa-chevron-{{ app.request.locale == 'ar' ? 'left' : 'right' }}" style="color: #ccc; font-size: 12px;"></i>
                    </div>
                    {% endif %}
                </a>
            {% endfor %}
        </div>

        {# Pagination #}
        {% if totalPages > 1 %}
        <div style="display: flex; justify-content: center; gap: 8px; margin-top: 24px; margin-bottom: 40px;">
            {% if currentPage > 1 %}
                <a href="{{ path('app_notifications_index', {page: currentPage - 1}) }}"
                   style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: #00a550; font-size: 14px;">
                    {{ 'notifications.prev'|trans({}, 'Notifications') }}
                </a>
            {% endif %}

            {% for i in 1..totalPages %}
                {% if i == currentPage %}
                    <span style="padding: 8px 16px; background: #00a550; color: white; border-radius: 8px; font-size: 14px;">{{ i }}</span>
                {% elseif (i - currentPage)|abs <= 2 or i == 1 or i == totalPages %}
                    <a href="{{ path('app_notifications_index', {page: i}) }}"
                       style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: #333; font-size: 14px;">{{ i }}</a>
                {% elseif (i - currentPage)|abs == 3 %}
                    <span style="padding: 8px 16px; color: #999; font-size: 14px;">...</span>
                {% endif %}
            {% endfor %}

            {% if currentPage < totalPages %}
                <a href="{{ path('app_notifications_index', {page: currentPage + 1}) }}"
                   style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 8px; text-decoration: none; color: #00a550; font-size: 14px;">
                    {{ 'notifications.next'|trans({}, 'Notifications') }}
                </a>
            {% endif %}
        </div>
        {% endif %}
    {% endif %}
</div>

<script>
// Mark notification as clicked when user clicks it
document.querySelectorAll('.notification-page-item').forEach(function(item) {
    item.addEventListener('click', function(e) {
        var id = this.getAttribute('data-notification-id');
        if (id) {
            navigator.sendBeacon('/api/notifications/' + id + '/click');
        }
    });
});
</script>
{% endblock %}