{% extends 'mysite/base.html' %}

{% block title %}
    <title>Vaccination List</title>
{% endblock title %}

{% block content %}
<div class="mt-3">
  <div class="d-flex align-items-center justify-content-between">
    <h3 class="text-center"><i class="fas fa-syringe"></i> Your Vaccination History</h3>
  </div>

  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Vaccine Name</th>
        <th scope="col">Date</th>
        <th scope="col">Status</th>
        <th scope="col">Select</th>
      </tr>
    </thead>

    <tbody>
      {% for vaccination in object_list %}
        <tr>
            <td>{{ vaccination.campaign.vaccine.name|upper }}</a></td>
            <td>{{ vaccination.slot.date }}</td>
            
            <td>
                {% if vaccination.is_vaccinated %}
                    <button class="btn btn-sm btn-success">Vaccinated</button>
                {% else %}
                    <button class="btn btn-sm btn-primary">Scheduled</button>
                {% endif %}
            </td>
            <td><a href="#" class="btn-sm btn-outline-primary">View Details</a></td>
        </tr>
      {% endfor %}
    </tbody>

  </table>

  {% include "components/pagination.html" %}

</div>
{% endblock content %}