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

{% block head %}
    {{ parent() }}
    <style>
        .wa-btn { background: #25d366; border-color: #25d366; color: #fff; font-weight: 600; }
        .wa-btn:hover, .wa-btn:focus { background: #1da851; border-color: #1da851; color: #fff; }
        .wa-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .wa-ligne + .wa-ligne { border-top: 1px solid #dee2e6; }
    </style>
{% endblock %}

{% block header %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h1 class="h3 mb-2"><i class="fab fa-whatsapp me-2 text-success"></i>Groupes WhatsApp du club</h1>
                <p class="text-muted mb-4">Rejoignez les groupes pour suivre les infos de dernière minute, les séances et la vie du club.</p>

                {% if lienMaSection is null and lienCommunaute is null and autresSections is empty %}
                    <div class="alert alert-info">Aucun groupe WhatsApp n'est disponible pour le moment.</div>
                {% endif %}

                {% if lienMaSection %}
                    <div class="card shadow mb-4">
                        <div class="card-header bg-eolia text-white py-3">
                            <h2 class="h5 mb-0"><i class="fas fa-star me-2"></i>Ma section</h2>
                        </div>
                        <div class="card-body wa-ligne">
                            <span class="fw-bold">{{ maSection.nom }}</span>
                            <a href="{{ lienMaSection }}" class="btn wa-btn" target="_blank" rel="noopener noreferrer">
                                <i class="fab fa-whatsapp me-2"></i>Rejoindre
                            </a>
                        </div>
                    </div>
                {% endif %}

                {% if lienCommunaute %}
                    <div class="card shadow mb-4">
                        <div class="card-header bg-eolia text-white py-3">
                            <h2 class="h5 mb-0"><i class="fas fa-users me-2"></i>Tous les groupes</h2>
                        </div>
                        <div class="card-body wa-ligne">
                            <span><i class="fab fa-whatsapp me-2 text-success"></i>Rejoindre la communauté Eolia, qui donne accès à l'ensemble des groupes du club.</span>
                            <a href="{{ lienCommunaute }}" class="btn wa-btn" target="_blank" rel="noopener noreferrer">
                                <i class="fab fa-whatsapp me-2"></i>Rejoindre la communauté
                            </a>
                        </div>
                    </div>
                {% endif %}

                {% if autresSections is not empty %}
                    <div class="card shadow">
                        <div class="card-header bg-eolia text-white py-3">
                            <h2 class="h5 mb-0"><i class="fas fa-layer-group me-2"></i>{{ lienMaSection ? 'Autres groupes' : 'Groupes par section' }}</h2>
                        </div>
                        <div class="card-body py-0">
                            {% for sport in autresSections %}
                                <div class="wa-ligne py-3">
                                    <span>{{ sport.nom }}</span>
                                    <a href="{{ sport.lienWhatsapp }}" class="btn btn-sm btn-outline-success" target="_blank" rel="noopener noreferrer">
                                        <i class="fab fa-whatsapp me-1"></i>Rejoindre
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block footer %}
    {{ parent() }}
{% endblock %}