{% 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 first 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>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
  </body>
{% endblock content %}
