{% extends "base.html" %}
{% block header %}
  {{ super() }}
{% endblock header %}

{% block content %}
  {% include "partials/navbar.html" %}
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <ul class=flashes>
        {% for message in messages %}
        <li>{{ message }}</li>
        {% endfor %}
    </ul>
     {% endif %}
    {% endwith %}
  <div class="container">
    <h1> Add Experiments </h1>
    <form action="/experiment/add" method="POST" name="experiment">
       <div id="nameinput" class="input-group col-md-6">
          <span class="input-group-addon" id="basic-addon1">Name</span>
          <input type="text" class="form-control" name="name" id="name"
                 aria-describedby="basic-addon1"
                 placeholder="Name should be less than 100 characters">
       </div>
        <br>
      <div id="descriptioninput" class="input-group col-md-6">
        <span class="input-group-addon" id="basic-addon2">Description</span>
        <textarea type="text" class="form-control" rows="6" style="resize:none" name ="description" id="description" aria-describedby="basic-addon2"></textarea>
      </div>
        <br>
      <div id="start_dateinput" class="input-group col-md-6">
          <span class="input-group-addon" id="basic-addon3">Start Date</span>
          <input type="text" class="form-control datepicker" name="start_date" id="start_date" aria-describedby="basic-addon3">
      </div>
        <br>
      <div id="end_dateinput" class="input-group col-md-6">
          <span class="input-group-addon" id="basic-addon4">End Date</span>
          <input type="text" class="form-control datepicker" name="end_date" id="end_date" aria-describedby="basic-addon4">
      </div>
        <br>
      <button type="submit" class="btn btn-success">Next <i class="fas fa-arrow-right"></i></button>
    </form>
  </div>
{% endblock content %}