<!DOCTYPE html>
<html lang="en">
<    <!-- Theme toggle button -->
    <button id="themeToggle" class="theme-toggle" title="Switch to dark mode">🌙</button>ad>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharey</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <!-- QR Code generation library -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
    
    <!-- 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">
        <h1>Sharey~</h1>

        <!-- Toggle button to switch between modes -->
        <div class="toggle-container">
            <button id="fileMode" class="toggle-button active">File Sharing</button>
            <button id="pasteMode" class="toggle-button">Pastebin</button>
            <button id="faqButton" class="toggle-button">FAQ</button> <!-- Updated FAQ button -->
        </div>

        <!-- File Sharing Area -->
        <div id="fileSharingSection" class="section">
            <div id="drop-area" class="drop-area">
                <p>Drag & Drop Files Here or Click to Select</p>
                <input type="file" id="fileInput" multiple style="display: none;">
            </div>

            <div id="progressContainer" class="progress-bar" style="display: none;">
                <div id="progressBar" class="progress"></div>
            </div>
            <p id="progressText">0%</p>

            <div id="result" class="result-message"></div>

            <!-- File preview container -->
            <div id="filePreviewContainer" class="file-preview-container" style="display: none;">
                <h3>File Previews:</h3>
                <div id="filePreviews" class="file-previews"></div>
            </div>
        </div>

        <!-- Pastebin Area (hidden by default) -->
        <div id="pastebinSection" class="section" style="display: none;">
            <textarea id="pasteContent" placeholder="Enter your text here..." rows="10" cols="50"></textarea>
            <button id="submitPaste" class="submit-button">Submit Paste</button>
            <div id="pasteResult" class="result-message"></div>
        </div>

        <!-- FAQ Section (hidden by default) -->
        <div id="faqSection" class="section" style="display: none;">
            <h2>Frequently Asked Questions</h2>
            <div class="faq-section">
                <h3>How do I upload a file?</h3>
                <p>To upload a file, send a POST request to the /api/upload endpoint. Example:</p>
                <pre><code>curl -X POST https://sharey.org/api/upload \
-F "files[]=@/path/to/your/file.txt"</code></pre>
            </div>

            <div class="faq-section">
                <h3>How do I create a paste?</h3>
                <p>To create a paste, send a POST request to the /api/paste endpoint. Example:</p>
                <pre><code>curl -X POST https://sharey.org/api/paste \
-H "Content-Type: application/json" \
-d '{"content": "This is the content of my paste."}'</code></pre>
            </div>
            <!-- Add more FAQ items as needed -->
        </div>
    </div>

    <!-- QR Code library for sharing -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
