<!-- Modal -->
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="cartTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="cartTitle">Reservations</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <table class="table table-borderless table-hover" id="cart-table">
          <tbody>
            
          </tbody>
        </table>

        <div class="row justify-content-between">
          <a href="#" class="col-auto text-black-50" id="clear-cart">Clear All</a>
          <!-- <p class="col-auto font-weight-bold mb-0" id="cart-total-price"></p> -->
        </div>

        <div class="d-block text-danger text-center" id="error-message"></div>
      </div>

      <div class="modal-footer justify-content-center">
        <form>
          <div class="modal-form-element form-row d-none">
            <div class="form-group col-lg-4">
              <label for="cartName" class="sr-only">Name</label>
              <input type="text" class="form-control" id="cartName" placeholder="Name*" required>
            </div>
            <div class="form-group col-lg-4">
              <label for="cartEmail" class="sr-only">Email</label>
              <input type="email" class="form-control" id="cartEmail" placeholder="Email*" required>
            </div>
            <div class="form-group col-lg-4">
              <label for="cartPhone" class="sr-only">Phone Number</label>
              <input type="tel" class="form-control" id="cartPhone" placeholder="Phone Number*" required>
            </div>
          </div>

          <div class="modal-form-element form-group d-none">
            <label for="cartMsg" class="sr-only">Optional message to coach</label>
            <textarea class="form-control" id="cartMsg" placeholder="Optional message to coach"></textarea>
          </div>

          <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-outline-secondary mr-1" data-dismiss="modal">Close</button>

            <button type="button" class="btn btn-primary" id="order-btn">Reserve Now</button>
          </div>

        </form>
      </div>

    </div>
  </div>
</div>