{% extends "base.html" %}
{% block header %}
  <div class="jumbotron-fluid">
    <h1 class="display-4">Appointments</h1>
  </div>
  <br>
  <br>
  <br>
  <hr class="my-4">
{% endblock header %}
{% block content %}
  <header>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">Appointments ({{ appt_id }})</h1>
        <p class="lead">Modifying details about appointment {{ appt_id }}. Hit the "Submit" button when finished.</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">
              <i class="fa fa-pen"></i>&nbsp;&nbsp;Submit
            </button>
          </div>
        </div>
      </div>
      <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 {% if data["study"]==v %}selected{% endif %} value="{{ k }}">{{ v }}</option>
                value="{{ k }}">{{ v }}
              {% 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 {% if data["status"]==v %}selected{% endif %} value="{{ k }}">{{ 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"
                   placeholder="{{ data['date'] }}"
                   value="{{ data['date'] }}"
                   required>
          </div>
          <label for="inputTaxiAddress" class="form-label">
            Taxi address&nbsp;&nbsp;<i class="fa fa-car"></i>
          </label>
          <input type="text"
                 class="form-control"
                 name="inputTaxiAddress"
                 rows="1"
                 placeholder="{{ data['taxi_address'] }}"
                 value="{{ data['taxi_address'] }}">
          <div class="form-check form-check-inline">
            <input class="form-check-input"
                   type="checkbox"
                   name="inputTaxiIsbooked"
                   id="inputTaxiIsbooked"
                   {% if data['taxi_isbooked']=='1' %}checked{% endif %}>
            <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-comment"></i>
            </label>
            <textarea class="form-control"
                      name="inputComments"
                      rows="3"
                      placeholder="{{ data['comments'] }}"
                      value="{{ data['comments'] }}"></textarea>
          </div>
        </div>
      </div>
    </form>
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
    </script>
  </body>
{% endblock content %}
