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

{% block title %}Membre{% endblock %}

{% block body %}
    {{ include("Admin/partials/title.html.twig", {'name':'Membre'} ) }}

    <div class="container mt-5">
        <div class="card mb-4">
            <div class="card-header">
                <h4>Détails du Membre</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>ID:</strong> {{ membre.id }}</p>
                        <p><strong>Province:</strong> {{ membre.province }}</p>
                        <p><strong>Région:</strong> {{ membre.region }}</p>
                        <p><strong>District:</strong> {{ membre.district }}</p>
                        <p><strong>Commune:</strong> {{ membre.commune }}</p>
                        <p><strong>Fokontany:</strong> {{ membre.fokontany }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Nom:</strong> {{ membre.nomcomplet }}</p>
                        <p><strong>Sexe:</strong> {{ membre.sexe }}</p>
                        <p><strong>Âge:</strong> {{ membre.age }}</p>
                        <p><strong>CIN:</strong> {{ membre.cin }}</p>
                        <p><strong>Téléphone:</strong> {{ membre.tel }}</p>
                        <p><strong>Nom Mobile Money:</strong> {{ membre.nommobilemoney }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>PSH:</strong> {{ membre.psh }}</p>
                        <p><strong>Email:</strong> {{ membre.email }}</p>
                        <p><strong>Facebook:</strong> {{ membre.fb }}</p>
                        <p><strong>Lien Drive:</strong> {{ membre.liendrive }}</p>
                        <p><strong>Fonction:</strong> 
                                <ul>
                                    {% for fonction in membre.fonctions %}
                                        <li>{{ fonction.label }}</li>
                                    {% else %}
                                        <li>Aucune fonction attribuée</li>
                                    {% endfor %}
                                </ul>           
                       </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h4>Images du Membre</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for image in membre.images %}
                        <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
                            <a data-fancybox="gallery" href="{{ asset('uploads/fichier/' ~ image.nom) }}">
                                <img src="{{ asset('uploads/fichier/' ~ image.nom) }}" class="img-fluid" alt="{{ image.nom }}">
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}