{% extends 'htmx_modal.html.twig' %}

{% block title %}Teamer:inneninfo {{ teamer }}{% endblock %}

{% block content %}
    <div class="flex items-start">
        <div class="flex-1 pr-8">
            {% include '_partials/_teamer_training_info.html.twig' %}
            {% include '_partials/_teamer_license_info.html.twig' %}
            <h2 class="text-lg font-bold">
                Zustiege
            </h2>
            <ul class="pb-8 divide-y divide-gray-200">
            {% for pickup in teamer.pickups %}
                <li class="py-2">
                    {{ pickup|bpn_pickup_label }}
                </li>
            {% endfor %}
            </ul>
            <h2 class="text-lg font-bold">
                Letzte Einsätze
            </h2>
            <ul class="pb-4 divide-y divide-gray-200">
            {% for disposition in recentDispositions %}
                {% set destination = disposition.assignment.destination %}
                <li class="py-1">
                    {{ destination.product }}
                    <br>
                    {{ destination.dateFrom|date('d.m.y') }} - {{ destination.dateTo|date('d.m.y') }}
                </li>
            {% else %}
                <li class="py-2">
                    -
                </li>
            {% endfor %}
            </ul>
        </div>
        <div class="flex flex-col space-y-4">
            {% if teamer.photo %}
                <img src="{{ asset(teamer.photo.filename | imagine_filter('profile')) }}"
                     class="w-32 h-auto border-2 border-primary"
                     alt="{{ teamer.firstName }}">
            {% else %}
                <div class="border-2 border-primary">
                    {{ icon('user', 'w-32 h-32 text-gray-200') }}
                </div>
            {% endif %}
            {% include '_partials/_rating_stars.html.twig' with { 'teamer': teamer } %}
            <ul class="pb-8 divide-y divide-gray-200">
                {% if teamer.communication.phone %}
                    <li class="py-2">
                        <a href="tel:{{ teamer.communication.phone }}" class="flex items-center space-x-2 hover:text-primary">
                            {{ icon('phone', 'w-4 h-4') }}
                            <span class="flex-shrink-0">{{ teamer.communication.phone }}</span>
                        </a>
                    </li>
                {% endif %}
                <li class="py-2">
                    <a href="tel:{{ teamer.communication.mobile }}" class="flex items-center space-x-2 hover:text-primary">
                        {{ icon('mobile', 'w-4 h-4') }}
                        <span class="flex-shrink-0">{{ teamer.communication.mobile }}</span>
                    </a>
                </li>
                <li class="py-2">
                    <a href="mailto:{{ teamer.communication.email }}" class="flex items-center space-x-2 hover:text-primary">
                        {{ icon('at', 'w-4 h-4') }}
                        <span class="flex-shrink-0">{{ teamer.communication.email }}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}