{% extends 'emails/_layout-rich.html.twig' %}

{% set trustItems = [
    {icon: 'shield', title: 'Conforme', desc: 'Factur-X et réglementation à jour'},
    {icon: 'clock', title: 'Gain de temps', desc: 'Facturation en quelques clics'},
    {icon: 'server', title: 'Fiable', desc: 'Hébergement en France'},
    {icon: 'check', title: 'Sans jargon', desc: 'Pensé pour les non-comptables'},
] %}

{% block title %}{{ articleTitle }}{% endblock %}

{% block banner_icon %}<img src="{{ (iconSrcs|default({}))['envelope-white']|default(email.image('emails/images/icon-envelope-white.png')) }}" width="18" height="18" alt="" style="display:block; width:18px; height:18px;">{% endblock %}
{% block banner_label %}Blog letter{% endblock %}

{% block body %}
    <p style="margin:0 0 6px; text-align:center; font-size:11px; font-weight:bold; letter-spacing:0.08em; text-transform:uppercase; color:#111827;">Nouvel article</p>
    <h1 style="margin:0 0 20px; text-align:center; font-size:22px; line-height:1.3; color:#111827;">{{ articleTitle }}</h1>

    {% if articleImageUrl %}
        <img src="{{ articleImageUrl }}" alt="" width="100%" style="display:block; width:100%; height:auto; border-radius:10px; margin:0 0 20px;">
    {% else %}
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 20px;">
            <tr>
                <td style="background-color:#111827; border-radius:10px; height:100px; text-align:center; vertical-align:middle;">
                    <img src="{{ (iconSrcs|default({}))['lock-white']|default(email.image('emails/images/icon-lock-white.png')) }}" width="36" height="36" alt="" style="display:block; width:36px; height:36px; margin:0 auto;">
                </td>
            </tr>
        </table>
    {% endif %}

    <p style="margin:0 0 20px; color:#4b5563;">{{ excerpt }}</p>

    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 auto 8px;">
        <tr>
            <td style="border-radius:8px; background-color:#111827;">
                <a href="{{ articleUrl }}" style="display:inline-block; padding:12px 28px; color:#ffffff; text-decoration:none; font-weight:bold; font-size:13px; letter-spacing:0.03em;">
                    {{ (ctaLabel|default('Lire l’article'))|upper }} →
                </a>
            </td>
        </tr>
    </table>

    {% if previousArticle %}
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top:28px; padding-top:24px; border-top:1px solid #f3f4f6;">
            <tr>
                <td style="padding-bottom:12px;" colspan="2">
                    <table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                        <tr>
                            <td style="vertical-align:middle; padding-right:6px; line-height:0;"><img src="{{ (iconSrcs|default({}))['clock']|default(email.image('emails/images/icon-clock.png')) }}" width="14" height="14" alt="" style="display:block; width:14px; height:14px;"></td>
                            <td style="vertical-align:middle; font-size:11px; font-weight:bold; letter-spacing:0.08em; text-transform:uppercase; color:#111827;">Article précédent</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                {% if previousArticle.imageUrl %}
                    <td width="120" style="vertical-align:top; padding-right:14px;">
                        <img src="{{ previousArticle.imageUrl }}" alt="" width="120" style="display:block; width:120px; height:80px; object-fit:cover; border-radius:8px;">
                    </td>
                {% endif %}
                <td style="vertical-align:top;">
                    <p style="margin:0 0 6px; font-size:14px; font-weight:bold; color:#111827;">{{ previousArticle.title }}</p>
                    <p style="margin:0 0 8px; font-size:12.5px; color:#6b7280; line-height:1.5;">{{ previousArticle.excerpt }}</p>
                    <a href="{{ previousArticle.url }}" style="font-size:12.5px; color:#111827; font-weight:bold; text-decoration:underline;">Lire la suite →</a>
                </td>
            </tr>
        </table>
    {% endif %}

    {% include 'emails/_trust-row.html.twig' with {items: trustItems} %}

    {% if quoteText %}
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top:20px;">
            <tr>
                <td style="background-color:#111827; border-radius:12px; padding:20px 24px;">
                    <table role="presentation" cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="vertical-align:top; padding-right:10px; line-height:0;"><img src="{{ (iconSrcs|default({}))['quote-white']|default(email.image('emails/images/icon-quote-white.png')) }}" width="22" height="22" alt="" style="display:block; width:22px; height:22px;"></td>
                            <td style="vertical-align:middle;">
                                <p style="margin:0; color:#ffffff; font-size:13px; line-height:1.6;">{{ quoteText }}</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    {% endif %}
{% endblock %}

{% block footer_text %}Vous recevez cet email car vous êtes inscrit à la blog letter May·Facturation.{% endblock %}
{% block unsubscribe_label %}Se désinscrire{% endblock %}