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

{% block title %}Kontakt{% endblock %}

{% macro contact(contact) %}
    <div class="flex flex-col items-center space-y-2 px-8 py-4 w-48 md:w-64">
        {% if contact.photo %}
            <div class="relative group">
                <img src="{{ asset(contact.photo.filename | imagine_filter('contact')) }}"
                     class="w-40 md:w-48 h-auto border-2 border-primary rounded-full"
                     alt="{{ contact.name }}">
                <div class="absolute top-0 left-0 inset-0 rounded-full flex flex-col items-center justify-center space-y-2 bg-primary/80 text-white invisible group-hover:visible">
                    {% if contact.email %}
                        <a href="mailto:{{ contact.email }}" title="E-Mail">
                            {{ icon('mail', 'w-8 h-8') }}
                        </a>
                    {% endif %}
                    {% if contact.phone %}
                        <a href="tel:{{ contact.phone }}" title="Telefon">
                            {{ icon('phone', 'w-8 h-8') }}
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endif %}
        <div class="text-center">
            <span class="font-bold">{{ contact.name }}</span>
            {% if contact.category %}<br>{{ ('label.contact.category.' ~ contact.category) | trans }}{% endif %}
            {% if contact.destination %}<br>{{ contact.destination }}{% endif %}
        </div>
    </div>
{% endmacro %}

{% block content %}
    <div class="max-w-screen-md mx-auto">
        <h1 class="text-2xl font-bold pb-8">
            Kontakt
        </h1>
        <p class="pb-4">
            Hast du allgemeine Fragen zum Team-Sein bei E&amp;P Reisen, zur Benutzung von MyE&amp;P Team, zur Abrechnung
            oder Ähnlichem?  Dann schau mal in den FAQs nach, ob deine Frage dort beantwortet wird.
        </p>
        <p class="pb-4">
            Ansonsten melde dich gerne beim Team Personalplanung!
        </p>
        <div class="pb-8">
            <div class="flex justify-center flex-wrap items-start">
                {% for contact in contacts.hr %}
                    {{ _self.contact(contact) }}
                {% endfor %}
            </div>
        </div>
        <p class="pb-4">
            Hast du Fragen zu deinem nächsten Einsatz in einer konkreten Destination? Dann melde dich gerne bei den
            zuständigen Büromitarbeitenden oder Hausleitungen.
        </p>
        <div class="pb-4">
            <div class="flex justify-center flex-wrap items-start">
                {% for contact in contacts.management %}
                    {{ _self.contact(contact) }}
                {% endfor %}
            </div>
        </div>
        <div class="pb-8">
            <div class="flex justify-center flex-wrap items-start">
                {% for contact in contacts.house_management %}
                    {{ _self.contact(contact) }}
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}