<!DOCTYPE html>
<html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>{% block title %}Lumeex{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
    <meta name="darkreader-lock">
    </head>
    <body>
    <!-- Top bar -->	
    <div class="nav-bar">
        <div class="content-inner nav">
            <div class="nav-header">
                <a href="/" class="nav-title">
                    <img src="{{ url_for('static', filename='img/logo.svg') }}">
                </a>
            </div>
            <!-- Burger toggle input and label -->
            <input type="checkbox" id="nav-toggle" class="nav-toggle" hidden>
            <label for="nav-toggle" class="nav-burger">
                <span></span>
                <span></span>
                <span></span>
            </label>
            <div class="nav-links">
                <ul class="nav-list">
                    <li class="nav-item"><a href="/gallery-editor">Gallery</a></li>
                    <li class="nav-item"><a href="/site-info">Site info</a></li>
                    <li class="nav-item"><a href="/theme-editor">Theme info</a></li>
                    <li class="nav-item">
                        <button id="build-btn" class="button">🚀 Build!</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Toast container for notifications -->
    <div class="content-inner first-content">
        <div class="inner">
            <div id="toast-container"></div>
            <!-- Page content -->
            {% block content %}{% endblock %}
            <!-- Build success modal -->
            <div class="content-inner">
                <div id="build-success-modal" class="modal" style="display:none;">
                    <div class="modal-content">
                        <span id="build-success-modal-close" class="modal-close">&times;</span>
                        <h3>✅ Build completed!</h3>
                        <p>Your files are available in the output folder.</p>
                        <div class="modal-actions-row">
                            <button id="preview-site-btn" class="modal-btn" data-preview-port="{{ preview_port }}">🔎 Preview Site</button>
                            <button id="download-zip-btn" class="modal-btn">📦 Download ZIP</button>
                        </div>
                        <div id="zip-loader" style="display:none;">Creating ZIP...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <!-- Footer -->
        <div id="footer">
            <div class="content-inner">
                <div class="inner">
                    <div class="footer-container">
                        <div class="footer-credit">
                            <p><a href="https//lumeex.djeex.fr"><span class="lum-first">Lum</span><span class="lum-second">eex</span> v{{ lumeex_version }}</a> — © 2025</p>
                        </div>
                        <div class="footer-links">
                            <a class="footer-link documentation" href="https://lumeex.djeex.fr"><span class="icon"><img src="/img/favicon.svg"></span><span class="icon-text">Documentation</span></a>
                            <a class="footer-link gitea" href="https://git.djeex.fr/Djeex/lumeex"><span class="icon"><img src="/img/gitea.svg"></span><span class="icon-text">Giteex</span></a>
                            <a class="footer-link github" href="https://github.com/Djeex/lumeex"><span class="icon"><img src="/img/github.svg"></span><span class="icon-text">Github</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Loader -->
        <div id="global-loader">
            <div class="loader-inner">
                <div class="loader-spinner"></div>
                <div id="loader-text">Uploading...</div>
            </div>
        </div>
        <!-- Scripts -->
        <script src="{{ url_for('static', filename='js/build.js') }}" defer></script>
        {% block scripts %}{% endblock %}
    </body>
</html>