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

{% block title %}Invitation déjà acceptée{% endblock %}

{% block body %}
<div style="min-height: 100vh; background: linear-gradient(135deg, #10b981 0%, #059669 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, #10b981 0%, #059669 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-check-circle" style="color: #10b981; font-size: 48px;"></i>
            </div>
            <h1 style="color: white; margin: 0 0 12px 0; font-size: 32px; font-weight: 700;">
                Déjà membre !
            </h1>
        </div>

        {# Content #}
        <div style="padding: 48px 40px; text-align: center;">
            <p style="color: #475569; font-size: 16px; line-height: 1.6; margin: 0 0 32px 0;">
                Vous avez déjà accepté cette invitation le <strong>{{ invitation.acceptedAt|date('d/m/Y à H:i') }}</strong>.<br>
                Vous faites déjà partie de l'équipe de <strong>{{ site.name }}</strong> !
            </p>

            <a href="{{ path('dashboard', {siteId: site.id}) }}" 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); margin-right: 12px;">
                <i class="fas fa-tachometer-alt me-2"></i>Accéder au site
            </a>

            <a href="{{ path('choose-site') }}" style="display: inline-block; padding: 16px 32px; background: transparent; color: #64748b; border: 2px solid #e2e8f0; text-decoration: none; border-radius: 12px; font-weight: 600; font-size: 16px;">
                <i class="fas fa-sitemap me-2"></i>Mes sites
            </a>
        </div>
    </div>
</div>
{% endblock %}