<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <th:block th:insert="~{fragments/head}"></th:block>
    </head>
    <body>
    <th:block th:insert="~{fragments/header}"></th:block>
        <main class="container grid" style="grid-template-columns: 1fr 6fr;">
            <th:block th:insert="~{fragments/aside}"></th:block>
            <div class="container-fluid">
                <dialog>
                    <article>
                        <h2>Are you sure?</h2>
                        <p>
                            This action will <b>delete</b> a row from table.
                            <b>It cannot be undone!</b>
                        </p>
                        <footer>
                            <button onclick="hideModal()" class="secondary">
                                Cancel
                            </button>
                            <button id="dialog-btn" onclick="confirmDeletion(this)">Confirm</button>
                        </footer>
                    </article>
                </dialog>
                <th:block th:switch="${section}">
                    <th:block th:case="Preloaders">
                        <h2>Preloaders<a href="?section=Add&table=Preloaders"><img src="/file/svg/plus-square.svg" class="add-btn"></a></h2>
                        <table id="preloaders" aria-busy="true">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <h3>Promotions<a href="?section=Add&table=Promotions"><img src="/file/svg/plus-square.svg" class="add-btn"></a></h3>
                        <table id="promotions" aria-busy="true">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <h3>Promotion banners<a href="?section=Add&table=Banners"><img src="/file/svg/plus-square.svg" class="add-btn"></a></h3>
                        <table id="banners" aria-busy="true">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </th:block>
                    <th:block th:case="Locations">
                        <h2>Locations<a href="?section=Add&table=Locations"><img src="/file/svg/plus-square.svg" class="add-btn"></a></h2>
                        <table id="locations" aria-busy="true">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <h2>Location Objects<a href="?section=Add&table=LocationObjects"><img src="/file/svg/plus-square.svg" class="add-btn"></a></h2>
                        <table id="locationObjects" aria-busy="true">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </th:block>
                    <th:block th:case="Users">
                        <h2>Users</h2>
                        <table id="users" aria-busy="true">
                            <thead>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </th:block>
                    <th:block th:case="Add">
                        <blockquote id="error_response" style="display: none">
                            An internal server error occurred
                            <footer>
                                <cite>add entry request failed</cite>
                            </footer>
                        </blockquote>
                        <form th:data-table="${table_add}" style="max-width: 500px; margin-left: auto; margin-right: auto;">
                            <h2>Add entry to table <span th:text="${table_add}"></span></h2>
                        </form>
                    </th:block>
                    <th:block th:case="Settings">
                        <h2>Settings</h2>
                        <form>
                            <fieldset>
                                <label><input type="checkbox" name="replace_mrid" />Replace MRID's and TRID's with their values</label>
                            </fieldset>
                        </form>
                    </th:block>
                    <th:block th:case="*">
                        <h2>Dashboard</h2>
                        <div class="grid">
                            <div>
                                <h4>Uptime</h4>
                                <p id="uptime"></p>
                            </div>
                            <div>
                                <h4>Online</h4>
                                <p id="online"></p>
                            </div>
                            <div>
                                <h4>Users count</h4>
                                <p id="users_db"></p>
                            </div>
                        </div>
                        <h3>Logs</h3>
                        <article id="logs_div" aria-busy="true" style="overflow-y: scroll; max-height:750px;">
                        </article>
                    </th:block>
                </th:block>
            </div>
        </main>
        <script src="/file/_js/panel.js"></script>
        <script th:src="${script}"></script>
    </body>
</html>