{% extends "base.html" %}
{% block content %}
 <h1 class="container mt-5 display-4 text-center"><br>Create new experiment: (1/4)</h1>
  <br>  
  <br>
  <p class="lead">Please input the following information. All fields are required.
  </p>
  {% from "_formhelpers.html" import render_field %}
    <div class=container"><br>
    <div class="row align-items-center justify-content-center">
    <div class="col-12">
      <form  action="" method="post" role="form">
        <div class="form-group">
          <label for="name">Your name:</label>
          <input required type="text" class="form-control" id="creator_name" name="creator_name" placeholder="Creator name?">
            <br>
          <label for="name">Name of the experiment:</label>
          <input required type="text" class="form-control" id="name" name="name" placeholder="Experiment name?">
            <br>

  <div class="form-group">
  <label for="language">Select a language for the experiment:</label>
  <select class="form-control" id="language" name="language">
  <option disabled selected value></option>
  <option value="Afrikanns">Afrikanns</option>
  <option value="Albanian">Albanian</option>
  <option value="Arabic">Arabic</option>
  <option value="Armenian">Armenian</option>
  <option value="Basque">Basque</option>
  <option value="Bengali">Bengali</option>
  <option value="Bulgarian">Bulgarian</option>
  <option value="Catalan">Catalan</option>
  <option value="Cambodian">Cambodian</option>
  <option value="Chinese">Chinese</option>
  <option value="Croation">Croation</option>
  <option value="Czech">Czech</option>
  <option value="Danish">Danish</option>
  <option value="Dutch">Dutch</option>
  <option value="English">English</option>
  <option value="Estonian">Estonian</option>
  <option value="Fiji">Fiji</option>
  <option value="Finnish">Finnish</option>
  <option value="French">French</option>
  <option value="Georgian">Georgian</option>
  <option value="German">German</option>
  <option value="Greek">Greek</option>
  <option value="Gujarati">Gujarati</option>
  <option value="Hebrew">Hebrew</option>
  <option value="Hindi">Hindi</option>
  <option value="Hungarian">Hungarian</option>
  <option value="Icelandic">Icelandic</option>
  <option value="Indonesian">Indonesian</option>
  <option value="Irish">Irish</option>
  <option value="Italian">Italian</option>
  <option value="Japanese">Japanese</option>
  <option value="Javanese">Javanese</option>
  <option value="Korean">Korean</option>
  <option value="Latin">Latin</option>
  <option value="Latvian">Latvian</option>
  <option value="Lithuanian">Lithuanian</option>
  <option value="Macedonian">Macedonian</option>
  <option value="Malay">Malay</option>
  <option value="Malayalam">Malayalam</option>
  <option value="Maltese">Maltese</option>
  <option value="Maori">Maori</option>
  <option value="Marathi">Marathi</option>
  <option value="Mongolian">Mongolian</option>
  <option value="Nepali">Nepali</option>
  <option value="Norwegian">Norwegian</option>
  <option value="Persian">Persian</option>
  <option value="Polish">Polish</option>
  <option value="Portuguese">Portuguese</option>
  <option value="Punjabi">Punjabi</option>
  <option value="Quechua">Quechua</option>
  <option value="Romanian">Romanian</option>
  <option value="Russian">Russian</option>
  <option value="Samoan">Samoan</option>
  <option value="Serbian">Serbian</option>
  <option value="Slovak">Slovak</option>
  <option value="Slovenian">Slovenian</option>
  <option value="Spanish">Spanish</option>
  <option value="Swahili">Swahili</option>
  <option value="Swedish ">Swedish </option>
  <option value="Tamil">Tamil</option>
  <option value="Tatar">Tatar</option>
  <option value="Telugu">Telugu</option>
  <option value="Thai">Thai</option>
  <option value="Tibetan">Tibetan</option>
  <option value="Tonga">Tonga</option>
  <option value="Turkish">Turkish</option>
  <option value="Ukranian">Ukranian</option>
  <option value="Urdu">Urdu</option>
  <option value="Uzbek">Uzbek</option>
  <option value="Vietnamese">Vietnamese</option>
  <option value="Welsh">Welsh</option>
  <option value="Xhosa">Xhosa</option>
  </select>

<br>
  <p>Instructions for the experiment come in three forms:
  <br> (1) A single sentence instruction that is shown during the rating task above the sliders.
  <br> (2) A short general description of the task that is shown on the experiment listing on Onni's front page and on the informed consent page. 
  <br> (3) a longer detailed explanation of the instructions that is shown to the participant after the consent and before the rating task begins. 
  <br> Please input all three types of instructions below:
  </p>

          <label for="single_sentence_instruction">(1) Single sentence:</label>
          <input required type="text" class="form-control" id="single_sentence_instruction" name="single_sentence_instruction" placeholder="Input here" required>
      	    <br>
        <label for="short_instruction">(2) Short description:</label>
          <textarea class="form-control" rows="5" id="short_instruction" name="short_instruction" placeholder="Input here" required></textarea>
            <br>


        <label for="instruction">(3) Longer version:</label>
          <textarea class="form-control" rows="15" id="instruction" name="instruction" placeholder="Input here" required></textarea>
            <br>


        <label for="instruction">Please input consent form text</label>
          <textarea class="form-control" rows="15" id="consent_text" name="consent_text" placeholder="Input here" required></textarea>
            <br>


      </div>
    	</div>
        <br>													   
          <button type="submit" class="btn btn-primary">Submit</button>
      </form>

{% endblock %}