<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}noil - Edit File Trees Like Text{% endblock %}</title>
    <meta name="description" content="{% block description %}noil: The file manager that gives you full control. Edit file operations like text, preview changes, and apply them with confidence.{% endblock %}">
    
    <link rel="stylesheet" href="/static/css/output.css">
    <script src="/static/js/htmx.min.js" defer></script>

    <script defer data-domain="noil.kjuulh.io" src="https://plausible.front.kjuulh.io/js/script.file-downloads.hash.outbound-links.pageview-props.tagged-events.js"></script>
    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
    
    {% block head %}{% endblock %}
</head>
<body class="min-h-screen bg-zinc-950 text-gray-100 antialiased">
    <nav class="fixed top-0 w-full bg-zinc-950 border-b border-gray-800 z-50">
        <div class="container mx-auto px-4 sm:px-6 py-3 sm:py-4">
            <div class="flex items-center justify-between">
                <a href="/" class="flex items-center space-x-2">
                    <span class="text-2xl font-bold bg-gradient-to-r from-emerald-400 to-teal-400 bg-clip-text text-transparent">noil</span>
                </a>
                <div class="hidden md:flex items-center space-x-6 lg:space-x-8">
                    <a href="#features" class="text-gray-300 hover:text-white transition-colors">Features</a>
                    <a href="#installation" class="text-gray-300 hover:text-white transition-colors">Installation</a>
                    <a href="#configuration" class="text-gray-300 hover:text-white transition-colors">Configuration</a>
                    <a href="https://git.kjuulh.io/kjuulh/noil" target="_blank" class="text-gray-300 hover:text-white transition-colors flex items-center space-x-1">
                        <span>Source</span>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                        </svg>
                    </a>
                </div>
                <button id="mobile-menu-toggle" class="md:hidden text-gray-300 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-zinc-900 border-t border-gray-800">
            <div class="container mx-auto px-4 sm:px-6 py-4 space-y-3">
                <a href="#features" class="block text-gray-300 hover:text-white transition-colors">Features</a>
                <a href="#installation" class="block text-gray-300 hover:text-white transition-colors">Installation</a>
                <a href="#configuration" class="block text-gray-300 hover:text-white transition-colors">Configuration</a>
                <a href="https://git.kjuulh.io/kjuulh/noil" target="_blank" class="block text-gray-300 hover:text-white transition-colors">Source</a>
            </div>
        </div>
    </nav>
    
    <main class="pt-16">
        {% block content %}{% endblock %}
    </main>
    
    <footer class="bg-zinc-900 border-t border-gray-800 mt-16 sm:mt-24">
        <div class="container mx-auto px-4 sm:px-6 py-6 sm:py-8">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <div class="text-gray-400 text-sm text-center md:text-left">
                    © 2024 noil. Built with Rust.
                </div>
                <div class="flex space-x-4 sm:space-x-6">
                    <a href="https://git.kjuulh.io/kjuulh/noil" target="_blank" class="text-gray-400 hover:text-white transition-colors">
                        Git
                    </a>
                    <a href="https://git.kjuulh.io/kjuulh/noil/issues" target="_blank" class="text-gray-400 hover:text-white transition-colors">
                        Issues
                    </a>
                </div>
            </div>
        </div>
    </footer>
    
    <script>
        document.getElementById('mobile-menu-toggle').addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.toggle('hidden');
        });
        
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const mobileMenu = document.getElementById('mobile-menu');
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                }
            });
        });
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html>
