<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
    <meta name="description" content="{{ site.description }}">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}">
    <meta property="og:title" content="{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}">
    <meta property="og:description" content="{{ site.description }}">
    <meta property="og:image" content="{{ site.url }}{{ site.baseurl }}/assets/og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:locale" content="it_IT">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}">
    <meta name="twitter:title" content="{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}">
    <meta name="twitter:description" content="{{ site.description }}">
    <meta name="twitter:image" content="{{ site.url }}{{ site.baseurl }}/assets/og-image.png">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        primary: '#2563eb',
                        secondary: '#4f46e5',
                    }
                }
            }
        }
    </script>

    <!-- Prism.js for syntax highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />

    <style>
        html {
            scroll-behavior: smooth;
        }

        /* Skip link for accessibility */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #2563eb;
            color: white;
            padding: 8px 16px;
            text-decoration: none;
            z-index: 100;
        }

        .skip-link:focus {
            top: 0;
        }

        /* Screen reader only text */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        .gradient-text {
            background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hover-lift {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hover-lift:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .tab-button {
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
        }

        .tab-button.active {
            border-bottom-color: #2563eb;
            color: #2563eb;
            font-weight: 600;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        code[class*="language-"],
        pre[class*="language-"] {
            font-size: 0.875rem;
            line-height: 1.5;
        }

        /* Copy button styling */
        .copy-button {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 0.375rem;
            color: white;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .copy-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .copy-button.copied {
            background: #10b981;
            border-color: #10b981;
        }
    </style>
</head>
<body class="font-sans antialiased bg-white text-gray-900">
    <!-- Skip link for accessibility -->
    <a href="#main-content" class="skip-link">Salta al contenuto principale</a>

    <!-- Header -->
    <header class="fixed w-full top-0 bg-white/90 backdrop-blur-sm border-b border-gray-200 z-50">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center space-x-2">
                    <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <span class="text-xl font-bold gradient-text">normattiva2md</span>
                </div>
                <nav class="hidden md:flex items-center space-x-6" aria-label="Navigazione principale">
                    <a href="#features" class="text-gray-600 hover:text-blue-600 transition">Caratteristiche</a>
                    <a href="#installation" class="text-gray-600 hover:text-blue-600 transition">Installazione</a>
                    <a href="https://github.com/ondata/normattiva_2_md" target="_blank" class="text-gray-600 hover:text-blue-600 transition" aria-label="Vedi progetto su GitHub">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="sr-only">GitHub</span>
                    </a>
                </nav>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main id="main-content" class="pt-16">
        {{ content }}
    </main>

    <!-- Footer -->
    <footer class="bg-gray-50 border-t border-gray-200 py-12 mt-20">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <div class="flex items-center space-x-2">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <span class="font-semibold text-gray-900">normattiva2md</span>
                    <span class="text-sm text-gray-500">v2.0.21</span>
                </div>
                <div class="flex items-center space-x-6 text-sm text-gray-600">
                    <a href="https://github.com/ondata/normattiva_2_md" target="_blank" class="hover:text-blue-600 transition">GitHub</a>
                    <a href="https://pypi.org/project/normattiva2md/" target="_blank" class="hover:text-blue-600 transition">PyPI</a>
                    <a href="https://github.com/ondata/normattiva_2_md/blob/main/README.md" target="_blank" class="hover:text-blue-600 transition">Docs</a>
                    <span class="text-gray-400">|</span>
                    <span class="text-gray-500">MIT License</span>
                </div>
            </div>
            <div class="text-center mt-6 text-sm text-gray-500">
                Un progetto dell'associazione <a href="https://www.ondata.it" target="_blank" class="text-blue-600 hover:text-blue-700 font-medium">onData</a>
            </div>
        </div>
    </footer>

    <!-- Prism.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>

    <!-- Custom JavaScript -->
    <script>
        // Tab switching
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');

            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const targetTab = this.getAttribute('data-tab');

                    // Remove active class and aria-selected from all buttons and contents
                    tabButtons.forEach(btn => {
                        btn.classList.remove('active');
                        btn.setAttribute('aria-selected', 'false');
                    });
                    tabContents.forEach(content => content.classList.remove('active'));

                    // Add active class and aria-selected to clicked button and corresponding content
                    this.classList.add('active');
                    this.setAttribute('aria-selected', 'true');
                    document.getElementById(targetTab).classList.add('active');
                });
            });

            // Add copy buttons to code blocks
            const codeBlocks = document.querySelectorAll('pre code');
            codeBlocks.forEach(block => {
                const pre = block.parentElement;
                pre.style.position = 'relative';

                const copyButton = document.createElement('button');
                copyButton.className = 'copy-button';
                copyButton.textContent = 'Copy';

                copyButton.addEventListener('click', function() {
                    const code = block.textContent;
                    navigator.clipboard.writeText(code).then(() => {
                        copyButton.textContent = 'Copied!';
                        copyButton.classList.add('copied');

                        setTimeout(() => {
                            copyButton.textContent = 'Copy';
                            copyButton.classList.remove('copied');
                        }, 2000);
                    });
                });

                pre.appendChild(copyButton);
            });
        });
    </script>
</body>
</html>
