<!DOCTYPE html>
<html lang="en">
<head>
    <title>@yield("title")</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @if(request()->cookie("mode") == "dark")
        <link type="text/css" rel="stylesheet" href="{{ mix("/css/webappdark.css") }}">
    @else
        <link type="text/css" rel="stylesheet" href="{{ mix("/css/webapp.css") }}">
    @endif

    <script type="text/javascript">
        function setMain() {
            var main = document.getElementsByTagName("main")[0];
            var header = document.getElementsByTagName("header")[0];
            main.style.minHeight = 'calc(100% - ' + header.clientHeight + 'px)';
        }
    </script>
</head>
<body>

<main style="justify-content: unset">
    <h1 class="sde-blue" style="font-size: 12vw; text-align: center">{{__("msg.error")}}</h1>
    <p class="mb-0" style="text-align: center; font-size: 4vw;">{{__("msg.404")}}</p>
</main>

<script src="{{ mix("/js/app.js") }}"></script>
@if(request()->cookie("mode") == "dark")
    <script type="text/javascript">
        function toggleMenu(menu) {
            let menuElement = document.getElementById(menu);
            let logoElement = document.getElementById("sdeLogo");
            let htmlElement = document.getElementsByTagName('html')[0];
            let bodyElement = document.getElementsByTagName('body')[0];
            let mainElement = document.getElementsByTagName('main')[0];
            let iconElement = document.getElementById("icon");
            let headerElement = document.getElementById("header");

            if(menuElement.classList.contains("hide")) {
                menuElement.classList.remove("hide");
                mainElement.classList.remove("d-none");
                htmlElement.style.backgroundColor = '';
                bodyElement.style.backgroundColor = '#666666';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-times");
                iconElement.classList.add("fa-bars");
                headerElement.style.backgroundColor = '';
            } else {
                menuElement.classList.add("hide");
                mainElement.classList.add("d-none");
                htmlElement.style.backgroundColor = 'rgb(0, 120, 138)';
                bodyElement.style.backgroundColor = 'rgb(0, 120, 138)';
                logoElement.src = '/images/logos/Logo-hvid.svg';
                iconElement.classList.remove("fa-bars");
                iconElement.classList.add("fa-times");
                headerElement.style.backgroundColor = 'rgb(0, 120, 138)';
            }
        }

        if(document.getElementById("toggle"))
            document.getElementById("toggle").onclick = function () {
                toggleMenu('menu');
            };
    </script>
@endif
@yield("scripts")
<script>
    function onLoadRedirect(){
        setTimeout(function () {
            if(window.history.back() !== undefined)
                window.location.href = window.history.back();
            else
                window.location.href = "{{route("root.index")}}";
        }, 3000)
    }
</script>
</body>
</html>