{% extends "base.html" %}
{% block title %}الإشعارات — Jadwa AI{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">NOTIFICATIONS</div>
            <h1 class="text-2xl font-bold text-white">الإشعارات</h1>
        </div>
        {% if pagination.total > 0 %}
        <form method="POST" action="{{ url_for('notifications.mark_all_read') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="text-xs text-gold-400 hover:text-gold-300 transition">تعليم الكل كمقروء</button>
        </form>
        {% endif %}
    </div>
    <div class="space-y-2">
        {% for n in pagination.items %}
        <form method="POST" action="{{ url_for('notifications.mark_read', nid=n.id) }}" class="block">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="w-full text-right glass p-4 rounded-xl border {{ 'border-gold-500/20 bg-gold-500/5' if not n.is_read else 'border-white/5' }} hover:bg-white/5 transition">
                <div class="flex items-start justify-between">
                    <div>
                        <div class="text-white font-medium text-sm {{ '' if n.is_read else 'font-bold' }}">{{ n.title }}</div>
                        {% if n.message %}<p class="text-xs text-slate-400 mt-1">{{ n.message }}</p>{% endif %}
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-slate-500">{{ n.created_at.strftime('%m/%d %H:%M') }}</span>
                        {% if not n.is_read %}<span class="w-2 h-2 bg-gold-500 rounded-full"></span>{% endif %}
                    </div>
                </div>
            </button>
        </form>
        {% else %}
        <div class="text-center py-16 text-slate-500">لا توجد إشعارات</div>
        {% endfor %}
    </div>
    {% if pagination.pages > 1 %}
    <div class="flex justify-center gap-2 mt-6">
        {% if pagination.has_prev %}<a href="{{ url_for('notifications.index', page=pagination.prev_num) }}" class="px-3 py-1.5 rounded-lg bg-white/5 text-slate-400 text-sm">السابق</a>{% endif %}
        {% if pagination.has_next %}<a href="{{ url_for('notifications.index', page=pagination.next_num) }}" class="px-3 py-1.5 rounded-lg bg-white/5 text-slate-400 text-sm">التالي</a>{% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}