<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/icons/favicon.ico">

    <title>{{.title}}</title>
 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <!-- popper.js@1.16.0 -->
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/jquery-ui.min.js"></script>
    <script src="/static/js/actions-1.0.0.js"></script>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <!-- JQueryUI base CSS -->
    <link rel="stylesheet" href="/static/css/jquery-ui.min.css"/>

    <!-- Custom styles for this template -->
    <link href="/static/css/narrow-jumbotron.css" rel="stylesheet">
    <style>
        body {
            /* Add padding to the top of the body to prevent content from being hidden under the sticky header */
            padding-top: 1rem;
        }
        .header {
            /* Make the header sticky */
            position: sticky;
            top: 0;
            /* Ensure it stays on top of other content */
            z-index: 1020; 
            /* Give it a solid background to prevent content from showing through */
            background-color: #fff; 
            /* Add some padding and a border for better visual separation */
            padding-top: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e5e5e5;
        }
        .logo {
            /* Control the size of the logo image */
            max-height: 128px;
            width: auto;
            position: fixed;
            margin-top: -20px;
            margin-left: -40px;
        }
        .copyleft {
        display: inline-block;
        -moz-transform: scale(-1, 1);
        -webkit-transform: scale(-1, 1);
        -o-transform: scale(-1, 1);
        -ms-transform: scale(-1, 1);
        transform: scale(-1, 1);
        }

    </style>
</head>

<body>

<div class="container">
    <!-- Navigation -->
    <div class="header clearfix">
        <nav>
            <ul class="nav nav-pills float-right">
                <li class="nav-item">
                    <a class="nav-link nav-hosts" href="/@/hosts">Hosts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-cnames" href="/@/cnames">CNames</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-logs" href="/@/logs">Logs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-security" href="/@/security" title="Security"> 🔒 </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-logout" href="/@/logout" id="logout"> ⏏️ </a>
                </li>
            </ul>
        </nav>
        <!-- Conditionally display logo or title text -->
        {{ if .logoPath }}
            <a href="/@/hosts"><img src="{{.logoPath}}" alt="{{.title}}" class="logo"></a>
        {{ else }}
            <h3 class="text-muted">{{.title}}</h3>
        {{ end }}
    </div>

    <!-- Page Content -->
    {{template "content" .}}

    <footer class="footer">
        <p><span class="copyleft">&copy;</span> <a href="{{.poweredByUrl}}" target="_blank">{{.poweredBy}}</a> {{year}}</p>
    </footer>

</div> <!-- /container -->

</body>
</html>