<!DOCTYPE html>
<html lang="{{ locale }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body id="email" class="w-full overflow-hidden">
<div class="w-full max-w-[1024px] mx-auto py-6">
    <div>
        <div class="text-center">
            <img class="object-contain h-28 mb-10" src="https://www.occ-france.com/{{ asset('email/logo.png')}}" alt="{{ 'alt.logo'|trans([],'email', locale)|raw }}" width="89" height="112">
        </div>
        <h1 class="hidden">{{ 'forgot.title'|trans([],'email', locale) }}</h1>
        <div>
            <div style="Margin:0 0 10px 0;">
                <img class="w-8" src="https://www.occ-france.com/{{ asset('email/dots.png') }}"
                     alt="{{ 'alt.dots'|trans([],'email', locale)|raw }}" width="32" height="7">
            </div>
            {% if member and member.fullName %}
                <div class="text-sm text-neutral-600 mb-6">{% if member.civility %}{{ member.civility|capitalize }}.{% endif %}
                {{ member.fullName }},</div>{% endif %}
            <div class="text-sm text-neutral-600 mb-8">{{ 'forgot.intro'|trans([],'email', locale)|raw }}</div>
            <div style="text-align: center;">
                <a href="{{ schemeAndHttpHost }}{{ path('app_reset_password', {token: resetToken.token}) }}"
                   style="border-radius: 9999px; background-color: #a69877; font-size: 14px; color: #fff; text-decoration-line: none; border: 20px solid #a69877;">{{ 'forgot.button'|trans([],'email', locale)|raw }}</a>
            </div>
        </div>
        <div class="text-sm text-neutral-600 mt-12">{{ 'forgot.text'|trans({'%expireAt%' : resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle')},'email', locale)|raw }}</div>
        <div class="flex justify-between items-center">
            <div>
                <div class="text-neutral-600 text-sm">{{ 'greeting'|trans([],'email', locale)|raw }}</div>
                <div class="text-neutral-600 text-sm font-bold mt-2">{{ 'signature'|trans([],'email', locale)|raw }}</div>
            </div>
            <div style="width: 45%;float: right;text-align: right">
                <img class="w-28 mt-8" src="https://www.occ-france.com/{{ asset('email/leaf.png') }}"
                     alt="{{ 'alt.leaf'|trans([],'email', locale)|raw }}" width="112" height="90">
            </div>
        </div>
        <div style="width:100%;text-align: right;Margin:0 0 10px 0;">
            <img class="flex ml-auto w-8" src="https://www.occ-france.com/{{ asset('email/dots.png') }}"
                 alt="{{ 'alt.dots'|trans([],'email', locale)|raw }}" width="32" height="7">
        </div>
    </div>
</div>
<div style="background-color: #525252; font-size: 14px; color: #fff; border: 30px solid #525252; text-align: center; width: 100%;">
    <div class="flex justify-center items-center w-full" style="display: flex; align-items: center; justify-content: center; width: 100%;">
        <a href="https://www.facebook.com/ordredescoteaux92" target="_blank">
            <img class="w-6" src="https://www.occ-france.com/{{ asset('email/logo-facebook.png') }}" alt="{{ 'alt.facebook'|trans([],'email', locale)|raw }}" style="width: 24px;" width="24" height="24">
        </a>
        <a href="https://www.instagram.com/ordredescoteauxdechampagneoff/" target="_blank">
            <img class="w-6 mx-4" src="https://www.occ-france.com/{{ asset('email/logo-instagram.png') }}" alt="{{ 'alt.instagram'|trans([],'email', locale)|raw }}" style="margin-left: 16px; margin-right: 16px; margin: 0 16px 0 16px; width: 24px;" width="24" height="24">
        </a>
        <a href="https://www.linkedin.com/company/ordre-des-coteaux-de-champagne/" target="_blank">
            <img class="w-6" src="https://www.occ-france.com/{{ asset('email/logo-linkedin.png') }}" alt="{{ 'alt.linkedin'|trans([],'email', locale)|raw }}" style="width: 24px;" width="24" height="24">
        </a>
    </div>
    <br>
    <div style="background-color: #525252;">
        <div class="flex flex-col text-center items-center text-sm font-light before:content-[''] before:w-20 before:h-[1px] before:bg-red-700 before:mb-6" style="display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 14px; font-weight: 300;">
            <div>{{ 'company'|trans|raw }}</div>
            <div>{{ 'contact.address'|trans|raw }}</div>
        </div>
    </div>
</div>
</body>
</html>