{% extends 'teamer/layout.html.twig' %}

{% block title %}Arbeitszeiten{% endblock %}

{% block content %}
    <div class="max-w-screen-md mx-auto">
        <h1 class="text-2xl font-bold pb-2">
            Arbeitszeiten
        </h1>
        <p class="pb-8 text-gray-700">
            Hier findest du für jeden abgerechneten Monat deinen Arbeitszeitnachweis.
            Bitte lade ihn herunter, unterschreibe ihn und lade ihn anschließend wieder hoch.
        </p>

        {% if workMonths is empty %}
            <div class="text-gray-500">
                Es liegen noch keine Arbeitszeiten vor. Ein Monat erscheint hier, sobald er
                abgerechnet wurde.
            </div>
        {% else %}
            <dl class="divide-y divide-gray-100">
                {% for workMonth in workMonths %}
                    <div class="py-6 first:pt-0 sm:grid sm:grid-cols-3 sm:gap-4">
                        <dt class="font-bold leading-6 text-gray-900">
                            {{ workMonth.period|format_datetime(pattern='LLLL yyyy', locale='de') }}
                            <div class="text-sm font-normal text-gray-500">
                                {{ workMonth.totalMinutes|duration_hm }} Stunden
                                an {{ workMonth.workedDays }} Tagen
                            </div>
                        </dt>
                        <dd class="mt-1 text-sm leading-6 sm:mt-0 sm:col-span-2">
                            <div class="pb-2">
                                <span class="upload-status-badge {{ workMonth.status.badgeClass }}">
                                    {{ workMonth.status.label }}
                                </span>
                            </div>

                            {% if workMonth.status.value == 'rejected' and workMonth.reviewComment %}
                                <div class="pb-2 text-red-600">
                                    {{ workMonth.reviewComment }}
                                </div>
                            {% endif %}

                            <div class="flex flex-col space-y-1">
                                <a href="{{ path('app_teamer_work_month_pdf', { 'uuid': workMonth.uuid }) }}"
                                   class="flex items-center space-x-1">
                                    {{ icon('download') }}
                                    <span class="flex-shrink-0">Nachweis herunterladen</span>
                                </a>

                                {% if workMonth.status.value != 'approved' %}
                                    <a href="{{ path('app_teamer_work_month_upload', { 'uuid': workMonth.uuid }) }}"
                                       class="flex items-center space-x-1"
                                       hx-get="{{ path('app_teamer_work_month_upload', { 'uuid': workMonth.uuid }) }}"
                                       hx-target="#htmx-modal"
                                       hx-swap="outerHTML">
                                        {{ icon('upload') }}
                                        <span class="flex-shrink-0">
                                            {{ workMonth.currentDocument ? 'Erneut hochladen' : 'Unterschrieben hochladen' }}
                                        </span>
                                    </a>
                                {% endif %}

                                {% if workMonth.currentDocument %}
                                    <a href="{{ path('app_common_download', { 'uuid': workMonth.currentDocument.uuid }) }}"
                                       class="flex items-center space-x-1 text-gray-500">
                                        {{ icon('document') }}
                                        <span class="flex-shrink-0">
                                            Hochgeladen am {{ workMonth.submittedAt|date('d.m.Y') }}
                                        </span>
                                    </a>
                                {% endif %}
                            </div>
                        </dd>
                    </div>
                {% endfor %}
            </dl>
        {% endif %}
    </div>
{% endblock %}