<!DOCTYPE html>
<html lang="en">
    <!--
     * app/templates/admin/admin.tpl
     *
     * @version 5.0.1
     * @author  Joey Kimsey <Joey@thetempusproject.com>
     * @link    https://TheTempusProject.com
     * @license https://opensource.org/licenses/MIT [MIT LICENSE]
    -->
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{TITLE}</title>
        <meta name="description" content="{PAGE_DESCRIPTION}">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {AUTHOR}
        {ROBOT}
        <link rel="icon" href="{ROOT_URL}images/favicon.ico">
        <!-- Required CSS -->
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
        <link rel="stylesheet" href="{BOOTSTRAP_CDN}css/bootstrap.min.css" crossorigin="anonymous">
        <!-- Custom styles for this template -->
        {TEMPLATE_CSS_INCLUDES}
    </head>
    <body>
        <div class="d-flex flex-column min-vh-100">
            <!-- Main Content Area -->
            <div class="d-flex flex-grow-1">
                <!-- Side Navigation -->
                <div class="d-flex flex-column p-md-3 text-bg-dark">
                    <div class="collapse d-md-block" id="mainMenu">
                        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none justify-content-center">
                            <img src="{ROOT_URL}{LOGO}" class="bi me-2" height="48" role="img" aria-label="{SITENAME} Logo">
                        </a>
                        <div class="border-top border-bottom border-white mt-4 mb-2 pt-3 pb-5">
                            {ADMIN}
                                {ADMIN_LINKS}
                            {/ADMIN}
                        </div>
                        <div class="d-flex align-items-center p-2">
                            {topNavRight}
                        </div>
                    </div>
                </div>
                <!-- Center Element -->
                <div class="flex-grow-1 d-flex flex-column">
                    <!-- Top Navigation Bar -->
                    <div class="p-2 text-bg-dark">
                        <div class="d-flex justify-content-between justify-content-md-center">
                            <div class="d-flex flex-wrap align-items-center justify-content-lg-start">
                                {topNavLeft}
                            </div>
                            <div class="mx-3 d-md-none">
                                <button class="my-3 btn btn-lg btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Toggle navigation">
                                    <i class="fa fa-bars"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Main Content -->
                    <div class="flex-grow-1 px-4 py-4">
                        {ISSUES}
                        <div class="row mb-3">
                            <div class="col-12">
                                {ERROR}
                                {NOTICE}
                                {SUCCESS}
                            </div>
                        </div>
                        {/ISSUES}
                        {CONTENT}
                    </div>
        
                    <!-- Footer -->
                    <div class="container mt-auto border-top context-main-border">
                        <footer class="pt-0">
                            <div class="d-md-block collapse" id="footerMenu">
                                <div class="d-flex justify-content-between align-items-center py-2 my-2">
                                    <a href="/" class="text-decoration-none lh-1 d-flex align-items-center px-md-5 mx-md-5">
                                        <img src="{ROOT_URL}images/logo.png" class="bi me-2" width="40" height="32" alt="Joey Kimsey Logo">
                                    </a>
                                    <div class="material-switch d-flex align-items-center">
                                        <input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input">
                                        <label for="dark-mode-toggle" class="label-default"></label>
                                    </div>
                                    <ul class="list-unstyled d-flex align-items-center mb-0">
                                        <li class="ms-3">
                                            <a class="context-main" href="{ROOT_URL}fb">
                                                <span class="fa-brands fa-fw fa-facebook"></span>
                                            </a>
                                        </li>
                                        <li class="ms-3">
                                            <a class="context-main" href="{ROOT_URL}twitter">
                                                <span class="fa-brands fa-fw fa-twitter"></span>
                                            </a>
                                        </li>
                                        <li class="ms-3">
                                            <a class="context-main" href="{ROOT_URL}in">
                                                <span class="fa-brands fa-fw fa-linkedin"></span>
                                            </a>
                                        </li>
                                        <li class="ms-3">
                                            <a class="context-main" href="{ROOT_URL}youtube">
                                                <span class="fa-brands fa-fw fa-youtube"></span>
                                            </a>
                                        </li>
                                        <li class="ms-3">
                                            <a class="context-main" href="{ROOT_URL}git">
                                                <span class="fa-brands fa-fw fa-github"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="d-flex justify-content-center justify-content-md-center text-center text-md-center my-2">
                                    <span>© 2025 {SITENAME}, Powered by <a href="https://thetempusproject.com" class="text-decoration-none">The Tempus Project</a></span>
                                </div>
                            </div>
                            <div class="text-center">
                                <button class="d-md-none my-3 btn btn-lg context-main context-main-border" type="button" data-bs-toggle="collapse" data-bs-target="#footerMenu" aria-controls="footerMenu" aria-expanded="false" aria-label="Toggle footer navigation">
                                    <i class="fa fa-bars"></i>
                                </button>
                            </div>
                        </footer>
                    </div>

                </div>
            </div>
        </div>

        <!-- Bootstrap core JavaScript and jquery -->
        <script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
        <script language="JavaScript" crossorigin="anonymous" type="text/javascript" src="{BOOTSTRAP_CDN}js/bootstrap.min.js"></script>
        <!-- Custom javascript for this template -->
        {TEMPLATE_JS_INCLUDES}
    </body>
</html>