{% extends "base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Language questionnaires</h1>
      <p class="lead">Adding a new language questionnaire for participant {{ ppt_id }}</p>
    </div>
  </div>
  <hr class="my-4">
</header>

<body>
  <form name="questionnaire-input" class="form-inline needs-validation" method="post" onsubmit="return validateForm()"
    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">
      <h5 class="card-header">Language information</h5>
      <div class="card-body">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="inputIsEstimated" id="inputIsEstimated">
          <label class="form-check-label" for="inputEstimated">Language profile is an estimation</label>
        </div>
        <br>
        <br>
        <div class="row">
          <div class="col-8">
            <b>Language</b>
          </div>
          <div class="col-4">
            <b>Exposure (%)</b>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="lang1addon">L1</span>
              </div>
              <select class="form-select" name="inputLang1" aria-describedby="lang1addon" required>
                <option selected value="0">-- Select one --</option>
                {% for k, v in data_dict["language_lang1"].items() %}
                {% if k!="0" %}<option value="{{ k }}">{{ v }}</option>{% endif %}
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="col-4">
            <input type="number" name="inputLang1Exp" class="form-control" min="0" max="100" value="0" required>
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="lang2addon">L2</span>
              </div>
              <select class="form-select" name="inputLang2">
                <option selected value="0">-- Select one --</option>
                {% for k, v in data_dict["language_lang1"].items() %}
                {% if k!="0" %}<option value="{{ k }}">{{ v }}</option>{% endif %}
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="col-4">
            <input type="number" name="inputLang2Exp" id="inputLang2Exp" class="form-control" min="0" max="100"
              value="0">
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="lang2addon">L3</span>
              </div>
              <select class="form-select" name="inputLang3">
                <option selected value="0">-- Select one --</option>
                {% for k, v in data_dict["language_lang1"].items() %}
                {% if k!="0" %}<option value="{{ k }}">{{ v }}</option>{% endif %}
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="col-4">
            <input type="number" name="inputLang3Exp" class="form-control" min="0" max="100" value="0">
          </div>
        </div>
        <div class="row">
          <div class="col-8">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text" id="lang2addon">L4</span>
              </div>
              <select class="form-select" name="inputLang4">
                <option selected value="0">-- Select one --</option>
                {% for k, v in data_dict["language_lang1"].items() %}
                {% if k!="0" %}<option value="{{ k }}">{{ v }}</option>{% endif %}
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="col-4">
            <input type="number" name="inputLang4Exp" class="form-control" min="0" max="100" value="0">
          </div>
        </div>
        <label for="inputComments" class="form-label">Comments</label>
        <textarea class="form-control" name="inputComments" rows="3"></textarea>
      </div>
    </div>
  </form>
</body>
{% endblock content %}