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

{% block email_title %}Nouveau commentaire — Inventaire {{ inventory.reference }}{% endblock %}

{% block preheader %}{{ note.author.fullName|default('Un utilisateur') }} a ajoute un commentaire sur l'inventaire {{ inventory.reference }}{% endblock %}

{% block email_content %}
    <!-- Titre principal -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 20px 0;">
        <tr>
            <td align="center" style="padding: 20px; background-color: #eff6ff; border-radius: 6px;">
                <h1 style="margin: 0; font-size: 24px; font-weight: bold; color: #1e40af;">
                    Nouveau commentaire
                </h1>
                <p style="margin: 10px 0 0 0; font-size: 16px; color: #3b82f6;">
                    Inventaire {{ inventory.reference }}
                </p>
            </td>
        </tr>
    </table>

    <!-- Message principal -->
    <p style="margin: 0 0 15px 0;">
        Bonjour <strong>{{ recipient.firstName }} {{ recipient.lastName }}</strong>,
    </p>

    <p style="margin: 0 0 20px 0;">
        <strong>{{ note.author.fullName|default('Un utilisateur') }}</strong> a ajoute un commentaire sur l'inventaire <strong>{{ inventory.reference }}</strong>.
    </p>

    <!-- Contenu de la note -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 25px 0; background-color: #f8fafc; border-left: 4px solid #3b82f6; border-radius: 4px;">
        <tr>
            <td style="padding: 15px;">
                <p style="margin: 0 0 8px 0; font-size: 13px; color: #6b7280;">
                    <strong>{{ note.author.fullName|default('?') }}</strong> — {{ note.createdAt|date('d/m/Y a H:i') }}
                </p>
                <p style="margin: 0; font-size: 14px; color: #1f2937; line-height: 1.6;">
                    {{ note.content|nl2br }}
                </p>
            </td>
        </tr>
    </table>

    <!-- Resume inventaire -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 25px 0; background-color: #f9fafb; border-radius: 6px;">
        <tr>
            <td style="padding: 15px;">
                <p style="margin: 0 0 8px 0; font-size: 14px; color: #4b5563;">
                    <strong>Reference :</strong> {{ inventory.reference }}
                </p>
                <p style="margin: 0 0 8px 0; font-size: 14px; color: #4b5563;">
                    <strong>Statut :</strong> {{ inventory.statusLabel }}
                </p>
                <p style="margin: 0; font-size: 14px; color: #4b5563;">
                    <strong>Progression :</strong> {{ inventory.countedProducts }}/{{ inventory.totalProducts }} produits comptes
                </p>
            </td>
        </tr>
    </table>

    <!-- Bouton -->
    <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto 25px auto;">
        <tr>
            <td align="center" style="border-radius: 6px; background-color: #1e40af;">
                <a href="{{ show_url }}"
                   target="_blank"
                   style="display: inline-block; padding: 14px 28px; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; text-decoration: none; border-radius: 6px; background-color: #1e40af;">
                    Voir l'inventaire
                </a>
            </td>
        </tr>
    </table>
{% endblock %}