<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com/3.2.6"></script>
</head>
<body class="max-w-screen-lg mx-auto">
{% set liipImageCache = null %}
{% if contact.image is not null %}
    {% set liipImageCache = absolute_url(asset(contact.image.path)|image_path) %}
{% endif %}
{% for gift in gifts %}
    <div class="w-[210mm] h-[297mm]">
        <header class="relative mb-24">
            <div class="h-40 bg-gray-200"></div>
            {% if liipImageCache %}
                <div class="absolute flex w-40 h-40 -bottom-20 left-1/2 -translate-x-1/2 bg-white border border-gray-600 p-4">
                    <img class="object-contain" src="{{ liipImageCache }}">
                </div>
            {% endif %}
        </header>
        <main class="max-w-screen-md mx-auto p-4 sm:p-6">
            <div class="text-center">
                <h1 class="text-3xl font-semibold mt-2">{{ gift.cartItem.variant.product.fullName }}</h1>
                <div class="text-lg mt-6">Valeur : {{ gift.cartItem.price/100 }} €</div>
                <p class="text-center mt-6">Attention ! Cette carte cadeau n'est valable qu'une seule fois.</p>
            </div>
            <div class="mt-10">
                <div>Pour l'utiliser :</div>
                <ul class="text-center">
                    <li class="text-lg mt-4">
                        <div>Chez le vigneron en présentant le QR code suivant :</div>
                        {% set path =  url('gift_check', {id : gift.id}) %}
                        <img class="w-28 object-cover mt-4 mx-auto" src="{{ qr_code_data_uri(path,'gift') }}">
                        <div class="flex border border-black rounded-full w-fit mt-10 mx-auto px-3 py-2">ou</div>
                    </li>
                    <li class="text-lg mt-10">
                        <div>Sur la boutique en ligne en utilisant le code avantage :</div>
                        <div class="w-fit text-lg text-white font-semibold uppercase tracking-widest bg-gray-800 mt-4 px-4 py-2 mx-auto">
                            {{ gift.token }}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="text-sm text-center mt-10">Valable jusqu'au {{ gift.validUntilDate|format_date(locale=app.request.locale) }}</div>
            <div class="text-sm text-center mt-10">Carte cadeau valable 1 seule fois.</div>
        </main>
    </div>
    <div class="break-after-page"></div>
{% endfor %}
</body>
</html>
