{% extends 'base.html.twig' %}
{% block title %}Imágenes — Parcela {{ parcela.numero }} – Panel propietario{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body %}

<header class="page-header">
    <div class="container">
        <nav aria-label="breadcrumb"><ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_propietario_panel') }}">Panel</a></li>
            <li class="breadcrumb-item"><a href="{{ path('app_propietario_parcelas') }}">Parcelas</a></li>
            <li class="breadcrumb-item active">Imágenes · Parcela {{ parcela.numero }}</li>
        </ol></nav>
        <h1><i class="bi bi-images me-2" style="opacity:.8"></i>Galería — Parcela {{ parcela.numero }}</h1>
    </div>
</header>

<div class="container" style="padding-top:1.5rem; padding-bottom:4rem;">

    {# Subir nueva imagen #}
    <div class="content-card p-4 p-md-5 mb-4">
        <div class="section-header-sm mb-1">Subir nueva imagen</div>
        <p class="text-muted small mb-4">Formatos admitidos: JPG, PNG, WebP. Tamaño máximo: 5 MB.</p>

        {{ form_start(form, {attr: {enctype: 'multipart/form-data'}}) }}
        <div class="row align-items-end g-3">
            <div class="col-md-8">
                {{ form_row(form.archivo) }}
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn-primary-green w-100" style="border-radius:50px; padding:.65rem">
                    <i class="bi bi-upload me-1"></i>Subir imagen
                </button>
            </div>
        </div>
        {{ form_end(form) }}
    </div>

    {# Galería actual #}
    {% set imagenes = parcela.imagenes %}

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 style="font-size:1rem; font-weight:800; color:#1a3528; margin:0">
            Imágenes actuales
            {% if imagenes|length > 0 %}
            <span style="background:#e8f5e9; color:#1b5e36; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:50px; margin-left:.4rem">{{ imagenes|length }}</span>
            {% endif %}
        </h2>
    </div>

    {% if imagenes is empty %}
    <div class="content-card p-4" style="background:#f0faf4; border:1px solid #c8e6d0">
        <div style="font-size:.9rem; color:#1b5e36">
            <i class="bi bi-info-circle-fill me-2"></i>Esta parcela aún no tiene imágenes. Sube la primera usando el formulario de arriba.
        </div>
    </div>
    {% else %}
    <div class="row g-3">
        {% for img in imagenes %}
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="content-card p-0 overflow-hidden h-100">
                <img src="{{ asset('uploads/parcelas/' ~ img.nombreArchivo) }}"
                     style="width:100%; height:160px; object-fit:cover; display:block"
                     alt="Imagen parcela {{ parcela.numero }}">
                <div class="p-2 d-flex justify-content-between align-items-center" style="background:#f8fdf9">
                    <span style="font-size:.75rem; color:#6c8c78; font-weight:600">#{{ img.orden + 1 }}</span>
                    <form method="post"
                          action="{{ path('app_propietario_imagen_eliminar', {id: img.id}) }}"
                          onsubmit="return confirm('¿Eliminar esta imagen?')">
                        <input type="hidden" name="_token"
                               value="{{ csrf_token('eliminarImg' ~ img.id) }}">
                        <button type="submit"
                                class="btn btn-sm btn-outline-danger"
                                style="border-radius:6px; font-size:.78rem">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

</div>
{% endblock %}