{% extends 'emails/_layout.html.twig' %}

{% set title    = "Projet planifié & validé" %}
{% set eyebrow  = project.acronym %}
{% set subtitle = "La phase de planification est officiellement clôturée." %}
{% set docTag   = "Projet planifié" %}

{% block subject %}[OSEP] Projet planifié — {{ project.name }}{% endblock %}

{% block extra_styles %}
    <style>
        .osep-status-banner {
            background: linear-gradient(135deg, #0A2A52 0%, #163E78 100%);
            color: #ffffff;
            border-radius: 10px;
            padding: 18px 20px;
            margin: 0 0 18px 0;
            position: relative;
            overflow: hidden;
        }
        .osep-status-banner .lbl {
            font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
            text-transform: uppercase; color: rgba(255,255,255,.65);
            margin: 0 0 6px 0;
        }
        .osep-status-banner .v {
            font-size: 17px; font-weight: 800; color: #ffffff;
            margin: 0; letter-spacing: -0.01em;
        }
        .osep-status-banner .sub {
            font-size: 12px; color: rgba(255,255,255,.75);
            margin: 4px 0 0 0;
        }
        .osep-status-banner::after {
            content: "";
            position: absolute; right: -1px; top: 0; bottom: 0; width: 6px;
            background: linear-gradient(180deg, #00853F 0%, #00853F 33.33%, #FDEF42 33.33%, #FDEF42 66.66%, #E31B23 66.66%, #E31B23 100%);
        }
        .osep-stat-row {
            margin: 0 0 16px 0;
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            overflow: hidden;
        }
        .osep-stat-cell {
            padding: 10px 14px;
            background: #F8FAFC;
            text-align: center;
            border-right: 1px solid #E2E8F0;
        }
        .osep-stat-cell:last-child { border-right: 0; }
        .osep-stat-cell .l {
            font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
            text-transform: uppercase; color: #64748B; margin: 0 0 3px 0;
        }
        .osep-stat-cell .v {
            font-size: 15px; font-weight: 800; color: #0A2A52; margin: 0;
        }
        .osep-stat-cell .v small { font-size: 11px; color: #64748B; font-weight: 600; }
    </style>
{% endblock %}

{% block content %}
    <p class="osep-greet">Bonjour <strong>{{ recipientName }}</strong>,</p>

    <p>
        Nous avons le plaisir de vous informer que le projet
        <strong>{{ project.name }}</strong> ({{ project.acronym }}) a franchi une étape clé&nbsp;:
        sa <strong>phase de planification est validée</strong> et le projet est désormais officiellement
        au statut <em>Planifié</em> sur la plateforme OSEP.
    </p>

    <div class="osep-status-banner">
        <p class="lbl">Nouveau statut</p>
        <p class="v">Planifié — prêt pour l'initialisation du suivi</p>
        <p class="sub">Le {{ "now"|date('d M Y') }} · {{ project.department.name }}</p>
    </div>

    {# Synthèse projet #}
    <table class="osep-meta" role="presentation" cellspacing="0" cellpadding="0">
        <tr>
            <td class="k">Projet</td>
            <td class="v">{{ project.name }} <span class="osep-pill" style="margin-left:4px">{{ project.acronym }}</span></td>
        </tr>
        {% if project.program %}
            <tr>
                <td class="k">Programme</td>
                <td class="v">{{ project.program.name }}</td>
            </tr>
        {% endif %}
        <tr>
            <td class="k">Direction porteuse</td>
            <td class="v">{{ project.department.name }}</td>
        </tr>
        <tr>
            <td class="k">Période</td>
            <td class="v">
                {{ project.startDate|date('d/m/Y') }}
                <span style="color:#64748B"> → </span>
                {{ project.endDate|date('d/m/Y') }}
            </td>
        </tr>
        {% if project.totalBudget is defined %}
            <tr>
                <td class="k">Budget alloué</td>
                <td class="v">
                    <span class="osep-pill gold">{{ project.totalBudget|minify_budget }} {{ project.currency }}</span>
                </td>
            </tr>
        {% endif %}
        <tr>
            <td class="k">Responsable</td>
            <td class="v">{{ project.responsible.fullname }}</td>
        </tr>
        <tr>
            <td class="k">Chargé de suivi</td>
            <td class="v">{{ project.monitor.fullname }}</td>
        </tr>
    </table>

    {# Indicateurs synthétiques #}
    <table class="osep-stat-row" role="presentation" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td class="osep-stat-cell">
                <p class="l">Composantes</p>
                <p class="v">{{ stats.components|default(0) }}</p>
            </td>
            <td class="osep-stat-cell">
                <p class="l">Activités</p>
                <p class="v">{{ stats.activities|default(0) }}</p>
            </td>
            <td class="osep-stat-cell">
                <p class="l">Indicateurs</p>
                <p class="v">{{ stats.outputs|default(0) }}</p>
            </td>
            <td class="osep-stat-cell">
                <p class="l">Lignes budg.</p>
                <p class="v">{{ stats.budgetLines|default(0) }}</p>
            </td>
        </tr>
    </table>

    <div class="osep-card">
        <p class="osep-card-eyebrow">Prochaines étapes</p>
        <ul style="margin:0;padding-left:18px;font-size:13px;color:#334155">
            <li>Initialiser le <strong>suivi-évaluation</strong> du projet (configuration des jalons et fréquences)</li>
            <li>Vérifier l'<strong>assignation des acteurs</strong> sur les activités</li>
            <li>Planifier la première <strong>réunion de cadrage</strong> avec les parties prenantes</li>
        </ul>
    </div>

    <div class="osep-cta-wrap">
        <a href="{{ projectUrl }}" class="osep-btn">
            Consulter le projet sur OSEP <span class="osep-btn-arrow">→</span>
        </a>
    </div>

    <p class="osep-fallback">
        Lien direct&nbsp;: <a href="{{ projectUrl }}">{{ projectUrl }}</a>
    </p>

    <div class="osep-divider">&nbsp;</div>

    <p style="font-size:12px;color:#64748B;margin:0">
        Vous recevez cet email parce que vous êtes <strong style="color:#0A2A52">{{ recipientRole|default('acteur identifié') }}</strong>
        du projet <strong>{{ project.acronym }}</strong>. Pour toute question relative à votre rôle,
        contactez le chargé de suivi&nbsp;:
        <a href="mailto:{{ project.monitor.email }}" style="color:#163E78;font-weight:600">{{ project.monitor.email }}</a>.
    </p>
{% endblock %}