{% extends "base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Appointments</h1>
      <p class="lead">
        New appointment for participant <a href="{{ url_for('record_id', ppt_id = ppt_id) }}">{{ ppt_id }}</a>
      </p>
    </div>
  </div>
  <hr class="my-4">
</header>

<body>
  <form class=" form needs-validation" method="post" novalidate>
    <div class="card card-input">
      <h5 class="card-header">Appointment information</h5>
      <div class="card-body">
        <div class="col">
          <label for="inputStudy" class="form-label">
            Study&nbsp;&nbsp;<i class="fa  fa-flask"></i>
          </label>
          <select class="form-select" name="inputStudy" required>
            <option disabled selected value>-- Select one --</option>
            {% for k, v in data_dict["appointment_study"].items() %}<option value="{{ k }}">{{ v }}</option>{% endfor %}
          </select>
          <label for="inputStatus" class="form-label">
            Appointment status&nbsp;&nbsp;<i class="fa  fa-check"></i>
          </label>
          <select class="form-select" name="inputStatus" required>
            <option disabled selected value>-- Select one --</option>
            {% for k, v in data_dict["appointment_status"].items() %}
            <option value="{{ k }}" {% if v=="Scheduled" %}selected{% endif %}>{{ v }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group">
          <label class="form-label" for="inputDate">
            Appointment date&nbsp;&nbsp;<i class="fa  fa-calendar"></i>
          </label>
          <input type="datetime-local" name="inputDate" required>
        </div>
        <label for="inputTaxiAddress" class="form-label">
          Taxi address&nbsp;&nbsp;<i class="fa fa-car"></i>
        </label>
        <textarea class="form-control" name="inputTaxiAddress" rows="1"></textarea>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="checkbox" name="inputTaxiIsbooked" id="inputTaxiIsbooked" value="1">
          <label class="form-check-label" for="inputTaxiIsbooked">Is the taxi booked?</label>
        </div>
        <div class="form-group">
          <label for="inputComments" class="form-label">
            Comments&nbsp;&nbsp;<i class="fa  fa-user-comment"></i>
          </label>
          <textarea class="form-control" name="inputComments" rows="3"></textarea>
        </div>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</body>
{% endblock content %}