{{define "base"}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker-bulma.min.css">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
    <link href="/static/css/style.css" rel="stylesheet">
    {{block "css" .}}

    {{end}}
</head>

<body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">About</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                            aria-expanded="false">
                            Rooms
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/generals-quarters">General's Quarters</a></li>
                            <li><a class="dropdown-item" href="/majors-suite">Major's Suite</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/reservation">Book Now</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <body>
        {{block "content" .}}
        {{end}}

        <div class="row">
            <footer class="py-3 my-4">
                <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                    <li class="nav-item"><a href="/" class="nav-link px-2 text-body-secondary">Home</a></li>
                    <li class="nav-item"><a href="/contact" class="nav-link px-2 text-body-secondary">Contact</a></li>
                    <li class="nav-item"><a href="/about" class="nav-link px-2 text-body-secondary">About</a></li>
                </ul>
                <p class="text-center text-body-secondary">© 2024 Company, Inc</p>
            </footer>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
        <script src="https://unpkg.com/notie"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
            (() => {
                'use strict'

                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                const forms = document.querySelectorAll('.needs-validation')

                // Loop over them and prevent submission
                Array.from(forms).forEach(form => {
                    form.addEventListener('submit', event => {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                    }, false)
                })
            })()

            // notie
            function notify(msg, msgType) {
                notie.alert({
                    type: msgType,
                    text: msg,
                });
            }

            // sweetalert2
            function notifyModal(title, text, icon, confirmButtonText) {
                Swal.fire({
                    title: title,
                    text: text,
                    icon: icon,
                    confirmButtonText: confirmButtonText
                })
            }

            // Prompt is out Javascript module for all alerts, notifications, and custom popup dialogs
            function Prompt() {
                let toast = function (c) {
                    const {
                        msg = "",
                        icon = "success",
                        position = "top-end",
                    } = c

                    const Toast = Swal.mixin({
                        toast: true,
                        title: msg,
                        position: position,
                        icon: icon,
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })
                    Toast.fire({})
                }

                let success = function (c) {
                    const {
                        msg = "",
                        title = "",
                        footer = "",
                    } = c

                    Swal.fire({
                        icon: 'success',
                        title: title,
                        text: msg,
                        footer: footer,
                    })
                }

                let error = function (c) {
                    const {
                        msg = "",
                        title = "",
                        footer = "",
                    } = c

                    Swal.fire({
                        icon: 'error',
                        title: title,
                        text: msg,
                        footer: footer,
                    })
                }

                async function custom(c) {
                    const {
                        msg = "",
                        title = "",
                    } = c;

                    const {value: formValues} = await Swal.fire({
                        title: title,
                        html: msg,
                        backdrop: false,
                        focusConfirm: false,
                        showCancelButton: true,
                        willOpen: () => {
                            console.log("test")
                            const elem = document.getElementById('reservation-dates-modal')
                            const rp = new DateRangePicker(elem, {
                                "format": "yyyy-mm-dd",
                                showOnFocus: true,
                            });
                        },
                        didOpen: () => {
                            return [
                                document.getElementById('start').removeAttribute("disabled"),
                                document.getElementById('end').removeAttribute("disabled"),
                            ]
                        },
                        preConfirm: () => {
                            return [
                                document.getElementById('start').value,
                                document.getElementById('end').value,
                            ]
                        },
                    })

                    if (formValues) {
                        Swal.fire(JSON.stringify(formValues))
                    }
                }

                return {
                    toast: toast,
                    success: success,
                    error: error,
                    custom: custom,
                }
            }

        </script>

        {{block "js" .}}
        {{end}}
    </body>

</html>
{{end}}
