{% if 'contacts' in components %}
<section id="{{ nature }}-informations-contacts" class="section">
    <h3 class="titre">
        Contacts

        {% if contacts %}
        <span class="badge outlined">{{ contacts|length }}</span>
        {% endif %}
    </h3>
    {% if contacts %}
    <div class="container">
        {% for contact in contacts %}
        <article id="{{ nature }}-informations-contact-{{ contact.autorisation }}" class="contact">
            <div class="article-titre-bottomless">
                <h4>{{ contact.titre }} {{ contact.prenom }} {{ contact.marital }} {{ contact.nom }}</h4>
                <span class="badge outlined">
                    {% if contact.nature == "ayantdroit" %}
                        Ayant-droit
                    {% else %}
                        {{ contact.nature|capitalize }}
                    {% endif %}
                </span>
            </div>
            <div class="article-container no-labels">
                {% if contact.telephone1 %}
                <p>
                    <i class="ri-phone-line"></i>
                    {{ contact.telephone1 }}
                </p>
                {% endif %}
                {% if contact.telephone2 %}
                <p>
                    <i class="ri-phone-line"></i>
                    {{ contact.telephone2 }}
                </p>
                {% endif %}
                {% if contact.telephone1 is empty and contact.telephone2 is empty %}
                <p class="placeholder">
                    <i class="ri-phone-line"></i>
                    Aucun n⁰ de tél.
                </p>
                {% endif %}
                {% if contact.courriel %}
                <p>
                    <i class="ri-mail-line"></i>
                    {{ contact.courriel }}
                </p>
                {% else %}
                <p class="placeholder">
                    <i class="ri-mail-line"></i>
                    Aucun courriel
                </p>
                {% endif %}
            </div>
            {#             
            ## WIP : Dans le futur, peut-être faire un lien redirigeant vers la fiche contact 
            ## si un besoin utilisateur est identifié

            <div class="article-footer">
                <a href="" class="operation-link">
                    <i class="ri-arrow-right-s-line"></i>
                    Consulter
                </a>
            </div> #}
        </article>
        {% endfor %}

    </div>
    {% else %}
    <div class="container empty_bloc">
        <div class="bloc-placeholder">
            <i class="ri-user-unfollow-line"></i>
            <p>Aucun contact</p>
        </div>
    </div>
    {% endif %}

</section>
{% endif %}