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

{% block title %}Accepter l'invitation - {{ site.name }}{% endblock %}

{% block body %}
<div style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 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, #667eea 0%, #764ba2 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-user-plus" style="color: #667eea; font-size: 48px;"></i>
            </div>
            <h1 style="color: white; margin: 0 0 12px 0; font-size: 32px; font-weight: 700;">
                Nouvelle invitation
            </h1>
            <p style="color: rgba(255,255,255,0.95); margin: 0; font-size: 18px;">
                Vous avez été invité à collaborer
            </p>
        </div>

        {# Content #}
        <div style="padding: 48px 40px;">
            <div style="text-align: center; margin-bottom: 32px;">
                <p style="color: #475569; font-size: 16px; line-height: 1.6; margin: 0 0 8px 0;">
                    <strong>{{ invitedBy.username }}</strong> vous invite à rejoindre
                </p>
                <h2 style="color: #1e293b; font-size: 28px; font-weight: 700; margin: 0 0 24px 0;">
                    {{ site.name }}
                </h2>
            </div>

            {# Role Badge #}
            <div style="background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); padding: 32px; border-radius: 12px; margin: 0 0 32px 0; text-align: center;">
                <div style="font-size: 14px; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-weight: 600;">
                    Votre rôle
                </div>
                <div style="font-size: 28px; font-weight: 700; color: #1e293b; margin-bottom: 8px;">
                    {% if invitation.role == 'ROLE_SITE_ADMIN' %}
                    <i class="fas fa-crown" style="color: #667eea;"></i> Administrateur du site
                    {% elseif invitation.role == 'ROLE_CONTENT_EDITOR' %}
                    <i class="fas fa-pen" style="color: #10b981;"></i> Éditeur de contenu
                    {% endif %}
                </div>
            </div>

            {# Permissions #}
            <div style="background: #f8fafc; padding: 24px; border-left: 4px solid #667eea; margin: 0 0 40px 0; border-radius: 4px;">
                <div style="font-weight: 600; color: #1e293b; margin-bottom: 16px; font-size: 15px;">
                    <i class="fas fa-shield-alt" style="color: #667eea;"></i> Vos permissions :
                </div>
                <ul style="margin: 0; padding-left: 24px; color: #475569; font-size: 14px; line-height: 2;">
                    {% if invitation.role == 'ROLE_SITE_ADMIN' %}
                    <li>Gestion complète de la structure et des pages</li>
                    <li>Modification du contenu (blog, galeries, textes)</li>
                    <li>Personnalisation du design et de l'apparence</li>
                    <li>Configuration des paramètres et du SEO</li>
                    <li>Gestion des utilisateurs et des invitations</li>
                    {% elseif invitation.role == 'ROLE_CONTENT_EDITOR' %}
                    <li>Gestion des articles de blog</li>
                    <li>Gestion des galeries d'images</li>
                    <li>Consultation des messages de contact</li>
                    <li>Modification des textes dans les pages</li>
                    {% endif %}
                </ul>
            </div>

            {# Action Buttons #}
            <form method="post" action="{{ path('invitation_confirm', {token: invitation.invitationToken}) }}">
                <button type="submit" style="width: 100%; padding: 18px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-weight: 600; font-size: 18px; cursor: pointer; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; margin-bottom: 12px;">
                    <i class="fas fa-check-circle me-2"></i>Accepter l'invitation
                </button>
            </form>

            <a href="{{ path('choose-site') }}" style="display: block; width: 100%; padding: 16px; background: transparent; color: #64748b; border: 2px solid #e2e8f0; border-radius: 12px; font-weight: 600; font-size: 16px; text-align: center; text-decoration: none; transition: all 0.3s ease;">
                <i class="fas fa-times-circle me-2"></i>Plus tard
            </a>

            <p style="color: #94a3b8; font-size: 13px; text-align: center; margin: 24px 0 0 0; line-height: 1.6;">
                En acceptant cette invitation, vous pourrez accéder à ce site<br>
                et collaborer avec l'équipe selon vos permissions.
            </p>
        </div>
    </div>
</div>

<style>
    button[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
    }

    a[href*="choose-site"]:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }
</style>
{% endblock %}