{% trans_default_domain 'admin' %}

<div {{ attributes }} data-poll>

    {% if notifications is empty %}

        <div class="mt-8 text-center">
            <svg class="mx-auto h-80 w-80" viewBox="0 0 1920 1080" aria-hidden="true">
                <path class="text-[#82d6f4]" d="M1211.9 332.5 1782 165l-414.1 226.8z" fill="currentColor"/>
                <path fill="#29abe2" d="m1782 165-414.1 226.8 66.5 141.7z"/>
                <path class="text-[#82d6f4]" d="m1782 165-330.1 256.5 132.7 182.2z" fill="currentColor"/>
                <path fill="#0071bc" d="m1434.4 533.5 17.5-112 38.4 52.7z"/>
                <path stroke="00a99d" stroke-width="10" fill="none" stroke-miterlimit="10"
                      d="M1390.5 557.4s-2.5 2.5-7.2 6.9"/>
                <path d="M1368.3 577.8c-62.6 55.1-247.4 199.7-416.4 156.1-207.5-53.4-166.3-275.2-43.8-274.8S1105.5 673 1039.5 814s-270 243-552.1 171c-229.3-58.5-419-299.7-466.8-364.9"
                      fill="none" stroke="#00a99d" stroke-width="10" stroke-miterlimit="10"
                      stroke-dasharray="20.13 20.13"/>
                <path stroke="00a99d" stroke-width="10" fill="none" stroke-miterlimit="10"
                      d="M14.7 611.9c-3.8-5.3-5.7-8.2-5.7-8.2"/>
            </svg>

            <h3 class="text-base text-[#0071bc] dark:text-sky-400">Der Versand wird gestartet …</h3>
        </div>

    {% else %}

        <div>
            <h4 class="sr-only">Status</h4>
            <div class="mt-6" aria-hidden="true">
                <div class="overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800 flex">
                    {% set notificationsLength = notifications|length %}
                    <div class="h-2 last:rounded-r-full bg-slate-600"
                         style="width: {{ (notifications|filter(n => n.delivered and not n.opened and not (n.bounced or n.dropped) and not n.clicked and not (n.unsubscribed or n.spam))|length / notificationsLength)*100 }}%"></div>
                    <div class="h-2 last:rounded-r-full bg-sky-600"
                         style="width: {{ (notifications|filter(n => n.opened and not (n.bounced or n.dropped) and not n.clicked and not (n.unsubscribed or n.spam))|length / notificationsLength)*100 }}%"></div>
                    <div class="h-2 last:rounded-r-full bg-red-600"
                         style="width: {{ (notifications|filter(n => n.bounced or n.dropped)|length / notificationsLength)*100 }}%"></div>
                    <div class="h-2 last:rounded-r-full bg-teal-600"
                         style="width: {{ (notifications|filter(n => n.clicked and not (n.unsubscribed or n.spam))|length / notificationsLength)*100 }}%"></div>
                    <div class="h-2 last:rounded-r-full bg-orange-600"
                         style="width: {{ (notifications|filter(n => n.unsubscribed or n.spam)|length / notificationsLength)*100 }}%"></div>
                </div>
            </div>
        </div>

        <div class="divide-y dark:divide-gray-800">

            {% for notification in notifications %}
                <a href="{{ path('admin_outbox', { message: notification.id }) }}" class="block py-4 hover:bg-gray-50 dark:hover:bg-gray-800">
                    <div class="flex items-center justify-between">

                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ notification.to }}</p>
                            <p class="text-gray-500 dark:text-gray-400 text-xs truncate">{{ notification.subject }}</p>
                        </div>

                        <div>
                            <div class="flex items-center space-x-2">
                                {% for engagement in notification.engagements %}
                                    <twig:Admin:Badge :notification="engagement" size="sm" />
                                {% endfor %}
                            </div>
                        </div>

                    </div>
                </a>
            {% endfor %}

        </div>

    {% endif %}

</div>
