{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container py-4">
    <a href="{% url 'assets:artworks_index' %}" class="btn btn-link ps-0 mb-3">
        <i class="bi bi-arrow-left"></i> {% translate "Retour à la vue Artworks" %}
    </a>

    <div class="card shadow-sm">
        <div class="card-body">
            <h2 class="h4 mb-3">{{ street.code }} - {{ street.get_name }}</h2>
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="text-muted small">{% translate "Commune" %}</div>
                    <div>{{ street.municipality|default:"—" }}</div>
                </div>
                <div class="col-md-3">
                    <div class="text-muted small">{% translate "Code voirie" %}</div>
                    <div>{{ street.road_code|default:"—" }}</div>
                </div>
                <div class="col-md-3">
                    <div class="text-muted small">{% translate "Section" %}</div>
                    <div>{{ street.section_code|default:"—" }}</div>
                </div>
                <div class="col-md-3">
                    <div class="text-muted small">{% translate "Niveau" %}</div>
                    <div>{{ street.street_level|default:"—" }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4 g-4">
        <div class="col-md-6">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="h5 mb-0">{% translate "Monuments" %}</h3>
                    <span class="badge bg-primary">{{ monuments_count }}</span>
                </div>
                <div class="card-body">
                    {% if monuments_count %}
                        <ul class="list-group list-group-flush">
                            {% for monument in monuments %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="fw-semibold">{{ monument.code }}</div>
                                        <div class="text-muted small">{{ monument.get_name }}</div>
                                    </div>
                                    <a href="{% url 'assets:artworks_monuments_detail' monument.id %}" class="btn btn-sm btn-outline-secondary">
                                        {% translate "Détail" %}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-muted mb-0">{% translate "Aucun monument actif n'est lié à cette localisation." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="h5 mb-0">{% translate "Fontaines" %}</h3>
                    <span class="badge bg-primary">{{ fountains_count }}</span>
                </div>
                <div class="card-body">
                    {% if fountains_count %}
                        <ul class="list-group list-group-flush">
                            {% for fountain in fountains %}
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="fw-semibold">{{ fountain.code }}</div>
                                        <div class="text-muted small">{{ fountain.get_name }}</div>
                                    </div>
                                    <a href="{% url 'assets:artworks_fountains_detail' fountain.id %}" class="btn btn-sm btn-outline-secondary">
                                        {% translate "Détail" %}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-muted mb-0">{% translate "Aucune fontaine active n'est liée à cette localisation." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}