<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <title>Paste - Sharey</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    
    <!-- Immediate theme application to prevent flash -->
    <script>
        // Apply theme immediately before page renders
        (function() {
            function getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }
            
            const savedTheme = getCookie('sharey-theme') || 'light';
            
            if (savedTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
</head>
<body>
    <!-- Theme toggle button -->
    <button id="themeToggle" class="theme-toggle" title="Switch to dark mode">🌙</button>
    
    <div class="container">
        <div class="paste-container">
            <div class="paste-header">
                <h3>Paste Content</h3>
                <div class="paste-actions">
                    <button class="copy-button" onclick="copyToClipboard()">📋 Copy</button>
                    <a href="/pastes/raw/{{ paste_id }}" class="raw-button" target="_blank">📄 Raw</a>
                    <a href="/" class="home-button">🏠 Home</a>
                </div>
            </div>
            
            <div class="paste-content">
                <pre><code>{{ content | e }}</code></pre>
            </div>
        </div>
    </div>

    <script>
        function copyToClipboard() {
            const content = document.querySelector('.paste-content code').textContent;
            navigator.clipboard.writeText(content).then(() => {
                const button = document.querySelector('.copy-button');
                const originalText = button.textContent;
                button.textContent = '✅ Copied!';
                setTimeout(() => {
                    button.textContent = originalText;
                }, 2000);
            }).catch(err => {
                console.error('Failed to copy: ', err);
                alert('Failed to copy to clipboard');
            });
        }

        // Theme management
        function initializeTheme() {
            const savedTheme = getCookie('sharey-theme') || 'light';
            const themeToggle = document.getElementById('themeToggle');
            
            if (themeToggle) {
                themeToggle.addEventListener('click', toggleTheme);
                updateThemeButton(savedTheme);
            }
        }

        function toggleTheme() {
            const currentTheme = getCookie('sharey-theme') || 'light';
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            
            applyTheme(newTheme);
            setCookie('sharey-theme', newTheme, 365);
            updateThemeButton(newTheme);
        }

        function applyTheme(themeSetting) {
            if (themeSetting === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            } else {
                document.documentElement.removeAttribute('data-theme');
            }
        }

        function updateThemeButton(themeSetting) {
            const themeToggle = document.getElementById('themeToggle');
            if (themeToggle) {
                if (themeSetting === 'light') {
                    themeToggle.textContent = '🌙';
                    themeToggle.title = 'Switch to dark mode';
                } else {
                    themeToggle.textContent = '☀️';
                    themeToggle.title = 'Switch to light mode';
                }
            }
        }

        function setCookie(name, value, days) {
            const expires = new Date();
            expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        // Initialize theme on page load
        document.addEventListener('DOMContentLoaded', initializeTheme);
    </script>
</body>
</html>
