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

{% block title %}Invitation invalide{% endblock %}

{% block body %}
<div style="min-height: 100vh; background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%); padding: 40px 20px; display: flex; align-items: center; justify-content: center;">
    <div style="max-width: 600px; width: 100%; background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;">

        {# Header #}
        <div style="background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%); padding: 48px 40px; text-align: center;">
            <div style="background: white; width: 100px; height: 100px; margin: 0 auto 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.15);">
                <i class="fas fa-exclamation-triangle" style="color: #f43f5e; font-size: 48px;"></i>
            </div>
            <h1 style="color: white; margin: 0 0 12px 0; font-size: 32px; font-weight: 700;">
                Invitation invalide
            </h1>
        </div>

        {# Content #}
        <div style="padding: 48px 40px; text-align: center;">
            {% if reason == 'not_found' %}
                <p style="color: #475569; font-size: 16px; line-height: 1.6; margin: 0 0 32px 0;">
                    Cette invitation n'existe pas ou a expiré.<br>
                    Le lien que vous avez utilisé n'est plus valide.
                </p>
            {% elseif reason == 'wrong_user' %}
                <p style="color: #475569; font-size: 16px; line-height: 1.6; margin: 0 0 16px 0;">
                    Cette invitation a été envoyée à <strong>{{ invitedEmail }}</strong>,<br>
                    mais vous êtes connecté avec <strong>{{ currentEmail }}</strong>.
                </p>
                <div style="background: #fef3c7; padding: 16px; border-radius: 8px; margin-bottom: 32px;">
                    <p style="color: #92400e; font-size: 14px; margin: 0;">
                        <i class="fas fa-info-circle me-1"></i>
                        Veuillez vous déconnecter et vous reconnecter avec le bon compte.
                    </p>
                </div>
            {% endif %}

            <a href="{{ path('choose-site') }}" style="display: inline-block; padding: 16px 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);">
                <i class="fas fa-home me-2"></i>Retour à mes sites
            </a>

            <p style="color: #94a3b8; font-size: 13px; margin: 32px 0 0 0;">
                Si vous pensez qu'il s'agit d'une erreur, contactez la personne<br>
                qui vous a invité pour obtenir un nouveau lien.
            </p>
        </div>
    </div>
</div>
{% endblock %}