{% extends 'base.html' %}
{% block title %}Vacunaciones{% endblock %}
{% block page_title %}Registro de Vacunaciones{% endblock %}
{% block page_subtitle %}Historial de vacunas aplicadas{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <form class="d-flex gap-2" method="get">
        <input type="text" name="q" value="{{ q }}" class="form-control" placeholder="Buscar por mascota o vacuna..."
            style="width:280px;">
        <button type="submit" class="btn btn-success px-4"><i class="fa-solid fa-magnifying-glass"></i></button>
        {% if q %}<a href="{% url 'vacuna_lista' %}" class="btn btn-outline-secondary">Limpiar</a>{% endif %}
    </form>
    <a href="{% url 'vacuna_crear' %}" class="btn btn-success rounded-pill px-4">
        <i class="fa-solid fa-syringe me-2"></i>Registrar Vacuna
    </a>
</div>

<div class="panel-card">
    {% if vacunas %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr style="background:#f8fafc; font-size:12px; text-transform:uppercase; color:#94a3b8;">
                    <th class="ps-3">Mascota</th>
                    <th>Cliente</th>
                    <th>Vacuna</th>
                    <th>Lote</th>
                    <th>Fecha Aplic.</th>
                    <th>Próxima Dosis</th>
                    <th>Veterinario</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for v in vacunas %}
                <tr>
                    <td class="ps-3 fw-semibold">
                        {{ v.mascota.nombre }}
                        <small class="d-block text-muted">
                            {{ v.mascota.get_especie_display }}
                        </small>
                    </td>
                    <td>{{ v.mascota.cliente.nombre_completo }}</td>
                    <td class="fw-semibold">{{ v.nombre_vacuna }}</td>
                    <td class="text-muted">{{ v.lote|default:"—" }}</td>
                    <td>{{ v.fecha_aplicacion|date:"d/m/Y" }}</td>
                    <td>
                        {% if v.fecha_proxima_dosis %}
                        <span class="badge rounded-pill" style="background:rgba(16,185,129,.15);color:#047857;">
                            {{ v.fecha_proxima_dosis|date:"d/m/Y" }}
                        </span>
                        {% else %}-{% endif %}
                    </td>
                    <td class="text-muted">{{ v.veterinario.get_full_name|default:"—" }}</td>
                    <td class="text-center">
                        <a href="{% url 'vacuna_editar' v.pk %}" class="btn btn-sm btn-outline-secondary"><i
                                class="fa-solid fa-pen"></i></a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
        <i class="fa-solid fa-syringe" style="font-size:3rem;opacity:.2;"></i>
        <p class="mt-3">No hay vacunas registradas.</p>
    </div>
    {% endif %}
</div>
{% endblock %}