{% extends 'base.html' %}
{% block title %}Historia Clínica{% endblock %}
{% block page_title %}Historial Clínico{% endblock %}
{% block page_subtitle %}Consultas y atenciones médicas{% 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, cliente o diagnóstico..." style="width:340px;">
        <button type="submit" class="btn btn-primary px-4" style="background:#8b5cf6;border:none;"><i
                class="fa-solid fa-magnifying-glass"></i></button>
        {% if q %}<a href="{% url 'historia_lista' %}" class="btn btn-outline-secondary">Limpiar</a>{% endif %}
    </form>
    <div class="d-flex gap-2">
        <a href="{% url 'vacuna_lista' %}" class="btn btn-outline-success rounded-pill px-3">
            <i class="fa-solid fa-syringe me-2"></i>Vacunaciones
        </a>
        <a href="{% url 'historia_crear' %}" class="btn btn-primary rounded-pill px-4"
            style="background:#8b5cf6;border:none;">
            <i class="fa-solid fa-file-medical me-2"></i>Nueva Historia
        </a>
    </div>
</div>

<div class="panel-card">
    {% if historias %}
    <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">#</th>
                    <th>Fecha</th>
                    <th>Mascota</th>
                    <th>Cliente</th>
                    <th>Motivo</th>
                    <th>Diagnóstico</th>
                    <th>Veterinario</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for h in historias %}
                <tr>
                    <td class="ps-3 text-muted small">{{ h.pk }}</td>
                    <td>
                        <div class="fw-semibold">{{ h.fecha|date:"d/m/Y" }}</div>
                        <small class="text-muted">{{ h.fecha|time:"H:i" }}</small>
                    </td>
                    <td>
                        <div class="fw-semibold">{{ h.mascota.nombre }}</div>
                        <small class="text-muted">{{ h.mascota.get_especie_display }}</small>
                    </td>
                    <td>{{ h.mascota.cliente.nombre_completo }}</td>
                    <td class="text-muted">{{ h.motivo_consulta|truncatechars:30 }}</td>
                    <td class="text-muted">{{ h.diagnostico|truncatechars:35 }}</td>
                    <td class="text-muted">{{ h.veterinario.get_full_name|default:"—" }}</td>
                    <td class="text-center">
                        <a href="{% url 'historia_detalle' h.pk %}" class="btn btn-sm btn-outline-primary me-1"
                            title="Ver detalle">
                            <i class="fa-solid fa-eye"></i>
                        </a>
                        <a href="{% url 'historia_editar' h.pk %}" class="btn btn-sm btn-outline-secondary"
                            title="Editar">
                            <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-file-medical" style="font-size:3rem;opacity:.2;"></i>
        <p class="mt-3">No se encontraron historias clínicas.</p>
        <a href="{% url 'historia_crear' %}" class="btn btn-primary rounded-pill"
            style="background:#8b5cf6;border:none;">
            <i class="fa-solid fa-file-medical me-2"></i>Registrar primera atención
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}