{% extends "base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
  <header>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">Participants</h1>
        <p class="lead">Adding a new participant.</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" onclick="loading();">
              <i class="fa fa-pen"></i>&nbsp;&nbsp;Submit
            </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" required>
            </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>
                <option disabled selected value>-- Select one --</option>
                {% for k, v in data_dict["participant_sex"].items() %}<option value="{{ k }}">{{ 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">
            </div>
            <div class="col">
              <label for="inputParent1Surname" class="form-label">Parent 1 surname</label>
              <input type="text" name="inputParent1Surname" class="form-control">
            </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">
            </div>
            <div class="col">
              <label for="inputParent2Surname" class="form-label">Parent 2 surname</label>
              <input type="text" name="inputParent2Surname" class="form-control">
            </div>
          </div>
          <div class="row">
            <div class="col">
              <label class="form-label" for="inputAgeMonths">Age (months)</label>
              <input type="number"
                     name="inputAgeMonths"
                     class="form-control"
                     min="0"
                     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"
                     required>
            </div>
          </div>
          <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>
          <label for="inputTwinID" class="form-label">Twin ID</label>
          <textarea class="form-control" name="inputTwinID" rows="1"></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="email@address.com"
                 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-90"></i>
          </label>
          <input type="tel"
                 class="form-control"
                 name="inputPhone1"
                 placeholder="Enter phone"
                 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="email@address.com"
                 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-90"></i>
          </label>
          <input type="tel"
                 class="form-control"
                 name="inputPhone2"
                 placeholder="Enter phone">
          <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"></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"></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"
                   pattern="[0-9]{5}">
            <div class="invalid-feedback">Postcode must be 5 digits!</div>
          </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">
            </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">
            </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 v=="Not available" %}selected{% endif %}>{{ v }}</option>
            {% endfor %}
          </select>
          <div class="col">
            <label class="form-label" for="inputHeadCircumference">
              Head circumference (cm)&nbsp;&nbsp;<i class="fa fa-ruler"></i>
            </label>
            <input type="number"
                   name="inputHeadCircumference"
                   class="form-control"
                   min="0"
                   max="60">
          </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">
            </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">
            </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">
            </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"></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 %}
