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

{% block title %}Groupes OSM-FR{% endblock %}

{% block body %}
    <div class="container mt-4">
        {% include 'admin/_wiki_navigation.html.twig' %}

        <h1>Groupes OSM-FR</h1>
        <p class="lead">Liste des groupes de travail et des groupes locaux d'OpenStreetMap France.</p>

        {% if last_updated %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> Dernière mise à jour : {{ last_updated|date('d/m/Y H:i') }}
            </div>
        {% endif %}

        <!-- Carte uMap des groupes locaux -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h2>
                    <a href="{{ umap_url }}">

                        Carte des groupes locaux
                    </a>
                </h2>
            </div>
            <div class="card-body">
                <div class="ratio ratio-16x9">
                    <iframe src="{{ umap_url }}" frameborder="0"></iframe>
                </div>
                <div class="mt-3">
                    <a href="{{ umap_url }}" target="_blank" class="btn btn-outline-primary">
                        <i class="bi bi-box-arrow-up-right"></i> Voir la carte en plein écran
                    </a>
                </div>
            </div>
        </div>

        <!-- Groupes de travail -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h2>Groupes de travail</h2>
            </div>
            <div class="card-body">
                {% if working_groups|length > 0 %}
                    <div class="accordion" id="workingGroupsAccordion">
                        {% for category, groups in working_groups %}
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="heading{{ loop.index }}">
                                    <button class="accordion-button {% if not loop.first %}collapsed{% endif %}"
                                            type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ loop.index }}"
                                            aria-expanded="{{ loop.first ? 'true' : 'false' }}"
                                            aria-controls="collapse{{ loop.index }}">
                                        {{ category }} ({{ groups|length }})
                                    </button>
                                </h2>
                                <div id="collapse{{ loop.index }}"
                                     class="accordion-collapse collapse {% if loop.first %}show{% endif %}"
                                     aria-labelledby="heading{{ loop.index }}" data-bs-parent="#workingGroupsAccordion">
                                    <div class="accordion-body">
                                        <div class="list-group">
                                            {% for group in groups %}
                                                <a href="{{ group.url }}" target="_blank"
                                                   class="list-group-item list-group-item-action">
                                                    <div class="d-flex w-100 justify-content-between">
                                                        <h5 class="mb-1">{{ group.name }}</h5>
                                                    </div>
                                                    {% if group.description %}
                                                        <p class="mb-1">{{ group.description }}</p>
                                                    {% endif %}
                                                    <small class="text-muted">
                                                        <i class="bi bi-box-arrow-up-right"></i> Voir sur le wiki
                                                    </small>
                                                </a>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        <p><i class="bi bi-info-circle"></i> Aucun groupe de travail n'a été trouvé.</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Groupes locaux -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h2>Groupes locaux</h2>
            </div>
            <div class="card-body">
                {% if local_groups|length > 0 %}
                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                        {% for group in local_groups %}
                            <div class="col">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ group.name }}</h5>
                                        {% if group.description %}
                                            <p class="card-text">{{ group.description }}</p>
                                        {% endif %}
                                    </div>
                                    <div class="card-footer">
                                        <a href="{{ group.url }}" target="_blank"
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-box-arrow-up-right"></i> Voir sur le wiki
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        <p><i class="bi bi-info-circle"></i> Aucun groupe local n'a été trouvé.</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header">
                <h2>À propos des groupes OSM-FR</h2>
            </div>
            <div class="card-body">
                <h5>Groupes de travail</h5>
                <p>Les groupes de travail sont des équipes thématiques qui se concentrent sur des aspects spécifiques
                    d'OpenStreetMap en France. Ils permettent de coordonner les efforts sur des sujets particuliers
                    comme l'import de données, la cartographie des transports, etc.</p>

                <h5>Groupes locaux</h5>
                <p>Les groupes locaux sont des communautés géographiques de contributeurs OpenStreetMap. Ils organisent
                    des rencontres, des ateliers de cartographie et d'autres événements pour promouvoir OSM dans leur
                    région.</p>

                <div class="d-grid gap-2 col-md-6 mx-auto mt-3">
                    <a href="https://wiki.openstreetmap.org/wiki/France/OSM-FR/Groupes_de_travail" target="_blank"
                       class="btn btn-outline-success">
                        <i class="bi bi-box-arrow-up-right"></i> Voir tous les groupes de travail sur le wiki
                    </a>
                    <a href="https://wiki.openstreetmap.org/wiki/France/OSM-FR#Groupes_locaux" target="_blank"
                       class="btn btn-outline-info">
                        <i class="bi bi-box-arrow-up-right"></i> Voir tous les groupes locaux sur le wiki
                    </a>
                </div>
            </div>
        </div>

        <div class="mt-3">
            <a href="{{ path('app_admin_wiki') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Retour à la liste des pages wiki
            </a>
        </div>
    </div>
{% endblock %}