<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{page_title}} - {{site_title}}</title>
    
    <!-- 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 Styles -->
    <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
    <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">
    
    <!-- Dynamic theme colors -->
    <style>
        :root {
            --header-bg: {{header_color}};
            --header-font: {{header_font_color}};
            --nav-bg: {{navigation_color}};
            --nav-font: {{navigation_font_color}};
            --sidebar-bg: {{sidebar_background}};
            --sidebar-border: {{sidebar_border}};
        }
        
        /* Header styles */
        .navbar {
            background-color: var(--header-bg) !important;
        }
        
        .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;
        }
        
        /* Navigation section background */
        .navigation-section {
            background-color: var(--nav-bg) !important;
            color: var(--nav-font) !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;
            height: 100vh;
        }
        
        .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 {
            min-height: calc(100vh - 200px);
        }
        
/* 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 id="site-header">
        {{>header}}
    </header>
    
    <nav id="site-navigation">
        {{>navigation}}
    </nav>
    
    <div id="site-breadcrumb" class="breadcrumb-section bg-light border-bottom">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 py-2">
                    {{{breadcrumb}}}
                </div>
            </div>
        </div>
    </div>
    
    <main id="site-main" class="main-content" style="padding: 0;">
        {{#sidebar_content}}
            {{#equal layout "sidebar-content"}}
            <div class="row g-0">
                <aside 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 id="site-footer">
        {{>footer}}
    </footer>
    
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/app.js"></script>
</body>
</html>