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

{% block title %}Bienvenue sur Bubul ! Votre accès bêta est activé{% endblock %}

{% block content %}
    <h1 style="font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 28px; font-weight: 700; color: #2D2D2D; margin: 0 0 24px 0; line-height: 1.3;">Bienvenue sur Bubul !</h1>

    <p style="font-size: 16px; color: #4A5568; margin: 0 0 16px 0; line-height: 1.7;">
        Bonne nouvelle ! Votre demande d'accès à la <strong style="color: #2D2D2D;">bêta fermée de Bubul</strong> a été acceptée.
    </p>

    <p style="font-size: 16px; color: #4A5568; margin: 0 0 16px 0; line-height: 1.7;">
        Vous pouvez dès maintenant vous connecter à la plateforme et découvrir tous nos outils IA pour l'enseignement.
    </p>

    {# ========== IDENTIFIANTS BUBUL ========== #}
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top: 30px; margin-bottom: 15px;">
        <tr>
            <td style="width: 30px; vertical-align: middle; font-size: 18px; padding-right: 8px;">🎓</td>
            <td style="color: #0C81E4; font-size: 18px; font-weight: 600; vertical-align: middle;">Vos identifiants Bubul</td>
        </tr>
    </table>

    <!-- Info box Bubul avec table pour Outlook -->
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;">
        <tr>
            <td style="border-left: 4px solid #0C81E4; background-color: #F5F9FF; padding: 20px 24px; border-radius: 8px;" bgcolor="#F5F9FF">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="width: 28px; vertical-align: top; padding-top: 2px; font-size: 15px;">🔗</td>
                        <td style="font-size: 15px; color: #2D2D2D; padding-bottom: 12px;"><strong style="color: #0C81E4;">URL de connexion :</strong><br>
                        <a href="{{ loginUrl }}" style="color: #0C81E4; text-decoration: none; word-break: break-all;">{{ loginUrl }}</a></td>
                    </tr>
                    <tr>
                        <td style="width: 28px; vertical-align: middle; font-size: 15px;">📧</td>
                        <td style="font-size: 15px; color: #2D2D2D; padding-bottom: 12px;"><strong style="color: #0C81E4;">Email :</strong> {{ userEmail }}</td>
                    </tr>
                    <tr>
                        <td style="width: 28px; vertical-align: middle; font-size: 15px;">🔑</td>
                        <td style="font-size: 15px; color: #2D2D2D;"><strong style="color: #0C81E4;">Mot de passe temporaire :</strong> <code style="background: #E8F4FD; color: #0A6BC4; padding: 4px 10px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 14px;">{{ password }}</code></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    {# ========== IDENTIFIANTS MOODLE (si créés) ========== #}
    {% if moodleCredentials %}
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top: 30px; margin-bottom: 15px;">
        <tr>
            <td style="width: 30px; vertical-align: middle; font-size: 18px; padding-right: 8px;">🏫</td>
            <td style="color: #F7931A; font-size: 18px; font-weight: 600; vertical-align: middle;">Vos identifiants Moodle de test</td>
        </tr>
    </table>

    <p style="font-size: 16px; color: #4A5568; margin: 0 0 16px 0; line-height: 1.7;">
        Un compte Moodle a été créé pour vous permettre de tester l'intégration Bubul ↔ Moodle.
    </p>

    <!-- Info box Moodle avec table pour Outlook -->
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;">
        <tr>
            <td style="border-left: 4px solid #F7931A; background-color: #FFF8F0; padding: 20px 24px; border-radius: 8px;" bgcolor="#FFF8F0">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="width: 28px; vertical-align: top; padding-top: 2px; font-size: 15px;">🔗</td>
                        <td style="font-size: 15px; color: #2D2D2D; padding-bottom: 12px;"><strong style="color: #F7931A;">URL Moodle :</strong><br>
                        <a href="{{ moodleCredentials.url }}" style="color: #F7931A; text-decoration: none; word-break: break-all;">{{ moodleCredentials.url }}</a></td>
                    </tr>
                    <tr>
                        <td style="width: 28px; vertical-align: middle; font-size: 15px;">👤</td>
                        <td style="font-size: 15px; color: #2D2D2D; padding-bottom: 12px;"><strong style="color: #F7931A;">Nom d'utilisateur :</strong> {{ moodleCredentials.username }}</td>
                    </tr>
                    <tr>
                        <td style="width: 28px; vertical-align: middle; font-size: 15px;">🔑</td>
                        <td style="font-size: 15px; color: #2D2D2D;"><strong style="color: #F7931A;">Mot de passe :</strong> <code style="background: #FFF0E0; color: #D97706; padding: 4px 10px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 14px;">{{ moodleCredentials.password }}</code></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    {% endif %}

    <!-- Warning box avec table pour Outlook -->
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;">
        <tr>
            <td style="border-left: 4px solid #F59E0B; background-color: #FFFBF0; padding: 18px 24px; border-radius: 8px;" bgcolor="#FFFBF0">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="width: 28px; vertical-align: top; padding-top: 2px; font-size: 15px;">⚠️</td>
                        <td style="font-size: 15px; color: #2D2D2D; line-height: 1.6;"><strong>Important :</strong> Ces mots de passe sont temporaires. Nous vous recommandons de les changer dès votre première connexion.</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <div style="text-align: center; margin: 30px 0;">
        <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ loginUrl }}" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="16%" stroke="f" fillcolor="#0C81E4">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Se connecter à Bubul</center>
        </v:roundrect>
        <![endif]-->
        <!--[if !mso]><!-->
        <a href="{{ loginUrl }}" style="display: inline-block; padding: 16px 36px; background-color: #0C81E4; color: #FFFFFF; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px;">
            Se connecter à Bubul
        </a>
        <!--<![endif]-->
    </div>

    <p style="font-size: 16px; color: #4A5568; margin: 0 0 16px 0; line-height: 1.7;">
        Vous avez maintenant accès à tous nos outils :
    </p>

    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 20px 0;">
        <tr>
            <td style="padding: 12px 0; font-size: 16px; color: #4A5568; border-bottom: 1px solid #E0E0E0;">
                <strong style="color: #0C81E4;">Moodia</strong> - Créez vos cours Moodle complets en 5 minutes
            </td>
        </tr>
        <tr>
            <td style="padding: 12px 0; font-size: 16px; color: #4A5568; border-bottom: 1px solid #E0E0E0;">
                <strong style="color: #0C81E4;">Serenia</strong> - Votre assistant pédagogique IA conversationnel
            </td>
        </tr>
        <tr>
            <td style="padding: 12px 0; font-size: 16px; color: #4A5568;">
                <strong style="color: #0C81E4;">Slidia</strong> - Générez des présentations professionnelles
            </td>
        </tr>
    </table>

    {# ========== VIDEO DE PRESENTATION ========== #}
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;">
        <tr>
            <td style="border-left: 4px solid #FF0000; background-color: #FFF5F5; padding: 20px 24px; border-radius: 8px;" bgcolor="#FFF5F5">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="width: 28px; vertical-align: top; padding-top: 2px; font-size: 16px;">🎬</td>
                        <td style="font-size: 16px; color: #2D2D2D; font-weight: 600; padding-bottom: 12px;">Découvrez Bubul en vidéo</td>
                    </tr>
                </table>
                <p style="margin: 0 0 12px 0; font-size: 15px; color: #4A5568; line-height: 1.6;">
                    Visionnez notre vidéo de présentation pour découvrir toutes les fonctionnalités de la plateforme :
                </p>
                <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td style="background-color: #FF0000; border-radius: 6px;">
                            <a href="https://www.youtube.com/watch?v=EWS0ro_Vb5E" style="display: inline-block; text-decoration: none;">
                                <table role="presentation" cellpadding="0" cellspacing="0" border="0">
                                    <tr>
                                        <td style="padding: 10px 8px 10px 20px; vertical-align: middle; font-size: 14px; color: #FFFFFF;">▶</td>
                                        <td style="padding: 10px 20px 10px 8px; vertical-align: middle; font-size: 14px; font-weight: 600; color: #FFFFFF;">Voir la vidéo de lancement</td>
                                    </tr>
                                </table>
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <p style="font-size: 16px; color: #4A5568; margin: 0 0 16px 0; line-height: 1.7;">
        Si vous rencontrez le moindre problème ou avez des questions, n'hésitez pas à nous contacter ou à utiliser le formulaire en bas à droite de votre écran.
    </p>

    <p style="margin-top: 30px; color: #2D2D2D; font-weight: 500; font-size: 16px; line-height: 1.7;">
        Bonne découverte !<br>
        L'équipe Bubul
    </p>
{% endblock %}