{% extends 'base.html' %}
{% block title %}{{ titulo }}{% endblock %}
{% block page_title %}{{ titulo }}{% endblock %}
{% block page_subtitle %}Datos de la cita{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="panel-card">
            <form method="post" novalidate>
                {% csrf_token %}
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-semibold">Mascota <span class="text-danger">*</span></label>
                        {{ form.mascota }}
                        {% if form.mascota.errors %}<div class="text-danger small mt-1">{{ form.mascota.errors.0 }}
                        </div>{% endif %}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Fecha <span class="text-danger">*</span></label>
                        {{ form.fecha }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Hora <span class="text-danger">*</span></label>
                        {{ form.hora }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Tipo</label>
                        {{ form.tipo }}
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Estado</label>
                        {{ form.estado }}
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Motivo <span class="text-danger">*</span></label>
                        {{ form.motivo }}
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Veterinario</label>
                        {{ form.veterinario }}
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Observaciones</label>
                        {{ form.observaciones }}
                    </div>
                </div>
                <div class="d-flex gap-2 mt-4">
                    <button type="submit" class="btn btn-primary rounded-pill px-4"
                        style="background:#0bb8c8;border:none;">
                        <i class="fa-solid fa-floppy-disk me-2"></i>{{ accion|default:"Guardar" }}
                    </button>
                    <a href="{% url 'agenda_lista' %}" class="btn btn-outline-secondary rounded-pill px-4">Cancelar</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}