{% extends "base/main_base.html" %}

{% set active_page = "appointments" %}

{% block pagehead %}
    <title>add appointment</title>
{% endblock %}

{% block content %}

    <h2>Add Appointment</h2>

    <form action="/appointment/add" method="post">

        <label>Add Meeting</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-user-friends"></i></span>
            </div>
            <input required autocomplete="off" id="name" type="text" class="form-control" name="name"
                   placeholder="Name">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-calendar-day"></i></span>
            </div>
            <input id="noHistoricDates" required autocomplete="off" id="date" type="date" class="form-control" name="date"
                   min="" placeholder="">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="fa fa-clock"></i></span>
            </div>
            <input required autocomplete="off" id="time" type="time" class="form-control" name="time"
                   placeholder="">
        </div>
        <div class="input-group mb-3">
            <input required autocomplete="off" id="active" type="hidden" class="form-control" name="active" value="active"
                   placeholder="Active">
        </div>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <div class="input-group mb-3">
             <input required type="submit" class="btn btn-info" value="add">
        </div>

        <script>
            // Limit appointment date selections to current date and the future.
            // Format is yyyy-mm-dd according to section 2.4.5.2 of the W3C HTML 5.2 spec:
            // https://www.w3.org/TR/html52/infrastructure.html#valid-date-string
            (function() {
                document.getElementById("noHistoricDates").setAttribute("min", new Date().toISOString().split("T")[0]);
            })();
        </script>
    </form>
{% endblock %}