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

{% block title %} 
    <title>Campaign 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-calendar"></i> Campaign List</h3>
        <a href="#"><i class="fas fa-plus"></i> Create Campaign</a>
  </div>
    
  <table class="table table-responsive table-hover text-center">
    <thead>
      <tr>
          <th scope="col">Vaccine</th>
          <th scope="col">Center</th>
          <th scope="col">Start Date</th>
          <th scope="col">End Date</th>
          <th scope="col">Select</th>
      </tr>
    </thead>
    <tbody>
        {% for campaign in object_list %}
        <tr>
          <td>{{ campaign.vaccine }}</td>
          <td>{{ campaign.center.name }}</td>
          <td>{{ campaign.start_date }}</td>
          <td>{{ campaign.end_date }}</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 %}