{% 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 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>
</body>
{% endblock content %}