<!DOCTYPE html>
<html lang="{{current_lang}}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{page_title}} - {{site_title}}</title>

    <!-- Skip to content link for accessibility -->
    <a href="#main-content" class="skip-link sr-only sr-only-focusable">Skip to main content</a>
    
    <!-- CMS Meta Tags -->
    <meta name="generator" content="{{site_title}} CMS">
    <meta name="application-name" content="{{site_title}}">
    <meta name="author" content="{{author_name}}">
    <meta name="creator" content="{{author_name}}">
    <meta name="publisher" content="{{author_name}}">
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="{{seo_description}}">
    <meta name="keywords" content="{{seo_keywords}}">
    
    <!-- Author Links -->
    <link rel="author" href="{{author_website}}">
    <link rel="me" href="{{author_git}}">
    
    <!-- Favicon and PWA -->
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#0a369d">

    <!-- Styles -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/css/bootstrap-icons.css" rel="stylesheet">
    <link href="/assets/css/style.css" rel="stylesheet">
    <link href="/assets/css/mobile.css" rel="stylesheet">
    
    <!-- Accessibility styles -->
    <style>
        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: #000;
            color: #fff;
            padding: 8px;
            text-decoration: none;
            z-index: 100;
        }
        .skip-link:focus {
            top: 6px;
            outline: 3px solid #0056b3;
            outline-offset: 2px;
        }
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .sr-only-focusable:focus {
            position: static;
            width: auto;
            height: auto;
            padding: inherit;
            margin: inherit;
            overflow: visible;
            clip: auto;
            white-space: normal;
        }
    </style>

    <!-- Dynamic theme colors -->
    <style>
        html, body {
            height: 100%;
        }
        
        body {
            display: flex;
            flex-direction: column;
        }
        
        #site-header {
            background-image: {{background_image_css}};
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
        }
        
        #site-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--header-bg);
            opacity: calc((100 - {{background_image_opacity}}) / 100);
            pointer-events: none;
            z-index: 0;
        }
        
        #site-header > * {
            position: relative;
            z-index: 1;
        }
        
        :root {
            --header-bg: {{header_color}};
            --header-font: {{header_font_color}};
            --header-height: {{header_height}}px;
            --nav-bg: {{navigation_color}};
            --nav-font: {{navigation_font_color}};
            --nav-height: {{nav_height}}px;
            --sidebar-bg: {{sidebar_background}};
            --sidebar-border: {{sidebar_border}};
        }
        
        /* Header styles */
        .navbar {
            background-color: var(--header-bg) !important;
            min-height: var(--header-height);
        }
        
        .navbar .navbar-brand,
        .navbar .navbar-text,
        .navbar .form-control,
        .navbar .btn {
            color: var(--header-font) !important;
        }
        
        .navbar .form-control::placeholder {
            color: rgba(255,255,255,0.7) !important;
        }
        
        .navbar .btn-outline-light {
            border-color: var(--header-font) !important;
        }
        
        /* Language dropdown styling */
        .dropdown-menu {
            background-color: var(--header-bg) !important;
            border: 1px solid var(--header-font) !important;
        }
        
        .dropdown-item {
            color: var(--header-font) !important;
        }
        
        .dropdown-item:hover {
            background-color: rgba(255,255,255,0.1) !important;
            color: var(--header-font) !important;
        }
        
        /* Hide Bootstrap dropdown arrow and use custom icon */
        .dropdown-toggle::after {
            display: none !important;
        }
        
        .btn-outline-light {
            color: var(--header-font) !important;
            border-color: var(--header-font) !important;
        }
        
        .btn-outline-light:hover {
            background-color: rgba(255,255,255,0.1) !important;
            color: var(--header-font) !important;
        }
        
        /* Fix button color when dropdown is open */
        .btn-outline-light:focus,
        .btn-outline-light:active,
        .show > .btn-outline-light.dropdown-toggle {
            background-color: rgba(255,255,255,0.1) !important;
            color: var(--header-font) !important;
            border-color: var(--header-font) !important;
            box-shadow: none !important;
        }
        
        .bi-chevron-down {
            font-size: 0.75em;
            margin-left: 0.25rem;
        }
        
        /* Remove Bootstrap default breadcrumb separators */
        .breadcrumb-item + .breadcrumb-item::before {
            content: "" !important;
            padding: 0 !important;
        }
        
        /* Custom breadcrumb styling */
        .breadcrumb {
            --bs-breadcrumb-divider: "";
        }

        .breadcrumb-item {
            color: var(--nav-font) !important;
        }

        .breadcrumb-item a {
            color: var(--nav-font) !important;
            text-decoration: none;
        }

        .breadcrumb-item a:hover {
            text-decoration: underline;
        }
        
        /* Sidebar toggle button in breadcrumb */
        .sidebar-toggle-item {
            display: flex;
            align-items: center;
            margin-right: 0.5rem;
        }
        
        .sidebar-toggle-btn {
            padding: 0;
            line-height: 1;
            font-size: 1.1rem;
            color: var(--header-bg) !important;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            cursor: pointer;
        }
        
        .sidebar-toggle-btn:hover {
            opacity: 0.7;
        }
        
        /* Sidebar hide/show transition */
        .sidebar-column {
            transition: all 0.3s ease;
        }
        
        .sidebar-hidden {
            display: none !important;
        }

        /* Navigation section background */
        .navigation-section {
            background-color: var(--nav-bg) !important;
            color: var(--nav-font) !important;
            min-height: var(--nav-height);
        }

        /* Enhanced accessibility styles */
        .focus-visible:focus,
        .btn:focus,
        .form-control:focus,
        .nav-link:focus {
            outline: 3px solid #0056b3 !important;
            outline-offset: 2px !important;
            box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0056b3 !important;
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            :root {
                --text-color: #000000;
                --bg-color: #ffffff;
                --border-color: #000000;
                --focus-color: #000000;
            }

            .btn-primary {
                background-color: #000000 !important;
                border-color: #000000 !important;
                color: #ffffff !important;
            }

            .btn-outline-light {
                color: #000000 !important;
                border-color: #000000 !important;
            }

            .text-muted {
                color: #000000 !important;
            }

            .navbar {
                background-color: #ffffff !important;
                border-bottom: 1px solid #000000 !important;
            }
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
        
        /* Remove nav-tabs background so it inherits from parent */
        .nav-tabs {
            background-color: transparent !important;
            border: none !important;
        }
        
        .nav-tabs .nav-link {
            background-color: transparent !important;
            border: none !important;
            color: var(--nav-font) !important;
        }
        
        .nav-tabs .nav-link:hover {
            background-color: rgba(255,255,255,0.1) !important;
        }
        
        .nav-tabs .nav-link.active {
            background-color: rgba(255,255,255,0.2) !important;
            border-bottom: 2px solid var(--nav-font) !important;
        }
        
        /* Sidebar styling */
        .sidebar-column {
            background-color: var(--sidebar-bg) !important;
            border-right: 1px solid var(--sidebar-border) !important;
            position: sticky;
            top: 0;
            min-height: calc(100vh - var(--header-height) - var(--nav-height) - 42px);
        }
        
        .sidebar {
            padding: 1.5rem;
            height: 100%;
            overflow-y: auto;
        }
        
        .content-column {
            background-color: #ffffff;
        }
        
        .content-wrapper {
            padding: 2rem;
            padding-bottom: 80px !important;
        }
        
        /* Ensure full height layout */
        .main-content {
            flex: 1;
        }
        
/* Mobile responsive */
        @media (max-width: 767.98px) {
            .sidebar-column {
                border-right: none !important;
                border-top: 1px solid var(--sidebar-border) !important;
                min-height: auto;
                margin-top: 1rem;
            }
            
            .content-column {
                background-color: #ffffff;
            }
            
            .content-wrapper {
                min-height: auto;
                padding-bottom: 2rem !important;
            }
        }
        
        /* Tablet and mobile: sidebar below content */
        @media (max-width: 991.98px) {
            .sidebar-column {
                order: 2 !important;
            }
            
            .content-column {
                order: 1 !important;
            }
        }
        
        /* Footer icon hover effects */
        .footer-icon {
            color: #6c757d;
            text-decoration: none;
            transition: all 0.2s ease-in-out;
            display: inline-block;
            padding: 2px;
        }
        
        .footer-icon:hover {
            color: #0d6efd;
            transform: translateY(-1px);
        }
        
        .footer-icon:active {
            transform: translateY(0);
        }
        
        /* Specific icon hover colors */
        .footer-icon.guide:hover {
            color: #198754;
        }
        
        .footer-icon.cms:hover {
            color: #dc3545;
        }
        
        .footer-icon.git:hover {
            color: #6f42c1;
        }
        
        .footer-icon.website:hover {
            color: #fd7e14;
        }
    </style>
</head>
<body>
    {{>header}}

    <nav role="navigation" aria-label="Main navigation" id="site-navigation">
        {{>navigation}}
    </nav>
    
    <nav id="site-breadcrumb" class="breadcrumb-section bg-light border-bottom" aria-label="Breadcrumb navigation">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 py-2">
                    <h2 class="sr-only">Breadcrumb Navigation</h2>
                    {{{breadcrumb}}}
                </div>
            </div>
        </div>
    </nav>
    
    <main role="main" id="main-content" class="main-content" style="padding: 0;">
        {{#sidebar_content}}
            {{#equal layout "sidebar-content"}}
            <div class="row g-0">
                <aside role="complementary" aria-label="Sidebar content" id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2 order-md-1">
                    <div class="sidebar h-100">
                        {{{sidebar_content}}}
                    </div>
                </aside>
                <section id="site-content" class="col-lg-9 col-md-8 content-column order-1 order-md-2">
                    <div class="content-wrapper p-4">
                        {{>content_template}}
                    </div>
                </section>
            </div>
            {{/equal}}
            
            {{#equal layout "content"}}
            <div class="container">
                <section id="site-content" class="col-12">
                    <div class="content-wrapper p-4">
                        {{>content_template}}
                    </div>
                </section>
            </div>
            {{/equal}}
            
            {{#equal layout "sidebar"}}
            <div class="container-fluid">
                <aside id="site-sidebar" class="col-12 sidebar-column">
                    <div class="sidebar">
                        {{{sidebar_content}}}
                    </div>
                </aside>
            </div>
            {{/equal}}
            
            {{#equal layout "content-sidebar"}}
            <div class="row g-0">
                <section id="site-content" class="col-lg-9 col-md-8 content-column order-1">
                    <div class="content-wrapper p-4">
                        {{>content_template}}
                    </div>
                </section>
                <aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column order-2">
                    <div class="sidebar h-100">
                        {{{sidebar_content}}}
                    </div>
                </aside>
            </div>
            {{/equal}}
            
            {{#equal layout "content-sidebar-reverse"}}
            <div class="row g-0 flex-row-reverse">
                <section id="site-content" class="col-lg-9 col-md-8 content-column">
                    <div class="content-wrapper p-4">
                        {{>content_template}}
                    </div>
                </section>
                <aside id="site-sidebar" class="col-lg-3 col-md-4 sidebar-column">
                    <div class="sidebar h-100">
                        {{{sidebar_content}}}
                    </div>
                </aside>
            </div>
            {{/equal}}
        {{/sidebar_content}}
        {{^sidebar_content}}
        <div class="container">
            <section id="site-content" class="col-12">
                <div class="content-wrapper p-4">
                    {{>content_template}}
                </div>
            </section>
        </div>
        {{/sidebar_content}}
    </main>
    
    <footer role="contentinfo" id="site-footer">
        {{>footer}}
    </footer>
    
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/app.js"></script>
</body>
</html>