majors.page.tmpl

{{template "base" .}}

{{define "content"}}
    <div class="container">


        <div class="row">
            <div class="col">
                <img src="/static/images/marjors-suite.png"
                     class="img-fluid img-thumbnail mx-auto d-block room-image" alt="room image">
            </div>
        </div>


        <div class="row">
            <div class="col">
                <h1 class="text-center mt-4">Major's Suite</h1>
                <p>
                    Your home away form home, set on the majestic waters of the Atlantic Ocean, this will be a vacation
                    to remember.
                    Your home away form home, set on the majestic waters of the Atlantic Ocean, this will be a vacation
                    to remember.
                    Your home away form home, set on the majestic waters of the Atlantic Ocean, this will be a vacation
                    to remember.
                    Your home away form home, set on the majestic waters of the Atlantic Ocean, this will be a vacation
                    to remember.
                    Your home away form home, set on the majestic waters of the Atlantic Ocean, this will be a vacation
                    to remember.
                    Your home away form home, set on the majestic waters of the Atlantic Ocean, this will be a vacation
                    to remember.
                </p>
            </div>
        </div>


        <div class="row">

            <div class="col text-center">

                <a id="check-availability-button" href="#!" class="btn btn-success">Check Availability</a>

            </div>
        </div>




    </div>
{{end}}

{{define "js"}}
    <script>
        document.getElementById("check-availability-button").addEventListener("click", function () {
            let html = `
        <form id="check-availability-form" action="" method="post" novalidate class="needs-validation">
            <div class="form-row">
                <div class="col">
                    <div class="form-row" id="reservation-dates-modal">
                        <div class="col">
                            <input disabled required class="form-control" type="text" name="start" id="start" placeholder="Arrival">
                        </div>
                        <div class="col">
                            <input disabled required class="form-control" type="text" name="end" id="end" placeholder="Departure">
                        </div>

                    </div>
                </div>
            </div>
        </form>
        `;
            attention.custom({
                title: 'Choose your dates',
                msg: html,
            });
        })
    </script>
{{end}}