{% extends 'base.html.twig' %}
{% block title %}{{ parcela ? 'Editar parcela ' ~ parcela.numero : 'Nueva parcela' }} – 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">{{ parcela ? 'Editar nº ' ~ parcela.numero : 'Nueva parcela' }}</li>
        </ol></nav>
        <h1>{{ parcela ? 'Editar parcela ' ~ parcela.numero : 'Nueva parcela' }}</h1>
    </div>
</header>

<div class="container" style="padding-top:1.5rem; padding-bottom:4rem;">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-7">

    <div class="content-card p-4 p-md-5">

        {{ form_start(form) }}

        <div class="section-header-sm mb-3">Datos de la parcela</div>
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                {{ form_label(form.numero) }}
                {{ form_widget(form.numero, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.numero) }}
            </div>
            <div class="col-md-4">
                {{ form_label(form.tamano) }}
                {{ form_widget(form.tamano, {'attr': {'class': 'form-control', 'placeholder': 'e.g. 20'}}) }}
                {{ form_errors(form.tamano) }}
            </div>
            <div class="col-md-4">
                {{ form_label(form.precio) }}
                {{ form_widget(form.precio, {'attr': {'class': 'form-control', 'placeholder': 'e.g. 25'}}) }}
                {{ form_errors(form.precio) }}
            </div>
            <div class="col-12">
                {{ form_label(form.descripcion) }}
                {{ form_widget(form.descripcion, {'attr': {'class': 'form-control', 'rows': 3, 'placeholder': 'Descripción opcional visible para los usuarios…'}}) }}
            </div>
        </div>

        <div style="height:1px; background:#e8f5ed; margin-bottom:1.5rem"></div>

        <div class="section-header-sm mb-1">Posición en el mapa</div>
        <p class="text-muted small mb-3">Coordenadas de columna/fila (desde 0) y dimensiones en celdas del grid.</p>
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                {{ form_label(form.posX) }}
                {{ form_widget(form.posX, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.posX) }}
            </div>
            <div class="col-6 col-md-3">
                {{ form_label(form.posY) }}
                {{ form_widget(form.posY, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.posY) }}
            </div>
            <div class="col-6 col-md-3">
                {{ form_label(form.ancho) }}
                {{ form_widget(form.ancho, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.ancho) }}
            </div>
            <div class="col-6 col-md-3">
                {{ form_label(form.alto) }}
                {{ form_widget(form.alto, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.alto) }}
            </div>
        </div>

        <div style="height:1px; background:#e8f5ed; margin-bottom:1.5rem"></div>

        <div class="mb-4">
            {{ form_label(form.estado) }}
            {{ form_widget(form.estado, {'attr': {'class': 'form-select'}}) }}
        </div>

        <div class="d-flex gap-2">
            <button type="submit" class="btn-primary-green" style="border-radius:50px; padding:.6rem 1.6rem">
                <i class="bi bi-floppy me-1"></i>{{ parcela ? 'Guardar cambios' : 'Crear parcela' }}
            </button>
            <a href="{{ path('app_propietario_parcelas') }}" class="btn-ghost-green" style="border-radius:50px">Cancelar</a>
        </div>

        {{ form_end(form) }}
    </div>

</div>
</div>
</div>
{% endblock %}