{% extends "_base.html" %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">
        Participant {{ ppt_id }}&nbsp;&nbsp;<i class="fa fa-user"></i>
      </h1>
      <p class="lead">Showing details from participant {{ ppt_id }}.</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_new', ppt_id = ppt_id) }}">
            <button type="button" class="btn btn-success">
              <i class="fa fa-calendar-plus"></i>&nbsp;&nbsp;&nbsp;&nbsp;New
              appointment
            </button>
          </a>
          <a href="{{ url_for('ppt_modify', ppt_id = ppt_id) }}">
            <button type="button" class="btn btn-warning">
              <i class="fa fa-user-pen"></i>&nbsp;&nbsp;&nbsp;&nbsp;Modify
              participant
            </button>
          </a>
          <a href="{{ url_for('que_new', ppt_id = ppt_id) }}">
            <button type="button" class="btn btn-primary">
              <i class="fa-solid fa-file-circle-plus"></i>&nbsp;&nbsp;&nbsp;&nbsp;Add questionnaire
            </button>
          </a>
          <a>
            <form method="post">
              <input type="submit" name="deleteParticipant" class="btn btn-danger"
                value="×&nbsp;&nbsp;&nbsp;&nbsp;Delete participant">
            </form>
          </a>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="row col-12">
    <div class="div-center">
      <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="47%">
                  Source&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-database"></i>
                </th>
                <td user-select-all>{{ data["data"]["source"] }}</td>
              </tr>
              <tr>
                <th width="47%">
                  Name&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-person"></i>
                </th>
                <td user-select-all>{{ data["data"]["name"] }}</td>
              </tr>
              <tr>
                <th>
                  Added&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-calendar"></i>
                </th>
                <td>{{ data["data"]["date_created"] }}</td>
              </tr>
              <tr>
                <th>
                  Last updated&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-pen"></i>
                </th>
                <td>{{ data["data"]["date_updated"] }}</td>
              </tr>
              <tr>
                <th>
                  Age&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-hourglass-start"></i>
                </th>
                <td>
                  {{ data["data"]["age_now_months"] + ":" +
                  data["data"]["age_now_days"] }}
                </td>
              </tr>
              <tr>
                <th>
                  Sex&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-venus-mars"></i>
                </th>
                <td>{{ data["data"]["sex"] }}</td>
              </tr>
              <tr>
                <th>
                  Comments&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-comments"></i>
                </th>
                <td>{{ data["data"]["comments"] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="card card-info">
        <div class="card-header ">Contact details</div>
        <div class="card-body">
          <div class="card-text">
            <table class="table table-hover table-borderless table-responsive">
              <tbody>
                <tr>
                  <th>
                    Phone&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-phone"></i>
                  </th>
                  <td>{{ data["data"]["phone1"] }}</td>
                </tr>
                <tr>
                  <th>
                    E-mail&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-envelope"></i>
                  </th>
                  <td>{{ data["data"]["email1"] }}</td>
                </tr>
                <tr>
                  <th>
                    Phone 2&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-phone"></i>
                  </th>
                  <td>{{ data["data"]["phone2"] }}</td>
                </tr>
                <tr>
                  <th>
                    E-mail 2&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-envelope"></i>
                  </th>
                  <td>{{ data["data"]["email2"] }}</td>
                </tr>
                <tr>
                  <th>
                    Address&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-house"></i>
                  </th>
                  <td>{{ data["data"]["address"] }}</td>
                </tr>
                <tr>
                  <th>
                    Postcode&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-city"></i>
                  </th>
                  <td>{{ data["data"]["postcode"] }}</td>
                </tr>
                <tr>
                  <th>
                    City&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-city"></i>
                  </th>
                  <td>{{ data["data"]["city"] }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="card card-info">
        <div class="card-header ">Birth information</div>
        <div class="card-body">
          <table class="table table-hover table-borderless table-responsive">
            <tbody>
              <tr>
                <th width="60%">
                  Delivery type&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-hospital"></i>
                </th>
                <td user-select-all>{{ data["data"]["birth_type"] }}</td>
              </tr>
              <tr>
                <th>
                  Gestational weeks&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-clock"></i>
                </th>
                <td>{{ data["data"]["gest_weeks"] }}</td>
              </tr>
              <tr>
                <th>
                  Birth weight (g)&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-weight-scale"></i>
                </th>
                <td>{{ data["data"]["birth_weight"] }}</td>
              </tr>
              <tr>
                <th>
                  Head circ. (cm)&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-ruler"></i>
                </th>
                <td>{{ data["data"]["head_circumference"] }}</td>
              </tr>
              <tr>
                <th>
                  Apgar&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-check"></i>
                </th>
                <td>
                  {{ data["data"]["apgar1"] }}
                  {% if data["data"]["apgar1"] and data["data"]["apgar2"] %}|{% endif %}
                  {{ data["data"]["apgar2"] }}
                  {% if data["data"]["apgar2"] and data["data"]["apgar3"] %}|{% endif %}
                  {{ data["data"]["apgar3"] }}
                </td>
              </tr>
              <tr>
                <th>
                  Hearing&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-headphones"></i>
                </th>
                <td>{{ data["data"]["hearing"] }}</td>
              </tr>
              <tr>
                <th>
                  Diagnoses&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-user-doctor"></i>
                </th>
                <td class="tdbreak">{{ data["data"]["diagnoses"] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="row col-12">
    <div class="div-center">
      <div class="card card-table">
        <div class="card-header ">Appointments</div>
        <div class="card-body">{{ data["table_appointments"] | safe }}</div>
      </div>
    </div>
    <div class="row col-12">
      <div class="div-center">
        <div class="card card-table">
          <div class="card-header ">Language questionnaires</div>
          <div class="card-body">{{ data["table_questionnaires"] | safe }}</div>
        </div>
      </div>
    </div>
  </div>
</body>
{% endblock content %}