{% extends 'base.html' %}
{% block title %}{{ titulo }}{% endblock %}
{% block page_title %}{{ titulo }}{% endblock %}
{% block page_subtitle %}Datos de la mascota para {{ cliente.nombre_completo }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="panel-card">
            <div class="d-flex align-items-center gap-3 mb-4 pb-3 border-bottom">
                <div class="rounded-circle d-flex align-items-center justify-content-center text-white"
                    style="width:48px;height:48px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);font-size:20px;">
                    <i class="fa-solid fa-paw"></i>
                </div>
                <div>
                    <div class="fw-bold">{{ cliente.nombre_completo }}</div>
                    <small class="text-muted">DNI: {{ cliente.dni }}</small>
                </div>
            </div>
            <form method="post" enctype="multipart/form-data" novalidate>
                {% csrf_token %}
                {% if form.errors %}
                <div class="alert alert-danger mb-4">
                    <h6 class="alert-heading fw-bold mb-1"><i class="fa-solid fa-triangle-exclamation me-2"></i>Por
                        favor, corrija los siguientes errores:</h6>
                    <ul class="mb-0 mt-2">
                        {% for field in form %}
                        {% if field.errors %}
                        <li><strong>{{ field.label }}:</strong> {{ field.errors|striptags }}</li>
                        {% endif %}
                        {% endfor %}
                        {% for error in form.non_field_errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Nombre <span class="text-danger">*</span></label>
                        {{ form.nombre }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Especie <span class="text-danger">*</span></label>
                        {{ form.especie }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Raza</label>
                        {{ form.raza }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Sexo <span class="text-danger">*</span></label>
                        {{ form.sexo }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Fecha de Nacimiento</label>
                        {{ form.fecha_nacimiento }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Peso actual (Kg)</label>
                        {{ form.peso_actual }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Color / Pelaje</label>
                        {{ form.color }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">N° Microchip</label>
                        {{ form.microchip }}
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Foto</label>
                        {{ form.foto }}
                    </div>
                </div>
                <div class="d-flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary rounded-pill px-4"
                        style="background:#8b5cf6;border:none;">
                        <i class="fa-solid fa-floppy-disk me-2"></i>Guardar
                    </button>
                    <a href="{% url 'cliente_perfil' cliente.pk %}"
                        class="btn btn-outline-secondary rounded-pill px-4">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}