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

{% block title %}Historique ZonePlaces - {{ stats.name }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('css/city-sidebar.css') }}' rel='stylesheet'/>
{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar de navigation -->
            <div class="col-12">
                {% include 'admin/_city_sidebar.html.twig' with {'stats': stats, 'active_menu': 'zone_places_history'} %}
            </div>

            <!-- Contenu principal -->
            <div class="col-md-9 col-lg-10 main-content">
                <div class="p-4">
                    <h1>Historique ZonePlaces - {{ stats.name }} ({{ stats.zone }})</h1>
                    <p class="text-muted">Historique combiné des suppressions et créations d'objets OSM par thème, groupé par date.</p>

                    {% if changesByDate is empty %}
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i> Aucun changement enregistré pour cette ville.
                        </div>
                    {% else %}
                        {% for date, changes in changesByDate %}
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h3><i class="bi bi-calendar"></i> {{ date|date('d/m/Y') }}</h3>
                                </div>
                                <div class="card-body">
                                    {# Suppressions #}
                                    {% if changes.deletions is not empty %}
                                        <div class="mb-4">
                                            <h4 class="text-danger"><i class="bi bi-trash"></i> Suppressions</h4>
                                            {% for theme, objects in changes.deletions %}
                                                {% set themeLabel = followup_labels[theme]|default(theme|capitalize) %}
                                                {% set themeIcon = followup_icons[theme]|default('bi-question-circle') %}
                                                <div class="mb-3">
                                                    <h5><i class="bi {{ themeIcon }}"></i> {{ themeLabel }} ({{ objects|length }} suppression{{ objects|length > 1 ? 's' : '' }})</h5>
                                                    <div class="table-responsive">
                                                        <table class="table table-sm table-hover">
                                                            <thead>
                                                                <tr>
                                                                    <th>Thème</th>
                                                                    <th>Type</th>
                                                                    <th>ID</th>
                                                                    <th>Contributeur</th>
                                                                    <th>Dernière modification</th>
                                                                    <th>Changeset</th>
                                                                    <th>Date suppression</th>
                                                                    <th>Actions</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for obj in objects %}
                                                                <tr>
                                                                    <td><span class="badge bg-info">{{ themeLabel }}</span></td>
                                                                    <td><span class="badge bg-secondary">{{ obj.type|upper }}</span></td>
                                                                    <td><code>{{ obj.id }}</code></td>
                                                                    <td>
                                                                        {% if obj.user %}
                                                                            <a href="https://www.openstreetmap.org/user/{{ obj.user|url_encode }}" target="_blank">
                                                                                {{ obj.user }}
                                                                                <i class="bi bi-box-arrow-up-right"></i>
                                                                            </a>
                                                                        {% else %}
                                                                            <span class="text-muted">Inconnu</span>
                                                                        {% endif %}
                                                                    </td>
                                                                    <td>
                                                                        {% if obj.timestamp %}
                                                                            {{ obj.timestamp }}
                                                                        {% else %}
                                                                            <span class="text-muted">N/A</span>
                                                                        {% endif %}
                                                                    </td>
                                                                    <td>
                                                                        {% if obj.changeset %}
                                                                            <a href="https://overpass-api.de/achavi/?changeset={{ obj.changeset }}" target="_blank">
                                                                                <code>{{ obj.changeset }}</code>
                                                                                <i class="bi bi-box-arrow-up-right"></i>
                                                                            </a>
                                                                        {% else %}
                                                                            <span class="text-muted">N/A</span>
                                                                        {% endif %}
                                                                    </td>
                                                                    <td><span class="text-danger">{{ obj.noticed_deleted_date }}</span></td>
                                                                    <td>
                                                                        <div class="btn-group btn-group-sm" role="group">
                                                                            {% set josm_type = obj.type == 'node' ? 'n' : (obj.type == 'way' ? 'w' : 'r') %}
                                                                            <a href="http://127.0.0.1:8111/load_object?objects={{ josm_type }}{{ obj.id }}" 
                                                                               class="btn btn-primary btn-sm" 
                                                                               title="Ouvrir dans JOSM"
                                                                               target="_blank">
                                                                                <i class="bi bi-tools"></i> JOSM
                                                                            </a>
                                                                            <a href="https://osmlab.github.io/osm-deep-history/#/{{ obj.type }}/{{ obj.id }}" 
                                                                               class="btn btn-info btn-sm" 
                                                                               title="Voir l'historique dans OSM Deep History"
                                                                               target="_blank">
                                                                                <i class="bi bi-clock-history"></i> Historique
                                                                            </a>
                                                                            <a href="https://www.openstreetmap.org/{{ obj.type }}/{{ obj.id }}" 
                                                                               class="btn btn-secondary btn-sm" 
                                                                               title="Voir sur OSM"
                                                                               target="_blank">
                                                                                <i class="bi bi-geo-alt"></i> OSM
                                                                            </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% endif %}

                                    {# Créations #}
                                    {% if changes.creations is not empty %}
                                        <div>
                                            <h4 class="text-success"><i class="bi bi-plus-circle"></i> Créations/Modifications</h4>
                                            {% for theme, objects in changes.creations %}
                                                {% set themeLabel = followup_labels[theme]|default(theme|capitalize) %}
                                                {% set themeIcon = followup_icons[theme]|default('bi-question-circle') %}
                                                <div class="mb-3">
                                                    <h5><i class="bi {{ themeIcon }}"></i> {{ themeLabel }} ({{ objects|length }} objet{{ objects|length > 1 ? 's' : '' }})</h5>
                                                    <div class="table-responsive">
                                                        <table class="table table-sm table-hover">
                                                            <thead>
                                                                <tr>
                                                                    <th>Thème</th>
                                                                    <th>Type</th>
                                                                    <th>ID</th>
                                                                    <th>Contributeur</th>
                                                                    <th>Date modification</th>
                                                                    <th>Changeset</th>
                                                                    <th>Actions</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                {% for obj in objects %}
                                                                <tr>
                                                                    <td><span class="badge bg-info">{{ theme }}</span></td>
                                                                    <td><span class="badge bg-success">{{ obj.type|upper }}</span></td>
                                                                    <td><code>{{ obj.id }}</code></td>
                                                                    <td>
                                                                        {% if obj.user %}
                                                                            <a href="https://www.openstreetmap.org/user/{{ obj.user|url_encode }}" target="_blank">
                                                                                {{ obj.user }}
                                                                                <i class="bi bi-box-arrow-up-right"></i>
                                                                            </a>
                                                                        {% else %}
                                                                            <span class="text-muted">Inconnu</span>
                                                                        {% endif %}
                                                                    </td>
                                                                    <td>
                                                                        {% if obj.timestamp %}
                                                                            {{ obj.timestamp }}
                                                                        {% else %}
                                                                            <span class="text-muted">N/A</span>
                                                                        {% endif %}
                                                                    </td>
                                                                    <td>
                                                                        {% if obj.changeset %}
                                                                            <a href="https://overpass-api.de/achavi/?changeset={{ obj.changeset }}" target="_blank">
                                                                                <code>{{ obj.changeset }}</code>
                                                                                <i class="bi bi-box-arrow-up-right"></i>
                                                                            </a>
                                                                        {% else %}
                                                                            <span class="text-muted">N/A</span>
                                                                        {% endif %}
                                                                    </td>
                                                                    <td>
                                                                        <div class="btn-group btn-group-sm" role="group">
                                                                            {% set josm_type = obj.type == 'node' ? 'n' : (obj.type == 'way' ? 'w' : 'r') %}
                                                                            <a href="http://127.0.0.1:8111/load_object?objects={{ josm_type }}{{ obj.id }}" 
                                                                               class="btn btn-primary btn-sm" 
                                                                               title="Ouvrir dans JOSM"
                                                                               target="_blank">
                                                                                <i class="bi bi-tools"></i> JOSM
                                                                            </a>
                                                                            <a href="https://osmlab.github.io/osm-deep-history/#/{{ obj.type }}/{{ obj.id }}" 
                                                                               class="btn btn-info btn-sm" 
                                                                               title="Voir l'historique dans OSM Deep History"
                                                                               target="_blank">
                                                                                <i class="bi bi-clock-history"></i> Historique
                                                                            </a>
                                                                            <a href="https://www.openstreetmap.org/{{ obj.type }}/{{ obj.id }}" 
                                                                               class="btn btn-secondary btn-sm" 
                                                                               title="Voir sur OSM"
                                                                               target="_blank">
                                                                                <i class="bi bi-geo-alt"></i> OSM
                                                                            </a>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}