{% extends "base.html" %}

{% block title %}Уведомления — InfoUser Monitor{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Уведомления</h2>
    <div class="d-flex gap-2">
        <a href="/" class="btn btn-outline-secondary btn-sm">← Назад</a>
        <button id="mark-all-read" class="btn btn-outline-primary btn-sm">Прочитать все</button>
    </div>
</div>

<div id="notifications-list">
    {% if notifications %}
        {% for n in notifications %}
        <div class="card mb-2 notification-card {% if not n.is_read %}border-start border-danger border-4{% endif %}" data-id="{{ n.id }}">
            <div class="card-body d-flex justify-content-between align-items-start">
                <div>
                    <h6 class="card-title mb-1">{{ n.title }}</h6>
                    <p class="card-text mb-1 text-muted small">{{ n.message }}</p>
                    <p class="card-text"><small class="text-muted">{{ n.sent_at | localtime }}</small></p>
                </div>
                {% if not n.is_read %}
                <button class="btn btn-sm btn-outline-success mark-read" data-id="{{ n.id }}">Прочитать</button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="alert alert-info">Уведомлений пока нет.</div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
async function markRead(id) {
    const res = await fetch(`/api/notifications/${id}/read`, { method: 'POST', credentials: 'include' });
    if (res.ok) location.reload();
}

document.querySelectorAll('.mark-read').forEach(btn => {
    btn.addEventListener('click', () => markRead(btn.dataset.id));
});

document.getElementById('mark-all-read')?.addEventListener('click', async () => {
    const res = await fetch('/api/notifications/read-all', { method: 'POST', credentials: 'include' });
    if (res.ok) location.reload();
});
</script>
{% endblock %}