{{define "head"}}
    <link rel="apple-touch-icon" sizes="180x180" href="../static/icons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../static/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../static/icons/favicon-16x16.png">
    <link rel="manifest" href="../static/icons/site.webmanifest">
    <link rel="mask-icon" href="../static/icons/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
{{end}}

{{define "navbar"}}
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">SuperSafe</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="ms-auto navbar-nav mb-2 mb-lg-0">
                    <li class="nav-item me-2">
                        <a id="button-tasks" class="btn btn-primary" href="/tasks">Tasks</a>
                    </li>
                    <li class="nav-item me-2">
                        <a id="button-login" class="btn btn-primary" href="/login">Login</a>
                    </li>
                    <li class="nav-item">
                        <button id="button-logout" class="btn btn-danger" onclick="logout()">Logout</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
{{end}}

{{define "userForm"}}
    <form class="row g-3 needs-validation mb-3" novalidate>
        <div class="col-12">
            <label for="username" class="form-label">Username</label>
            <div class="input-group has-validation">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
                <input type="text" class="form-control" id="username"
                       aria-describedby="inputGroupPrepend" required>
                <div class="invalid-feedback">
                    Please choose a username.
                </div>
            </div>
        </div>
        <div class="col-12">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" aria-describedby="passwordHelp" required>
            <div id="invalidPassword" class="invalid-feedback">
                Please choose a password.
            </div>
        </div>
        <div class="col-12">
            <button class="btn btn-primary" id="button" type="submit">Submit form</button>
        </div>
    </form>
{{end}}

{{define "scripts"}}
    <script>
        const button_logout = document.getElementById("button-logout");
        const username = getCookie("username");
        const myHeaders = new Headers();
        myHeaders.append('username', username);

        function setCookie(cookie_name, cookie_value, cookie_expiry) {
            const d = new Date();
            d.setTime(d.getTime() + (cookie_expiry * 24 * 60 * 60 * 1000));
            let expires = "expires=" + d.toUTCString();
            document.cookie = cookie_name + "=" + cookie_value + ";" + expires + ";path=/;SameSite=Lax"
        }

        function deleteCookie(cookie_name) {
            document.cookie = cookie_name + "=" + ";expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;SameSite=Lax"
        }

        function getCookie(cookie_name) {
            let name = cookie_name + "=";
            let decodedCookie = decodeURIComponent(document.cookie);
            let cookieArray = decodedCookie.split('; ');
            let result;
            cookieArray.forEach(val => {
                if (val.indexOf(name) === 0) result = val.substring(name.length);
            })
            return result;
        }

        function redirect(location) {
            window.location.href = location;
        }

        async function userLoggedIn() {
            const response = await fetch("/user", {method: 'GET', headers: myHeaders});
            const json = await response.json();
            return json.logged_in
        }

        async function logout() {
            button_logout.disabled = true;
            let data = new FormData();
            data.append("username", username);
            const response = await fetch("/logout", {method: 'POST', body: data});
            deleteCookie("username");
            response.ok && redirect("/");
        }
    </script>
{{end}}

{{define "formScripts"}}
    <script>
        let form = document.querySelector('.needs-validation')
        if (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                } else {
                    document.getElementById("button").disabled = true;
                    event.preventDefault();
                    let data = new FormData();
                    let form_element = document.getElementsByClassName('form-control');
                    for (let i = 0; i < form_element.length; i++) {
                        data.append(form_element[i].id, form_element[i].value);
                    }
                    submitForm(data);
                }
                form.classList.add('was-validated');
            }, false);
        }
    </script>
{{end}}