udemy-go-web-1/templates/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 mx-auto d-block img-thumbnail room-image"
                alt="room page">
        </div>
    </div>
    <div class="row">
        <div class="col">
            <h1 class="text-center mt-3">Major's Suite</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed convallis urna, vitae congue
                odio. Sed pulvinar diam a odio tristique, nec porta eros suscipit. Sed lacinia ut nisl ultrices
                condimentum. Vivamus imperdiet sapien sit amet mauris ornare accumsan. Proin varius imperdiet
                gravida. Suspendisse posuere velit leo, sit amet egestas quam porta quis. Duis in nulla eu quam
                iaculis iaculis. Etiam commodo gravida venenatis. Phasellus in vehicula est, aliquam condimentum
                nisi. In id ligula lacinia, varius leo vel, tincidunt libero. Nullam cursus vel lectus at consequat.
                Quisque malesuada efficitur sem et sollicitudin. Donec eget tincidunt arcu. Quisque ut posuere ex.
            </p>
        </div>
    </div>

    <div class="row">
        <div class="d-flex justify-content-center py-3">
            <button id="check-availability" class="btn btn-success">Check Availability</button>
        </div>
    </div>
</div>
{{end}}
{{define "js"}}
<script>
    document.getElementById("check-availability").addEventListener('click', () => {
        let html = `
                <form action="reservation.html" method="get" novalidate class="needs-validation">
                    <div id="reservation-dates-modal" class="row">
                        <div class="col mb-3">
                            <input disabled required type="text" class="form-control" name="start" id="start" placeholder="Arrival">
                        </div>
                        <div class="col mb-3">
                            <input disabled required type="text" class="form-control" name="end" id="end" placeholder="Departure">
                        </div>
                    </div>
                </form>
            `;
        Prompt().custom({title: "Choose your dates", msg: html})
    });
</script>
{{end}}