{% extends '@email/_base.html.twig' %}
{% trans_default_domain 'email' %}

{% block template %}
    <table class="email-wrapper w-full bg-gray-postmark-lighter font-sans">
        <tr>
            <td align="center">
                <table class="email-content w-full">


                    <tr>
                        <td class="email-body w-full">
                            <table align="center" class="email-body_inner w-570 bg-white mx-auto sm:w-full">
                                {{ include ('@email/_header.html.twig', ignore_missing = true) }}
                                <tr>
                                    <td class="p-45">
                                        <div class="text-base">
                                            <h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
                                                {{ 'yourAttendancesForFerienpass'|trans }}</h1>
                                            <div class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">{{ content|machine_translate|markdown_to_html }}</div>


                                            {% for p, a in attendances %}
                                                {% set participant = attribute(a|first, 'participant') %}
                                                <table class="w-full py-35">
                                                    <tr>
                                                        <td>
                                                            <h3 class="mt-0 mb-0 text-base text-left text-gray-postmark-darker font-bold">{{ participant.name }}</h3>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2">
                                                            <table class="w-full pt-25">
                                                                {% for attendance in a %}
                                                                    <tr>
                                                                        <td class="border-t border-solid border-b-0 border-l-0 border-r-0 border-gray-200 w-3/5 text-base leading-18 py-10">
                                                                            {{ attendance.offer.name|machine_translate }}<br>
                                                                            {% if attendance.offer.dates is not empty %}
                                                                                <span class=""><twig:Cms:OfferDateSingle :date="attendance.offer.dates|first" /></span>
                                                                            {% endif %}
                                                                            {% if attendance.offer.cancelled %}
                                                                                <p>
                                                                                    <span class="mt-2 rounded bg-red-100 border-l-8 border-r-8 border-t-4 border-b-4 border-solid border-red-100">
                                                                                        <span class="text-sm mt-0 mb-0 leading-5 text-red-700">
                                                                                            {{ 'offerCancelledNotice'|trans }}</span>
                                                                                    </span>
                                                                                </p>
                                                                            {% elseif attendance.offer.requiresAgreementLetter %}
                                                                                <p>
                                                                                    <span class="mt-2 rounded bg-yellow-100 border-l-8 border-r-8 border-t-4 border-b-4 border-solid border-yellow-100">
                                                                                        <span class="text-sm mt-0 mb-0 leading-5 text-yellow-700">
                                                                                            {{ 'pleaseProvideAgreementLetter'|trans }}</span>
                                                                                    </span>
                                                                                </p>
                                                                            {% endif %}
                                                                        </td>
                                                                        <td align="right"
                                                                            class="border-t border-solid border-b-0 border-l-0 border-r-0 border-gray-200 w-2/5 text-base text-right">
                                                                            {% if attendance.offer.cancelled %}
                                                                                <span class="inline-block border-solid border-l-8 border-r-8 border-t-2 border-b-2 border-red-100 rounded-full text-sm font-medium leading-5 bg-red-100 text-red-800">{{ 'offerCancelledStatus'|trans }}</span>
                                                                            {% elseif attendance.withdrawn or attendance.rejected or attendance.unfulfilled %}
                                                                                <span class="inline-block border-solid border-l-8 border-r-8 border-t-2 border-b-2 border-red-100 rounded-full text-sm font-medium leading-5 bg-red-100 text-red-800">{{ "status.#{attendance.status}"|trans }}</span>
                                                                            {% elseif attendance.confirmed %}
                                                                                <span class="inline-block border-solid border-l-8 border-r-8 border-t-2 border-b-2 border-green-100 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800">{{ "status.#{attendance.status}"|trans }}</span>
                                                                            {% else %}
                                                                                <span class="inline-block border-solid border-l-8 border-r-8 border-t-2 border-b-2 border-yellow-100 rounded-full text-sm font-medium leading-5 bg-yellow-100 text-yellow-800">{{ "status.#{attendance.status}"|trans }}</span>
                                                                            {% endif %}
                                                                        </td>
                                                                    </tr>
                                                                {% endfor %}
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            {% endfor %}
                                            {% if action_url %}
                                                <table align="center" class="w-full text-center my-30 mx-auto">
                                                    <tr>
                                                        <td align="center">
                                                            <table class="w-full">
                                                                <tr>
                                                                    <td align="center" class="text-base">
                                                                        <a href="{{ action_url }}"
                                                                           class="button button--blue"
                                                                           target="_blank">{{ 'visitFerienpassWebsite'|trans }}</a>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            {% endif %}
                                            {% if post_content is defined %}
                                                <div class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">{{ post_content|machine_translate|markdown_to_html }}</div>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    {{ include ('@email/_footer.html.twig', ignore_missing = true) }}

                </table>
            </td>
        </tr>
    </table>

{% endblock %}
