{% extends "base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Participants ({{ ppt_id }})</h1>
      <p class="lead">Modify the corresponding values and hit the submit button.</p>
    </div>
  </div>
  <hr class="my-4">
</header>

<body>
  <form class="form needs-validation" method="post" novalidate>
    <div class="row">
      <div class="col">
        <div class="btn-group" role="group" aria-label="Basic example">
          <button type="submit" class="btn btn-warning">
            <i class="fa fa-pen"></i>&nbsp&nbspSubmit
          </button>
        </div>
      </div>
    </div>
    <div class="card card-input">
      <h5 class="card-header">Participant information</h5>
      <div class="card-body">
        <div class="row">
          <div class="col">
            <label for="inputName" class="form-label">
              Participant name&nbsp;&nbsp;<i class="fa  fa-user"></i>
            </label>
            <input type="text" name="inputName" class="form-control" placeholder="{{ data['name'] }}"
              value="{{ data['name'] }}">
          </div>
          <div class="col">
            <label for="inputSex" class="form-label">
              Sex&nbsp;&nbsp;<i class="fa fa-venus-mars"></i>
            </label>
            <select class="form-select" name="inputSex" required>
              {% for k, v in data_dict["participant_sex"].items() %}
              <option value="{{ k }}" {% if data["sex"]==k %}selected{% endif %}>{{ v }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <label for="inputParent1Name" class="form-label">Parent 1 name</label>
            <input type="text" name="inputParent1Name" class="form-control" placeholder="{{ data['parent1_name'] }}"
              value="{{ data['parent1_name'] }}">
          </div>
          <div class="col">
            <label for="inputParent1Surname" class="form-label">Parent 1 surname</label>
            <input type="text" name="inputParent1Surname" class="form-control"
              placeholder="{{ data['parent1_surname'] }}" value="{{ data['parent1_surname'] }}">
          </div>
        </div>
        <div class="row">
          <div class="col">
            <label for="inputParent2Name" class="form-label">Parent 2 name</label>
            <input type="text" name="inputParent2Name" class="form-control" placeholder="{{ data['parent2_name'] }}"
              value="{{ data['parent2_name'] }}">
          </div>
          <div class="col">
            <label for="inputParent2Surname" class="form-label">Parent 2 surname</label>
            <input type="text" name="inputParent2Surname" class="form-control"
              placeholder="{{ data['parent2_surname'] }}" value="{{ data['parent2_surname'] }}">
          </div>
        </div>
        <div class="row">
          <div class="col">
            <label class="form-label" for="inputAgeMonths" placeholder="{{ data['age_now_months'] }}"
              value="{{ data['age_now_months'] }}">
              Age
              (months)
            </label>
            <input type="number" name="inputAgeMonths" class="form-control" min="0"
              placeholder="{{ data['age_now_months'] }}" value="{{ data['age_now_months'] }}" required>
          </div>
          <div class="col">
            <label class="form-label" for="inputAgeDays">Age (days)</label>
            <input type=" number" name="inputAgeDays" class="form-control" min="1" max="31"
              placeholder="{{ data['age_now_days'] }}" value="{{ data['age_now_days'] }}" required>
          </div>
        </div>
        <div class="col">
          <label class="form-label" for="inputNormalHearing">
            Hearing test&nbsp;&nbsp;<i class="fa  fa-headphones"></i>
          </label>
          <select class="form-select" name="inputNormalHearing">
            {% for k, v in data_dict["participant_hearing"].items() %}
            <option value="{{ k }}" {% if v=="Not available" %}selected{% endif %}>{{ v }}</option>
            {% endfor %}
          </select>
        </div>
        <label for="inputTwinID" class="form-label">Twin ID</label>
        <textarea class="form-control" name="inputTwinID" rows="1" placeholder="{{ data['twin'] }}"
          value="{{ data['twin'] }}"></textarea>
        <label for="inputComments" class="form-label">
          Comments&nbsp;&nbsp;<i class="fa  fa-comment"></i>
        </label>
        <textarea class="form-control" name="inputComments" rows="3"></textarea>
      </div>
    </div>
    <div class="card card-input">
      <h5 class="card-header">Contact information</h5>
      <div class="card-body">
        <label for="inputEmail1" class="form-label">
          E-mail 1&nbsp;&nbsp;<i class="fa  fa-envelope"></i>
        </label>
        <input type="email" class="form-control" name="inputEmail1" placeholder="Enter email"
          placeholder="{{ data['email1'] }}" value="{{ data['email1'] }}"
          pattern="/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
        <label for="inputPhone1" class="form-label">
          Phone 1&nbsp&nbsp<i class="fa  fa-phone fa-rotate-180"></i>
        </label>
        <input type="tel" class="form-control" name="inputPhone1" placeholder="{{ data['phone1'] }}"
          value="{{ data['phone1'] }}" required>
        <label for="inputEmail2" class="form-label">
          E-mail 2&nbsp;&nbsp;<i class="fa  fa-envelope"></i>
        </label>
        <input type="email" class="form-control" name="inputEmail2" placeholder="{{ data['email2'] }}"
          value="{{ data['email2'] }}" pattern="/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
        <label for="inputPhone1" class="form-label">
          Phone 2&nbsp;&nbsp;<i class="fa fa-phone fa-rotate-180"></i>
        </label>
        <input type="tel" class="form-control" name="inputPhone2" placeholder="{{ data['phone2'] }}"
          value="{{ data['phone2'] }}">
        <div class="form-group">
          <label for="inputAddress" class="form-label">
            Home address&nbsp;&nbsp;<i class="fa fa-house"></i>
          </label>
          <textarea class="form-control" name="inputAddress" rows="1" placeholder="e.g., Tristan 1089, 1D"
            placeholder="{{ data['address'] }}" value="{{ data['address'] }}"></textarea>
          <label for="inputCity" class="form-label">
            City/place of residence&nbsp;&nbsp;<i class="fa  fa-city"></i>
          </label>
          <textarea class="form-control" name="inputCity" rows="1" placeholder="{{ data['city'] }}"
            value="{{ data['city'] }}"></textarea>
          <label for="inputPostcode" class="form-label">
            Postcode&nbsp;&nbsp;<i class="fa  fa-city"></i>
          </label>
          <input type="text" class="form-control" name="inputPostcode" rows="1" placeholder="{{ data['postcode'] }}"
            value="{{ data['postcode'] }}" pattern="[0-9]{5}">
        </div>
      </div>
    </div>
    <div class="card card-input">
      <h5 class="card-header">Birth information</h5>
      <div class="card-body">
        <div class="row">
          <div class="col">
            <label class="form-label" for="inputBirthWeight">
              Birth weight (g)&nbsp;&nbsp;<i class="fa  fa-weight-scale"></i>
            </label>
            <input type="number" name="inputBirthWeight" class="form-control" min="0"
              placeholder="{{ data['birth_weight'] }}" value="{{ data['birth_weight'] }}">
          </div>
          <div class="col">
            <label class="form-label" for="inputGestationalWeeks">
              Gestational weeks&nbsp;&nbsp;<i class="fa  fa-clock"></i>
            </label>
            <input type="number" name="inputGestationalWeeks" class="form-control" min="20" max="50"
              placeholder="{{ data['gest_weeks'] }}" value="{{ data['gest_weeks'] }}">
          </div>
        </div>
        <label for="inputDeliveryType" class="form-label">
          Delivery type&nbsp;&nbsp;<i class="fa  fa-hospital"></i>
        </label>
        <select class="form-select" name="inputDeliveryType">
          {% for k, v in data_dict["participant_birth_type"].items() %}
          <option value="{{ k }}" {% if data["birth_type"]=="v" %}selected{% endif %}>{{ v }}</option>
          {% endfor %}
        </select>
        <div class="col">
          <label class="form-label" for="inputBirthCircumference">
            Head circumference (cm)&nbsp;&nbsp;<i class="fa  fa-ruler"></i>
          </label>
          <input type="number" name="inputHeadCircumference" class="form-control" min="0" max="60"
            placeholder="{{ data['head_circumference'] }}" value="{{ data['head_circumference'] }}">
        </div>
        <div class="row">
          <div class="col">
            <label class="form-label" for="inputApgar1">Apgar 1</label>
            <input type="number" name="inputApgar1" class="form-control" min="0" max="10"
              placeholder="{{ data['apgar1'] }}" value="{{ data['apgar1'] }}">
          </div>
          <div class="col">
            <label class="form-label" for="inputApgar2">Apgar 2</label>
            <input type="number" name="inputApgar2" class="form-control" min="0" max="10"
              placeholder="{{ data['apgar2'] }}" value="{{ data['apgar2'] }}">
          </div>
          <div class="col">
            <label class="form-label" for="inputApgar3">Apgar 3</label>
            <input type="number" name="inputApgar3" class="form-control" min="0" max="10"
              placeholder="{{ data['apgar3'] }}" value="{{ data['apgar3'] }}">
          </div>
        </div>
        <label for="inputDiagnoses" class="form-label">
          Diagnoses&nbsp;&nbsp;<i class="fa  fa-user-doctor"></i>
        </label>
        <textarea class="form-control" name="inputDiagnoses" rows="3" placeholder="{{ data['diagnoses'] }}"
          value="{{ data['diagnoses'] }}"></textarea>
      </div>
    </div>
  </form>
</body>
{% endblock content %}