{% load static %}
<!DOCTYPE html>
<html lang="en" data-coreui-theme="dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Apply saved theme immediately to prevent flash -->
    <script>
        (function(){
            var t = localStorage.getItem('bambu-run-theme') || 'dark';
            if (t === 'auto') t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            document.documentElement.setAttribute('data-coreui-theme', t);
        })();
    </script>
    <title>{% block title %}Bambu Run{% endblock %}</title>
    <!-- CoreUI 5.3 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.3.0/dist/css/coreui.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@coreui/icons@3.0.1/css/all.min.css" rel="stylesheet">
    <!-- Bootstrap Icons (for bi-vinyl filament icon) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    {% block extra_css %}{% endblock %}
    {% block extra_head %}{% endblock %}
    <style>
        /* Sidebar brand sizing and padding */
        .sidebar-brand {
            padding: 1rem 1rem 1.25rem;
            font-size: 1.25rem;
            font-weight: 700;
            min-height: 56px;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
        }
        /* Hide brand text when sidebar is narrow */
        .sidebar-narrow-unfoldable:not(:hover) .sidebar-brand-text {
            display: none;
        }
        /* Gap between brand icon and text */
        .sidebar-brand img + .sidebar-brand-text {
            margin-left: 0.5rem;
        }
        /* Sidebar collapse layout — standalone only */
        .wrapper { transition: margin-left 0.15s ease-out; }
        @media (min-width: 992px) {
            .sidebar ~ .wrapper { margin-left: 256px; }
            .sidebar.sidebar-narrow ~ .wrapper,
            .sidebar.sidebar-narrow-unfoldable ~ .wrapper { margin-left: 56px; }
        }
        @media (max-width: 991.98px) {
            .sidebar ~ .wrapper { margin-left: 0; }
        }
        /* Theme toggle icon visibility — driven by data-coreui-theme on <html> */
        [data-coreui-theme="dark"]  .theme-icon-light { display: none; }
        [data-coreui-theme="light"] .theme-icon-dark  { display: none; }
    </style>
</head>
<body>
    <div class="sidebar sidebar-dark sidebar-fixed" id="sidebar">
        <div class="sidebar-brand d-none d-md-flex">
            {% block sidebar_brand_icon %}{% endblock %}
            <span class="sidebar-brand-text">Bambu Run</span>
        </div>
        <ul class="sidebar-nav" data-coreui="navigation">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'bambu_run:printer_dashboard' %}">
                    <svg class="nav-icon"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-expand-down"></use></svg>
                    3D Printer
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'bambu_run:filament_list' %}">
                    <i class="nav-icon bi bi-vinyl"></i>
                    Filament Inventory
                </a>
            </li>
        </ul>
        <div class="sidebar-footer border-top d-flex">
            <button class="sidebar-toggler" type="button"></button>
        </div>
    </div>

    <div class="wrapper d-flex flex-column min-vh-100">
        <header class="header header-sticky p-0 mb-4">
            <div class="container-fluid px-4">
                <button class="header-toggler d-lg-none" type="button"
                        onclick="coreui.Sidebar.getInstance(document.querySelector('#sidebar')).toggle()">
                    <svg class="icon icon-lg"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-menu"></use></svg>
                </button>
                <ul class="header-nav ms-auto">
                    {% block theme_toggle %}
                    <li class="nav-item">
                        <button class="nav-link" id="themeToggle" type="button">
                            <svg class="icon icon-lg theme-icon-dark"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-moon"></use></svg>
                            <svg class="icon icon-lg theme-icon-light"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-sun"></use></svg>
                        </button>
                    </li>
                    {% endblock %}
                    {% block logout_nav %}{% endblock %}
                </ul>
            </div>
        </header>

        <div class="body flex-grow-1">
            <div class="container-lg px-4">
                {% block content %}{% endblock %}
            </div>
        </div>

        <footer class="footer px-4">
            <div>Bambu Run</div>
            <div class="ms-auto">Powered by <a href="https://github.com/RunLit/Bambu-Run.git">Bambu Run</a></div>
        </footer>
    </div>

    <!-- CoreUI 5.3 JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.3.0/dist/js/coreui.bundle.min.js"></script>
    <script>
        // Sidebar narrow-toggle with state persistence
        const sidebarToggler = document.querySelector('.sidebar-toggler');
        const sidebar = document.querySelector('#sidebar');
        if (sidebarToggler && sidebar) {
            if (localStorage.getItem('bambu-run-sidebar-narrow') === 'true') {
                sidebar.classList.add('sidebar-narrow-unfoldable');
            }
            sidebarToggler.addEventListener('click', (e) => {
                e.preventDefault(); e.stopPropagation();
                const isNarrow = sidebar.classList.contains('sidebar-narrow-unfoldable');
                sidebar.classList.toggle('sidebar-narrow-unfoldable', !isNarrow);
                localStorage.setItem('bambu-run-sidebar-narrow', String(!isNarrow));
            });
        }
    </script>
    <script>
        // Simple 2-state theme toggle (standalone default)
        const themeToggle = document.getElementById('themeToggle');
        if (themeToggle) {
            themeToggle.addEventListener('click', function() {
                const current = document.documentElement.getAttribute('data-coreui-theme');
                const next = current === 'dark' ? 'light' : 'dark';
                document.documentElement.setAttribute('data-coreui-theme', next);
                localStorage.setItem('bambu-run-theme', next);
            });
        }
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>
