{% extends "base.html" %}
{% load static %}

{% block title %}My Vaccination Records - {{ project_name }}{% endblock %}

{% block head %}
<style>
    .vaccine-card {
        background: #ffffff;
        border-radius: 15px;
        padding: 20px;
        border: 1px solid var(--border-color);
        transition: transform 0.2s, box-shadow 0.2s;
        margin-bottom: 20px;
    }
    .vaccine-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .dose-badge {
        background: var(--pulse-red-light);
        color: var(--pulse-red);
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 8px;
        font-size: 0.8rem;
    }
    .date-badge {
        background: #f8f9fa;
        color: #6c757d;
        padding: 5px 12px;
        border-radius: 8px;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 5px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="brand-font mb-1 text-dark">Vaccination Journey</h2>
            <p class="text-secondary">Track and manage your immunization history safely.</p>
        </div>
        <a href="{% url 'add_vaccination' %}" class="btn btn-danger rounded-pill px-4 shadow-sm">
            <i class="bi bi-plus-lg me-2"></i>Add New Record
        </a>
    </div>

    {% if messages %}
    <div class="mb-4">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-4 shadow-sm border-0" role="alert">
            <i class="bi {% if message.tags == 'success' %}bi-check-circle-fill{% else %}bi-exclamation-triangle-fill{% endif %} me-2"></i>
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="row">
        {% for record in records %}
        <div class="col-md-6 col-lg-4">
            <div class="vaccine-card shadow-sm">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <h5 class="fw-bold mb-0 text-dark">{{ record.vaccine_name }}</h5>
                    <span class="dose-badge">Dose {{ record.dose_number }}</span>
                </div>
                
                <div class="d-flex flex-wrap gap-2 mb-3">
                    <span class="date-badge"><i class="bi bi-calendar-event"></i> {{ record.date_taken|date:"M d, Y" }}</span>
                    <span class="date-badge"><i class="bi bi-geo-alt"></i> {{ record.center_name|default:record.location }}</span>
                </div>

                <div class="mt-2 border-top pt-2">
                    <p class="text-secondary small mb-0">
                        <strong>Location:</strong> {{ record.location }}
                    </p>
                    {% if record.notes %}
                    <p class="text-secondary small mt-2 mb-0">
                        <i class="bi bi-sticky me-1"></i> {{ record.notes|truncatechars:100 }}
                    </p>
                    {% endif %}
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <div class="glass-card py-5">
                <i class="bi bi-shield-slash fs-1 text-secondary opacity-25"></i>
                <h4 class="mt-3 text-dark">No records found</h4>
                <p class="text-secondary">Start tracking your vaccinations today to keep your community safe.</p>
                <a href="{% url 'add_vaccination' %}" class="btn btn-outline-danger mt-2 rounded-pill px-4">Add Your First Record</a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
