{% extends "base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
  <header>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">
          Appointment {{ apt_id }}&nbsp;&nbsp;<i class="fa fa-calendar"></i>
        </h1>
        <p class="lead">Showing details about appointmenmt {{ apt_id }}. To modify, hit the "Modify appointment" button.</p>
      </div>
    </div>
    <hr class="my-4">
  </header>
  <body>
    <div class="div-center">
      <div class="row">
        <div class="col">
          <div class="btn-group" role="group" aria-label="Basic example">
            <a href="{{ url_for('apt_modify', apt_id = apt_id, ppt_id = ppt_id) }}">
              <button type="button" class="btn btn-warning">
                <i class="fa fa-pen"></i>&nbsp;&nbsp;Modify
                appointment
              </button>
            </a>
            <a href="{{ url_for('que_new', ppt_id = ppt_id) }}">
              <button type="button" class="btn btn-primary">
                <i class="fa-regular fa-clipboard"></i>&nbsp;&nbsp;Add language
                questionnaire
              </button>
            </a>
            <a>
              <form method="post">
                <input type="submit"
                       name="deleteAppointment"
                       class="btn btn-danger"
                       value="×&nbsp;&nbsp;&nbsp;&nbsp;Delete appointment">
              </form>
            </a>
          </div>
        </div>
      </div>
    </div>
    <br>
    <div class="div-center">
      <div class="card card-info">
        <div class="card-header ">Appointment information</div>
        <div class="card-body">
          <table class="table table-hover table-borderless table-responsive">
            <tbody>
              <tr>
                <th width="47%">
                  Date&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-clock"></i>
                </th>
                <td>{{ data["date"] }}</td>
              </tr>
              <tr>
                <th width="47%">
                  Participant&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-person"></i>
                </th>
                <td user-select-all>{{ ppt_id }}</td>
              </tr>
              <tr>
                <th>
                  Appointment&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-calendar"></i>
                </th>
                <td>{{ apt_id }}</td>
              </tr>
              <tr>
                <th>
                  Status&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-check"></i>
                </th>
                <td>{{ data["status"] }}</td>
              </tr>
              <tr>
                <th>
                  Study&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-flask"></i>
                </th>
                <td>{{ data["study"] }}</td>
              </tr>
              <tr>
                <th>
                  Made on the&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-calendar"></i>
                </th>
                <td>{{ data["date_created"] }}</td>
              </tr>
              <tr>
                <th>
                  Last updated&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-pen"></i>
                </th>
                <td>{{ data["date_updated"] }}</td>
              </tr>
              <tr>
                <th>
                  Taxi address&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-car"></i>
                </th>
                <td>{{ data["taxi_address"] }}</td>
              </tr>
              <tr>
                <th>
                  Taxi booked?&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-check"></i>
                </th>
                <td>{{ data["taxi_isbooked"] | safe }}</td>
              </tr>
              <tr>
                <th>
                  Comments?&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-comment"></i>
                </th>
                <td>{{ data["comments"] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="card card-info">
        <div class="card-header ">Participant information</div>
        <div class="card-body">
          <table class="table table-hover table-borderless table-responsive">
            <tbody>
              <tr>
                <th width="48%">
                  Name&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-person"></i>
                </th>
                <td user-select-all>{{ participant["name"] }}</td>
              </tr>
              <tr>
                <th>
                  Added on&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-calendar"></i>
                </th>
                <td>{{ participant["date_created"] }}</td>
              </tr>
              <tr>
                <th>
                  Age now&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-hourglass-start"></i>
                </th>
                <td>{{ participant["age_now_months"] + ":" + participant["age_now_days"] }}</td>
              </tr>
              <tr>
                <th>
                  Age at appointment&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-hourglass-finish"></i>
                </th>
                <td>{{ data["age_apt_months"] + ":" + data["age_apt_days"] }}</td>
              </tr>
              <tr>
                <th>
                  Sex&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-venus-mars"></i>
                </th>
                <td>{{ participant["sex"] }}</td>
              </tr>
              <tr>
                <th>
                  Comments&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-comment"></i>
                </th>
                <td>{{ participant["comments"] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="card card-info">
        <div class="card-header ">Contact details</div>
        <div class="card-body">
          <table class="table table-hover table-borderless table-responsive">
            <tbody>
              <tr>
                <th width="48%">
                  Phone&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-phone"></i>
                </th>
                <td user-select-all>{{ participant["phone1"] }}</td>
              </tr>
              <tr>
                <th>
                  E-mail&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-envelope"></i>
                </th>
                <td>{{ participant["email1"] }}</td>
              </tr>
              <tr>
                <th>
                  Phone 2&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-phone"></i>
                </th>
                <td user-select-all>{{ participant["phone2"] }}</td>
              </tr>
              <tr>
                <th>
                  E-mail 2&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-envelope"></i>
                </th>
                <td>{{ participant["email2"] }}</td>
              </tr>
              <tr>
                <th>
                  Taxi address&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-house"></i>
                </th>
                <td>{{ participant["house"] }}</td>
              </tr>
              <tr>
                <th>
                  Postcode&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-city"></i>
                </th>
                <td>{{ data["postcode"] }}</td>
              </tr>
              <tr>
                <th>
                  City&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-city"></i>
                </th>
                <td>{{ participant["city"] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
{% endblock content %}
