{% extends 'admin/layout.html.twig' %}
{% block title %}{{ title }}{% endblock %}
{% block main %}

<div class="adm-page-header">
    <a href="{{ path('admin_elevage') }}" class="btn btn-outline btn-sm">← Retour</a>
    <h1>{{ title }}</h1>
</div>

{# ── Fiche principale ── #}
<div class="adm-card" style="max-width:780px">
    <h2>Informations</h2>
    {{ form_start(form, {attr: {novalidate: true}}) }}
    <div class="adm-form-grid-2">
        {% set pedigreeFields = ['pereNom','pereGpere','pereGmere','mereNom','mereGpere','mereGmere'] %}
        {% for field in form %}
        {% if 'hidden' not in field.vars.block_prefixes and field.vars.name not in pedigreeFields %}
        <div class="form-group {% if 'checkbox' in field.vars.block_prefixes %}form-check{% endif %}">
            {% if 'checkbox' in field.vars.block_prefixes %}
                {{ form_widget(field) }}
                {{ form_label(field) }}
            {% else %}
                {{ form_label(field) }}
                {{ form_widget(field, {attr: {class: 'form-control'}}) }}
            {% endif %}
            {% if field.vars.errors|length %}
                <div style="color:#ef4444;font-size:.78rem;margin-top:4px">{{ form_errors(field) }}</div>
            {% endif %}
        </div>
        {% endif %}
        {% endfor %}
    </div>

    <hr style="border:none;border-top:1.5px solid #f0e8e6;margin:20px 0 16px">
    <h2 style="margin-bottom:16px">Généalogie</h2>
    <div class="adm-form-grid-3">
        {% for fname in ['pereNom','pereGpere','pereGmere','mereNom','mereGpere','mereGmere'] %}
        {% set field = form[fname] %}
        <div class="form-group">
            {{ form_label(field) }}
            {{ form_widget(field, {attr: {class: 'form-control'}}) }}
            {% if field.vars.errors|length %}
                <div style="color:#ef4444;font-size:.78rem;margin-top:4px">{{ form_errors(field) }}</div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <div class="actions" style="margin-top:8px">
        <button type="submit" class="btn btn-primary">Enregistrer</button>
        <a href="{{ path('admin_elevage') }}" class="btn btn-outline">Annuler</a>
    </div>
    {{ form_end(form) }}
</div>

{# ── Gestion des photos (uniquement en édition) ── #}
{% if poulain.id %}
<div class="adm-card" style="max-width:780px">
    <h2>Photos</h2>

    {% if poulain.photos is not empty %}
    <div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px">
        {% for photo in poulain.photos %}
        <div style="position:relative;display:inline-block">
            <img src="/{{ photo }}" style="height:100px;width:140px;object-fit:cover;border-radius:8px;display:block">
            <form method="post" action="{{ path('admin_elevage_poulain_photo_delete', {id: poulain.id}) }}"
                  style="position:absolute;top:4px;right:4px"
                  onsubmit="return confirm('Supprimer cette photo ?')">
                <input type="hidden" name="_token" value="{{ csrf_token('photo-del-' ~ poulain.id) }}">
                <input type="hidden" name="filename" value="{{ photo }}">
                <button type="submit"
                        style="background:rgba(0,0,0,.65);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:.75rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center">✕</button>
            </form>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p style="color:#aaa;font-size:.88rem;margin-bottom:16px">Aucune photo pour le moment.</p>
    {% endif %}

    <form method="post" action="{{ path('admin_elevage_poulain_photo_add', {id: poulain.id}) }}"
          enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token('photo-add-' ~ poulain.id) }}">
        <div class="form-group">
            <label style="font-size:.83rem;font-weight:600;display:block;margin-bottom:5px">
                Ajouter des photos (JPG / PNG / WebP)
            </label>
            <input type="file" name="photos[]" multiple accept="image/jpeg,image/png,image/webp"
                   class="form-control">
        </div>
        <button type="submit" class="btn btn-primary btn-sm">Télécharger</button>
    </form>
</div>
{% endif %}

{% endblock %}