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

{% block title %}Einsatzübersicht{% endblock %}

{% block content %}
    <div class="flex items-start justify-between pb-4">
        <h1 class="text-2xl font-bold">
            Einsatz&shy;übersicht
        </h1>
        <div class="flex flex-col items-end space-y-2 md:flex-row md:items-center md:space-x-2 md:space-y-0">
            <button type="button"
                    class="{{ html_classes('btn btn--small', { 'btn--secondary': filterDto.active }) }}"
                    hx-get="{{ path('app_common_assignment_filter', { 'r': return_url() }) }}"
                    hx-target="body"
                    hx-swap="beforeend">
                {{ icon('filter', 'w-4 h-4 shrink-0') }}
                {% if filterDto.active %}
                    <span class="whitespace-nowrap">{{ filterDto.activeFiltersCount }} Filter aktiv</span>
                {% else %}
                    <span>Filter</span>
                {% endif %}
            </button>
            {% if filterDto.active %}
                <a href="{{ path('app_common_assignment_filter_reset', { 'r': return_url() }) }}" class="btn btn--small btn--secondary">
                    Reset
                </a>
            {% endif %}
        </div>
    </div>

    <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4 py-4">
        {% for assignment in pagination %}
            <div class="relative flex flex-col justify-between rounded-md border border-gray-200 bg-gray-100 p-4">
                <div class="flex flex-col space-y-2 pb-2">
                    <div class="flex items-start space-x-2">
                        {{ icon('flag-' ~ assignment.destination.country, 'w-5 h-5 shrink-0') }}
                        <span class="flex-1 font-bold">{{ assignment.destination.product }}</span>
                    </div>
                    <div class="flex items-start space-x-2">
                        {{ icon('calendar', 'w-5 h-5 shrink-0') }}
                        <span class="flex-1">{{ assignment.destination.dateFrom|date('d.m.Y') }} - {{ assignment.destination.dateTo|date('d.m.Y') }}</span>
                    </div>
                    <div class="flex items-start space-x-2">
                        {{ icon('profile', 'w-5 h-5 shrink-0') }}
                        <span class="flex-1">{{ assignment.jobProfile.name }}</span>
                    </div>
                    <div class="flex items-start space-x-2">
                        {{ icon('house', 'w-5 h-5 shrink-0') }}
                        <span class="flex-1">{{ assignment.destination.hotel }}</span>
                    </div>
                    {% if assignment.pickup %}
                        {% set pickup = assignment.destination.pickup(assignment.pickup) %}
                        <div class="flex items-start space-x-2">
                            {{ icon('bus', 'w-5 h-5 shrink-0') }}
                            <span>{{ pickup.city }}, {{ pickup.time }} Uhr</span>
                        </div>
                    {% endif %}
                </div>
                <div>
                    {% set application = assignment.applications.first %}
                    {% set disposition = assignment.activeDispositionByTeamer(teamer) %}
                    {% if application %}
                        {% if application.status == constant('App\\Entity\\Application::STATUS_REJECTED') %}
                            <a href="{{ path('app_teamer_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
                               class="btn btn--small flex items-center space-x-2 bg-gray-100 text-gray-800 hover:bg-gray-50">
                                {{ icon('close', 'w-4 h-4 shrink-0') }}
                                <span>Bewerbung abgelehnt</span>
                            </a>
                        {% else %}
                            <a href="{{ path('app_teamer_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
                               class="btn btn--small flex items-center space-x-2 bg-yellow-100 text-yellow-800 hover:bg-yellow-50">
                                {{ icon('hourglass', 'w-4 h-4 shrink-0') }}
                                <span>in Bearbeitung</span>
                            </a>
                        {% endif %}
                    {% elseif disposition %}
                        <a href="{{ path('app_teamer_disposition_detail', { 'uuid': disposition.uuid }) }}"
                           class="btn btn--small flex items-center space-x-2 bg-green-100 text-green-700 hover:bg-green-50">
                            {{ icon('check', 'w-4 h-4 shrink-0') }}
                            <span>eingeteilt</span>
                        </a>
                    {% elseif is_granted('APPLY', assignment) %}
                        <a href="{{ path('app_teamer_assignment_detail', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
                           class="btn btn--small flex items-center space-x-2">
                            {{ icon('info', 'w-4 h-4 shrink-0') }}
                            <span>weitere Infos</span>
                        </a>
                    {% endif %}
                </div>
                {% set isBookmarked = teamer.bookmarks.contains(assignment) %}
                <a href="{{ path('app_teamer_bookmark_toggle', { 'uuid': assignment.uuid, 'r': return_url() }) }}"
                   class="absolute top-0 right-0 mt-2 mr-2"
                   title="{{ isBookmarked ? 'Von der Merkliste löschen' : 'Auf die Merkliste setzen' }}">
                    {{ icon('star', html_classes('w-5 h-5', { 'text-yellow-500': isBookmarked, 'text-gray-200': not isBookmarked } )) }}
                </a>
            </div>
        {% else %}
            Keine Einträge...
        {% endfor %}
    </div>
    {{ knp_pagination_render(pagination, 'paginator/sliding_boxes.html.twig') }}
{% endblock %}