{% extends 'base.html.twig' %}
{% block title %}Notifications{% endblock %}

{% block stylesheets %}
<style>
    .nt-wrap { max-width:640px; margin:0 auto; padding:1.5rem 1.4rem 4rem; }
    .nt-intro { color:var(--ink-soft); margin:.2rem 0 1.4rem; }
    .nt-flash { padding:.8rem 1rem; border-radius:10px; margin-bottom:1.2rem; font-weight:600; }
    .nt-flash.ok { background:#e7f7f0; color:#0a7d55; }
    .nt-flash.ko { background:#fdeaea; color:#b3261e; }
    .nt-stat { display:flex; align-items:baseline; gap:.6rem; border:1px solid var(--line); border-radius:14px; padding:1rem 1.2rem; margin-bottom:1.4rem; }
    .nt-stat b { font-family:var(--font-display); font-weight:var(--display-weight); font-size:2rem; color:var(--primaire); line-height:1; }
    .nt-stat span { color:var(--ink-soft); font-size:.92rem; }
    .nt-field { margin-bottom:1rem; }
    .nt-field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; }
    .nt-field .aide { font-weight:400; color:var(--ink-soft); font-size:.82rem; }
    .nt-field input[type=text], .nt-field textarea { width:100%; padding:.65rem .75rem; border:1.5px solid var(--line); border-radius:9px; font:inherit; color:var(--ink); background:#fff; }
    .nt-field input:focus, .nt-field textarea:focus { outline:none; border-color:var(--primaire); }
    .nt-field textarea { resize:vertical; min-height:90px; }
    .nt-warn { background:#fff4e0; color:#8a5a00; border-radius:10px; padding:.8rem 1rem; font-size:.9rem; margin-bottom:1.2rem; }
</style>
{% endblock %}

{% block body %}
<div class="nt-wrap">
    <h1>Notifications</h1>
    <p class="nt-intro">Envoyez une alerte qui arrive directement sur le téléphone des habitants abonnés. À utiliser pour les moments qui comptent — une nouvelle pétition, une victoire, une réunion publique.</p>

    {% for msg in app.flashes('success') %}<div class="nt-flash ok">{{ msg }}</div>{% endfor %}
    {% for msg in app.flashes('error') %}<div class="nt-flash ko">{{ msg }}</div>{% endfor %}

    {% if not configure %}
        <div class="nt-warn">Les notifications ne sont pas encore configurées sur le serveur (clés manquantes). Contactez votre prestataire.</div>
    {% endif %}

    <div class="nt-stat">
        <b>{{ nbAbonnes }}</b>
        <span>habitant{{ nbAbonnes > 1 ? 's' : '' }} abonné{{ nbAbonnes > 1 ? 's' : '' }} aux alertes</span>
    </div>

    <form method="post" action="{{ path('gestion_notifications') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('notifications') }}">

        <div class="nt-field">
            <label for="nt-titre">Titre <span class="aide">— court et clair, c’est ce qu’on lit en premier</span></label>
            <input type="text" id="nt-titre" name="titre" maxlength="60" required placeholder="Nouvelle pétition en ligne">
        </div>

        <div class="nt-field">
            <label for="nt-message">Message</label>
            <textarea id="nt-message" name="message" maxlength="180" required placeholder="Aidez-nous à obtenir un plan de propreté pour le quartier. Signez en 30 secondes."></textarea>
        </div>

        <div class="nt-field">
            <label for="nt-url">Page à ouvrir <span class="aide">— au clic sur la notification (facultatif)</span></label>
            <input type="text" id="nt-url" name="url" placeholder="/petitions/rats-ville-propre">
        </div>

        <button type="submit" class="btn primary" {{ nbAbonnes == 0 or not configure ? 'disabled' : '' }}
                onclick="return confirm('Envoyer cette notification à {{ nbAbonnes }} abonné(s) ? Cette action est irréversible.');">
            Envoyer la notification
        </button>
    </form>
</div>
{% endblock %}