{% extends "_base.html" %}
{% block header %}
{% endblock header %}

{% block content %}

<body>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Participants&nbsp;&nbsp;<i class="fa fa-user-plus"></i></h1>
      <p class="lead">Adding a new participant.</p>
    </div>
  </div>
  <hr class="my-4">
  <form class="form needs-validation" method="post" novalidate>
    <div class="row">
      <div class="col">
        <div class="div-center">
          <div class=" btn-group" role="group">
            <button type="submit" class="btn btn-warning">
              <i class="fa fa-pen"></i>&nbsp;&nbsp;Submit
            </button>
          </div>
        </div>
      </div>
    </div>
    <br>
    <div class="div-center">
      <div class="card card-input">
        <div class="card-header ">Participant information</div>
        <div class="card-body">
          <div class="form-group">
            <label for="inputSource" class="form-label">
              Source&nbsp;&nbsp;<i class="fa fa-database"></i>
            </label>
            <select class="form-select" name="inputSource" required>
              <option disabled selected value>-- Select one --</option>
              {% for k, v in data_dict["participant_source"].items() %}<option value="{{ k }}">{{ v }}</option>{% endfor
              %}
            </select>
            <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" 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="0" 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>
            <input class="form-control" name="inputTwinID" rows="1">
            <label for="inputComments" class="form-label">
              Comments&nbsp;&nbsp;<i class="fa fa-comment"></i>
            </label>
            <input type="text" class="form-control" name="inputComments" />
          </div>
        </div>
      </div>
      <div class="card card-input">
        <div class="card-header ">Contact information</div>
        <div class="card-body">
          <div class="form-group">
            <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">
            <label for="inputAddress" class="form-label">
              Home address&nbsp;&nbsp;<i class="fa  fa-house"></i>
            </label>
            <input type="text" class="form-control" name="inputAddress" />
            <label for="inputCity" class="form-label">
              City/place of residence&nbsp;&nbsp;<i class="fa fa-city"></i>
            </label>
            <input class="form-control" name="inputCity" rows="1">
            <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">
        <div class="card-header ">Birth information</div>
        <div class="card-body">
          <div class="form-group">
            <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>
            <input type="text" class="form-control" name="inputDiagnoses" />
          </div>
        </div>
      </div>
    </div>
  </form>
  <div class="loading">
    <div class="loader">
    </div>
  </div>
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        var forms = document.getElementsByClassName('needs-validation');
        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 %}