<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>openCountdown - Admin</title>
    <meta name="description" content="openCountdown">
    <meta name="author" content="TheGreydiamond">


    <link rel="stylesheet" href="/css/bootstrap-icons.css">
    <link rel="stylesheet" href="/mdbootstrap/css/style.css">

    <script src="/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/mdbootstrap/js/mdb.min.js"></script>

    <script type="text/javascript" src="/js/darkreader.js"></script>
    <script type="text/javascript" src="/js/cookie.js"></script>
    <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/mainStyle.css" rel="stylesheet">
    <link rel="stylesheet" href="/coloris/coloris.min.css" />
    <link rel="stylesheet" href="/bootstrap-duration-picker/bootstrap-duration-picker.css" />
    <link rel="stylesheet" href="/flatpickr/dist/flatpickr.min.css" />
    <script src="/bootstrap-duration-picker/bootstrap-duration-picker-debug.js"></script>
    <script src="/coloris/coloris.min.js"></script>

    <script type="text/javascript" src="/flatpickr/dist/flatpickr.js"> </script>

    <link rel="stylesheet" href="/css/bootstrap-icons.css">
</head>

<body>

    <main>
        <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark trans" style="width: 250px;"
            id="navbarToggleExternalContent">
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
                <svg class="bi me-2" width="40" height="32">
                    <use xlink:href="#bootstrap" />
                </svg>
                <span class="fs-4">Sidebar</span>
            </a>
            <hr>
            <ul class="nav nav-pills flex-column mb-auto">
                <li class="nav-item">
                    <a href="#homeP" class="nav-link active" aria-current="page" id="PageIndex">
                        <i class="bi bi-house-door"></i>
                        Home
                    </a>
                </li>
            </ul>
            <hr>
            openCountdown <div class="btn-group" role="group" aria-label="Basic radio toggle button group">

                <input type="radio" class="btn-check" name="btnradio2" id="Mbtnradio1" autocomplete="off" checked>
                <label class="btn btn-outline-primary" for="Mbtnradio1"><svg xmlns="http://www.w3.org/2000/svg"
                        width="16" height="16" fill="currentColor" class="bi bi-brightness-high-fill"
                        viewBox="0 0 16 16">
                        <path
                            d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
                    </svg>
                </label>

                <input type="radio" class="btn-check" name="btnradio2" id="Mbtnradio2" autocomplete="off">
                <label class="btn btn-outline-primary" for="Mbtnradio2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-moon-fill" viewBox="0 0 16 16">
                        <path
                            d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
                    </svg>
                </label>

                <input type="radio" class="btn-check" name="btnradio2" id="Mbtnradio3" autocomplete="off">
                <label class="btn btn-outline-primary" for="Mbtnradio3">
                    Auto
                </label>

            </div>
        </div>
        <pages class="d-flex flex-fill" id="pageCont" class="z-index: 50;">


            <page id="homeP" class="pageC flex-fill overflow-auto">

                <div class="container">
                    <div class=""
                        style=" display: flex;align-items: center;justify-content: center; flex-wrap: wrap; flex-direction: column;">

                        <h1>Oh no!</h1>
                        <h1>
                            <i class="bi bi-translate"></i>
                        </h1>
                        <h5>
                            There is a critical error with the current language template. Please select a diffrent
                            language.
                        </h5>
                        <label for="lang">Please choose a language: </label>
                        <select name="lang" id="lang">
                            <% it.additional.languages.forEach(function(lang){ %>
                                <option value="<%= lang %>">
                                    <%= lang %>
                                </option>
                                <% }) %>
                        </select>
                        <button id="applyLang" class="btn btn-outline-success">
                            Apply & Reload
                        </button>

                    </div>
                </div>

            </page>
        </pages>
    </main>
    <script type="text/javascript" src="js/jsonview.js"></script>
    <script type="text/javascript" src="/js/interface.js"> </script>
    <script type="text/javascript">

        Coloris({
            el: '.coloris',
            alpha: false,
        });
        $(function () {
            $('[data-toggle="tooltip"]').tooltip({ container: "body" })
        })
        $("#applyLang").on("click", function (event) {
            const lang = $("#lang").val()
            saveOption("/api/ui/v1/lang/set?lang=" + lang, function handleLangSelect(event, xmlHttp) {
                const temp = JSON.parse(xmlHttp.responseText)
                if (temp.status == "error") {
                    alert("Request failed reason: " + temp.reason)
                } else {
                    location.reload()
                }
                console.log(JSON.parse(xmlHttp.responseText))
            })
        })

    </script>

</body>

</html>