{{template "base" .}}
{{define "content"}}
<div class="container">
    <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <h1 class="text-center mt-5">Search for Availability</h1>

            <form action="/availability" method="post" novalidate class="needs-validation">
                <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                <div id="reservation-dates" class="row">
                    <div class="col mb-3">
                        <input required type="text" class="form-control" name="start" placeholder="Arrival">
                    </div>
                    <div class="col mb-3">
                        <input required type="text" class="form-control" name="end" placeholder="Departure">
                    </div>
                </div>
                <div class="mb-3">
                    <button type="submit" class="btn btn-primary mb-3">Search Availability</button>
                </div>
            </form>

        </div>
    </div>
</div>
{{end}}

{{define "js"}}
<script>
    // vanillajs-datepicker
    const elem = document.getElementById('reservation-dates');
    const rangepicker = new DateRangePicker(elem, {
        "format": "yyyy-mm-dd",
        "minDate": new Date(),
    });
</script>
{{end}}