{% extends '@SyliusShop/Email/Templates/customLayout.html.twig' %}

{% block subject %}
    Votre accès au shop en ligne Lerda
{% endblock %}

{% block content %}
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #1a1a1a;">
        <tr>
            <td align="center" style="padding: 20px 0;">
                <!-- Logo -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 20px 0;">
                            <a href="https://www.shop.lerda.fr"><img src="cid:{{ logoCid }}" alt="Logo-Lerda" style="height: 170px;"/></a>
                            {#                            <img src="https://www.shop.lerda.fr/themes/bootstrap-theme/images/lerda-logo.png" alt="Logo-Lerda" style="height: 170px;">#}
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <hr style="border: none; border-top: 1px solid #444; width: 80%; margin: 10px 0;" />
                        </td>
                    </tr>
                </table>

                <!-- Titre -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 20px 0; font-size: 24px; font-weight: bold; color: #ffffff;">
                            Vos identifiants de connexion au shop Lerda
                        </td>
                    </tr>
                </table>

                <!-- Contenu -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #2a2a2a; border-radius: 5px;">
                    <tr>
                        <td style="padding: 30px; font-size: 16px; line-height: 24px; color: #ffffff;">
                            <p>
                                Bonjour,
                            </p>
                            <p>
                                Vous pouvez désormais accéder à votre espace client sur notre boutique en ligne :
                            </p>

                            <ul style="list-style: none; padding: 0;">
                                <li><strong>Adresse e-mail :</strong> {{ userEmail }}</li>
                                <li><strong>Mot de passe :</strong> {{ password }}</li>
                            </ul>

                            {% if mustChangePassword %}
                                <p style="margin-top: 10px; font-style: italic;">
                                    Vous serez invité à modifier votre mot de passe lors de votre première connexion.
                                </p>
                            {% endif %}
                        </td>
                    </tr>
                </table>

                <!-- Bouton connexion -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 30px 0;">
                            <a
                                href="https://www.shop.lerda.fr/"
                                style="display: inline-block; padding: 12px 24px; background-color: #0056b3; color: #ffffff; text-decoration: none; border-radius: 5px; font-size: 16px; font-weight: bold;"
                            >
                                Se connecter au shop
                            </a>
                        </td>
                    </tr>
                </table>

                <!-- Boutons App Store et Google Play -->
                <p style="margin-top:20px;">
                    <a href="https://apps.apple.com/fr/app/lerda-shop/id6747896084" target="_blank">
                        <img src="cid:{{ appStoreCid }}" alt="App Store" style="height:50px;" />
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=com.planis_eddy.LerdaMobile" target="_blank" style="margin-left:10px;">
                        <img src="cid:{{ googlePlayCid }}" alt="Google Play" style="height:50px;" />
                    </a>
                </p>

                <!-- Pied -->
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td align="center" style="padding: 20px 0; font-size: 12px; color: #888;">
                            Email automatique envoyé par <a href="https://www.shop.lerda.fr" style="color: #888; text-decoration: underline;">LERDA</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
{% endblock %}