{{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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
{{end}}

{{define "toasts"}}
    <div class="position-absolute bottom-0 end-0 mb-3 me-3">
        <div id="errorToast" class="toast align-items-center text-white bg-danger border-0" role="alert"
             aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div id="errorToastContent" class="toast-body">
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
            </div>
        </div>
    </div>
    <div class="position-absolute bottom-0 end-0 mb-3 me-3">
        <div id="successToast" class="toast align-items-center text-white bg-success border-0" role="alert"
             aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div id="successToastContent" class="toast-body">
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                        aria-label="Close"></button>
            </div>
        </div>
    </div>
{{end}}

{{define "navbar"}}
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">Florian Hoss</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 hidden id="button-tasks" class="btn btn-primary" href="/view/tasks">Tasks</a>
                    </li>
                    <li class="nav-item me-2">
                        <a id="button-login" class="btn btn-primary" href="/view/login">Login</a>
                    </li>
                    <li class="nav-item">
                        <button hidden 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. It cannot include whitespaces.
                </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. It cannot include whitespaces.
            </div>
        </div>
        <div class="col-12">
            <button class="btn btn-primary" id="button" type="submit">Submit form</button>
        </div>
    </form>
{{end}}

{{define "scripts"}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const button_logout = document.getElementById("button-logout");
        const username = getCookie("username");
        const axiosConfig = {
            headers: {
                username: username,
            }
        };

        const errorToastEl = document.getElementById('errorToast');
        const errorToastContent = document.getElementById('errorToastContent');
        const errorToast = new bootstrap.Toast(errorToastEl, {delay: 3000})
        const successToastEL = document.getElementById('successToast');
        const successToastContent = document.getElementById('successToastContent');
        const successToast = new bootstrap.Toast(successToastEL, {delay: 3000});

        function showErrorToast(message) {
            errorToastContent.innerText = message;
            errorToast.show();
        }

        function showSuccessToast(message) {
            successToastContent.innerText = message;
            successToast.show();
        }

        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 axios.get("/auth/user", axiosConfig);
            if (response.data.logged_in === true) {
                document.getElementById("button-login").hidden = true;
                button_logout.hidden = false;
                document.getElementById("button-tasks").hidden = false;
            }
            return response.data.logged_in
        }

        async function logout() {
            button_logout.disabled = true;
            let data = new FormData();
            data.append("username", username);
            const response = await fetch("/auth/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) {
                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);
            }, false);
        }
    </script>
{{end}}