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

{% block title %}Contacts de la commission {{ department.name }}{% endblock %}

{% block body %}
    <div class="card border-0 mb-3">
        <div class="card-header bg-grey">
            <h1 class="h5 text-white m-0 fw-bold">Contacts de la commission {{ department.name }}</h1>
        </div>
        <div class="card-body bg-white py-3">
            <div class="row">
                <div class="col-12 col-lg-6 col-xl-3 mb-3">
                    <div class="border text-center p-5 bg-primary text-white">
                        {% if department.userInCharge.picture %}
                            <img class="img-fluid img-thumbnail rounded-circle" src="{{ department.userInCharge.base64Picture }}" alt="Photo de {{ department.userInCharge.fullName }}">
                        {% else %}
                            <img class="img-fluid img-thumbnail rounded-circle" src="{{ asset('images/default-user-picture.png') }}" alt="Photo par défaut">
                        {% endif %}
                        <br><br>
                        {{ department.userInCharge.fullName }} <br>
                        <span class="badge bg-white text-black">Responsable de la commission</span>
                        <br><br>
                        <a class="text-white" href="{{ path('organisation_collaborator', {'user': department.userInCharge.id}) }}">Voir la fiche</a>
                    </div>
                </div>
                {% if not department.members.empty %}
                    {% for user in department.members %}
                    <div class="col-12 col-lg-6 col-xl-3 mb-3">
                        <div class="border text-center p-5">
                            {% if user.picture %}
                                <img class="img-fluid img-thumbnail rounded-circle" src="{{ user.base64Picture }}" alt="Photo de {{ user.fullName }}">
                            {% else %}
                                <img class="img-fluid img-thumbnail rounded-circle" src="{{ asset('images/default-user-picture.png') }}" alt="Photo par défaut">
                            {% endif %}
                            <br><br>
                            {{ user.fullName }} <br>
                            {% if department in user.departmentsInChargeOf %}
                                <span class="badge bg-dark-blue">Responsable de la commission</span>
                                <br><br>
                            {% else %}
                                <br>
                            {% endif %}
                            <a href="{{ path('organisation_collaborator', {'user': user.id}) }}">Voir la fiche</a>
                        </div>
                    </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}