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

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

{% block content %}
<div class="card mb-3">
  <div class="card-body">
    <h5 class="card-title mb-4">
      <i class="fas fa-calendar"></i> Review the vaccination details
    </h5>
    <div class="container">
      <div class="row">

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Patient Name
          </div>
          <div class="col-7 col-md-8">
            {{ patient.get_full_name }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Email
          </div>
          <div class="col-7 col-md-8">
            {{ patient.email }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Gender
          </div>
          <div class="col-7 col-md-8">
            {{ patient.gender }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Date of Birth
          </div>
          <div class="col-7 col-md-8">
            {{ patient.date_of_birth }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Blood Group
          </div>
          <div class="col-7 col-md-8">
            {{ patient.blood_group }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            {{ patient.identity_document_type }}
          </div>
          <div class="col-7 col-md-8">
            {{ patient.identity_document_number }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Vaccine
          </div>
          <div class="col-7 col-md-8">
            {{ campaign.vaccine.name }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Scheduled Date
          </div>
          <div class="col-7 col-md-8">
            {{ slot.date }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Reporting Time
          </div>
          <div class="col-7 col-md-8">
            {{ slot.start_time }} - {{ slot.end_time}}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Center Name
          </div>
          <div class="col-7 col-md-8">
            {{ campaign.center.name }}
          </div>
        </div>

        <div class="row mb-1">
          <div class="col-5 col-md-4 fw-bold">
            Center Address
          </div>
          <div class="col-7 col-md-8">
            {{ campaign.center.address}}
          </div>
        </div>

        <div class="row mb-1">
          <form method="POST" action="">
            {% csrf_token %} {{ form.as_p }}
            <button type="submit" class="btn btn-success m-3">
              <i class="fas fa-clock"></i> Schedule
            </button>
          </form>
        </div>
        
      </div>
    </div>
  </div>
</div>
{% endblock content %}