{% extends "_base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">Appointment {{ apt_id }}&nbsp;&nbsp;<i class="fa fa-calendar"></i></h1>
      <p class="lead">Modifying details about appointment {{ apt_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="div-center">
      <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>
    <div class="div-center">
      <div class="card card-input">
        <div class="card-header ">Appointment information</div>
        <div class="card-body">
          <div class="col">
            <input type="hidden" class="form-group" name="inputId" value="{{ ppt_id }}" readonly>
            <input type="hidden" class="form-group" name="inputAptId" value="{{ apt_id }}" readonly>
            <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="3" value="{{ data['taxi_address'] }}"
            placeholder="{{ 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">Taxi booked</label>
          </div>
          <div class="form-group">
            <label for="inputComments" class="form-label">
              Comments&nbsp;&nbsp;<i class="fa  fa-comment"></i>
            </label>
            <input type="text" class="form-control" name="inputComments" rows="3" value="{{ data['comments'] }}"
              placeholder="{{ data['comments'] }}" />
          </div>
        </div>
      </div>
    </div>
  </form>
  <script>
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        var forms = document.getElementsByClassName('needs-validation');
        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 %}