<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIO 3D Slicer</title>
    <!-- Bootstrap 5 CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
    <style>
        body { padding-top: 56px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f8f9fa; }
        .sidebar { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 100; padding: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); background-color: #fff; }
        .sidebar-sticky { position: relative; top: 0; height: calc(100vh - 56px); padding-top: 1rem; overflow-x: hidden; overflow-y: auto; }
        
        .nav-pills .nav-link { border-radius: 0.5rem; padding: 0.75rem 1rem; font-weight: 500; transition: all 0.2s ease; margin-bottom: 0.25rem; }
        .nav-pills .nav-link:hover { background-color: rgba(13,110,253,0.05); color: #0d6efd !important; }
        .nav-pills .nav-link.active { background-color: #0d6efd; color: white !important; box-shadow: 0 4px 6px rgba(13,110,253,0.3); }
        
        .navbar-brand { font-size: 1.25rem; letter-spacing: 0.5px; }
        .card { border: none; border-radius: 0.75rem; overflow: hidden; }
        .card-header { border-bottom: 1px solid rgba(0,0,0,.05); background-color: transparent; }
		
        .toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1055; width: auto; max-width: 90%; pointer-events: none; }
        .toast { 
            border-radius: 0.5rem; 
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,.25); 
            pointer-events: auto; 
            border: none; 
            transform: translateY(-20px);
            transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
        }
        .toast.showing, .toast.show { 
            transform: translateY(0); 
        }
        
        /* 页面切换动画 Page Transition */
        @keyframes pageFadeInSlide {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        main { animation: pageFadeInSlide 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
        
        /* 提升 Accordion 折叠栏动画更平滑 */
        .collapsing { transition: height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
        <div class="container-fluid position-relative d-flex justify-content-between align-items-center">
            <a class="navbar-brand fw-bold" href="{{ url_for('main.index') }}"><i class="bi bi-printer me-2"></i>AIO 3D Slicer</a>
            
            <div class="d-none d-md-flex mx-auto" style="position: absolute; left: 50%; transform: translateX(-50%);">
                <div class="btn-group border border-secondary shadow-sm rounded-pill p-1 bg-dark" role="group" style="background-color: #1a1e21 !important;">
                    <a href="{{ url_for('main.files') }}" class="btn btn-sm rounded-pill {% if not request.blueprint == 'printer' %}btn-primary active fw-bold text-white px-4{% else %}btn-transparent text-secondary border-0 px-3{% endif %}" style="transition: all 0.2s;"><i class="bi bi-layers me-1"></i>{{ _('Slicer') }}</a>
                    <a href="{{ url_for('printer.status') }}" class="btn btn-sm rounded-pill {% if request.blueprint == 'printer' %}btn-primary active fw-bold text-white px-4{% else %}btn-transparent text-secondary border-0 px-3{% endif %}" style="transition: all 0.2s;"><i class="bi bi-printer-fill me-1"></i>{{ _('Printer') }}</a>
                </div>
            </div>
            
            <div class="d-flex text-light align-items-center ms-auto">
                <div class="dropdown me-3">
                    <button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" id="langDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-globe me-1"></i>{{ _('Language') }}
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="langDropdown">
                        <li><a class="dropdown-item {% if request.cookies.get('lang') == 'en' %}active{% endif %}" href="{{ url_for('main.set_language', lang='en') }}"><i class="bi bi-translate me-2"></i>English</a></li>
                        <li><a class="dropdown-item {% if request.cookies.get('lang') == 'zh-cn' %}active{% endif %}" href="{{ url_for('main.set_language', lang='zh-cn') }}"><i class="bi bi-translate me-2"></i>中文 (简体)</a></li>
                        <li><a class="dropdown-item {% if request.cookies.get('lang') == 'de' %}active{% endif %}" href="{{ url_for('main.set_language', lang='de') }}"><i class="bi bi-translate me-2"></i>Deutsch</a></li>
                    </ul>
                </div>
                
                {% if current_user.is_authenticated %}
                    {% if current_user.is_guest %}
                        <span class="me-3 text-secondary"><i class="bi bi-incognito me-1"></i>{{ _('Guest') }} ({{ current_user.username }})</span>
                        <a href="{{ url_for('auth.login') }}" class="btn btn-outline-light btn-sm rounded-pill px-3">{{ _('Login') }}</a>
                    {% else %}
                        <span class="me-3 text-success fw-semibold"><i class="bi bi-person-circle me-1"></i>{{ current_user.username }}</span>
                        <a href="{{ url_for('auth.logout') }}" class="btn btn-outline-light btn-sm rounded-pill px-3">{{ _('Logout') }}</a>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-white sidebar collapse border-end">
                <div class="sidebar-sticky pt-3 px-2">

                    {% if request.blueprint == 'printer' %}
                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
                        <span><i class="bi bi-list-task me-1"></i>{{ _('General Operations') }}</span>
                    </h6>
                    <ul class="nav flex-column nav-pills gap-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'printer.status' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.status') }}">
                                <i class="bi bi-activity me-2"></i>{{ _('Printer Status') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'printer.prepare' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.prepare') }}">
                                <i class="bi bi-file-earmark-plus me-2"></i>{{ _('Prepare Print') }}
                            </a>
                        </li>
                        <li class="nav-item mb-1">
                            <a class="nav-link text-dark {% if request.endpoint == 'printer.control' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.control') }}">
                                <i class="bi bi-arrows-move me-2"></i>{{ _('Control') }}
                            </a>
                        </li>
                        {% if current_user.is_authenticated and not current_user.is_guest %}
                        <li class="nav-item mb-1">
                            <a class="nav-link text-dark {% if request.endpoint == 'main.account' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.account') }}">
                                <i class="bi bi-person-badge me-2"></i>{{ _('Account Management') }}
                            </a>
                        </li>
                        {% endif %}
                    </ul>

                    {% if current_user.is_authenticated and current_user.is_admin %}
                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
                        <span><i class="bi bi-shield-lock me-1"></i>{{ _('Admin / OctoPrint') }}</span>
                    </h6>
                    <ul class="nav flex-column nav-pills gap-1 mb-2">
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'printer.octo_config' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.octo_config') }}">
                                <i class="bi bi-plug me-2"></i>{{ _('System Config') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'printer.octo_embed' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.octo_embed') }}">
                                <i class="bi bi-window-sidebar me-2"></i>{{ _('OctoPrint Panel') }}
                            </a>
                        </li>
                    </ul>
                    {% endif %}
                    
                    {% else %}
                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
                        <span><i class="bi bi-list-task me-1"></i>{{ _('General Operations') }}</span>
                    </h6>
                    <ul class="nav flex-column nav-pills gap-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'main.index' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.index') }}">
                                <i class="bi bi-house-door me-2"></i>{{ _('Home') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'main.files' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.files') }}">
                                <i class="bi bi-folder2-open me-2"></i>{{ _('My Files') }}
                            </a>
                        </li>
                        <li class="nav-item mb-1">
                            <a class="nav-link text-dark {% if request.endpoint == 'main.plater' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.plater') }}">
                                <i class="bi bi-grid-3x3 me-2"></i>{{ _('Plater') }}
                            </a>
                        </li>
                        {% if current_user.is_authenticated and not current_user.is_guest %}
                        <li class="nav-item mb-1">
                            <a class="nav-link text-dark {% if request.endpoint == 'main.account' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.account') }}">
                                <i class="bi bi-person-badge me-2"></i>{{ _('Account Management') }}
                            </a>
                        </li>
                        {% endif %}
                    </ul>

                    {% if current_user.is_authenticated and current_user.is_admin %}
                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
                        <span><i class="bi bi-shield-lock me-1"></i>{{ _('Admin Options') }}</span>
                    </h6>
                    <ul class="nav flex-column nav-pills gap-1 mb-2">
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'admin.settings' %}active text-white shadow-sm{% endif %}" href="{{ url_for('admin.settings') }}">
                                <i class="bi bi-gear me-2"></i>{{ _('System Settings') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark {% if request.endpoint == 'admin.users' %}active text-white shadow-sm{% endif %}" href="{{ url_for('admin.users') }}">
                                <i class="bi bi-people me-2"></i>{{ _('User Management') }}
                            </a>
                        </li>
                    </ul>
                    {% endif %}
                    {% endif %}

                </div>
            </nav>

            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 mt-4 bg-light min-vh-100 pb-5">
                {% block content %}{% endblock %}
            </main>
        </div>
    </div>

    <!-- Toast Notification Container -->
    <div class="toast-container" id="global-toast-container">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    {% set toast_class = 'bg-success text-white' if category == 'success' else 'bg-danger text-white' if category == 'danger' else 'bg-warning text-dark' if category == 'warning' else 'bg-primary text-white' %}
                    <div class="toast align-items-center border-0 {{ toast_class }} mb-2" role="alert" aria-live="assertive" aria-atomic="true">
                      <div class="d-flex">
                        <div class="toast-body fw-medium">
                          {{ _(message) if _ else message }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                      </div>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <!-- Global Custom Alert Modal -->
    <div class="modal fade" id="globalAlertModal" tabindex="-1" aria-hidden="true" style="z-index: 1060;">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-warning text-dark py-2">
                    <h6 class="modal-title fw-bold" id="globalAlertTitle"><i class="bi bi-exclamation-triangle-fill me-2"></i>{{ _('Notice') }}</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body fs-6 text-center py-4 text-break" id="globalAlertMessage">
                </div>
                <div class="modal-footer border-0 p-2 justify-content-center bg-light">
                    <button type="button" class="btn btn-warning px-4 rounded-pill fw-bold" data-bs-dismiss="modal">{{ _('OK') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Global Custom Confirm Modal -->
    <div class="modal fade" id="globalConfirmModal" tabindex="-1" aria-hidden="true" style="z-index: 1060;">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white py-2">
                    <h6 class="modal-title fw-bold"><i class="bi bi-question-circle-fill me-2"></i>{{ _('Confirm') }}</h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body fs-6 text-center py-4 text-break" id="globalConfirmMessage">
                </div>
                <div class="modal-footer border-0 p-2 justify-content-center bg-light">
                    <button type="button" class="btn btn-outline-secondary px-4 rounded-pill" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
                    <button type="button" class="btn btn-primary px-4 rounded-pill fw-bold" id="globalConfirmBtn">{{ _('Yes') }}</button>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        // Initialize Toasts automatically
        document.addEventListener('DOMContentLoaded', function () {
            var toastElList = [].slice.call(document.querySelectorAll('.toast'))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl, { delay: 3000 }).show()
            });
        });

        // Global Utility: Show Toast dynamically
        window.showToast = function(msg, type='success', duration=3000) {
            const container = document.getElementById('global-toast-container');
            const toastClass = type === 'success' ? 'bg-success text-white' : 
                               type === 'danger' ? 'bg-danger text-white' : 
                               type === 'warning' ? 'bg-warning text-dark' : 'bg-primary text-white';
            
            const html = `
                <div class="toast align-items-center border-0 ${toastClass} mb-2" role="alert" aria-live="assertive" aria-atomic="true">
                  <div class="d-flex">
                    <div class="toast-body fw-medium">${msg}</div>
                    <button type="button" class="btn-close ${type==='warning'?'':'btn-close-white'} me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                  </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
            const ts = container.lastElementChild;
            new bootstrap.Toast(ts, { autohide: true, delay: duration }).show();
            ts.addEventListener('hidden.bs.toast', () => { ts.remove(); });
        };

        // Override default alert
        window.customAlert = function(msg, title) {
            document.getElementById('globalAlertMessage').innerHTML = String(msg).replace(/\n/g, '<br>');
            if(title) document.getElementById('globalAlertTitle').innerHTML = '<i class="bi bi-info-circle-fill me-2"></i>' + title;
            else document.getElementById('globalAlertTitle').innerHTML = '<i class="bi bi-exclamation-triangle-fill me-2"></i>Notice';
            new bootstrap.Modal(document.getElementById('globalAlertModal')).show();
        };

        // Override default confirm
        window.customConfirm = function(msg, onConfirm) {
            document.getElementById('globalConfirmMessage').innerHTML = String(msg).replace(/\n/g, '<br>');
            const modalEl = document.getElementById('globalConfirmModal');
            const modal = new bootstrap.Modal(modalEl);
            
            // Clear previous event listener bindings
            const elClone = document.getElementById('globalConfirmBtn').cloneNode(true);
            document.getElementById('globalConfirmBtn').parentNode.replaceChild(elClone, document.getElementById('globalConfirmBtn'));
            
            document.getElementById('globalConfirmBtn').addEventListener('click', function() {
                modal.hide();
                if(onConfirm) onConfirm();
            });
            
            modal.show();
        };
    </script>
</body>
</html>
