<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Words to Readlang{% endblock %}</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='images/favicon.png') }}">
    <link rel="preload" as="image" href="{{ url_for('static', filename='images/logo_small.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="nav-left">
                <img src="{{ url_for('static', filename='images/logo_small.png') }}" alt="Logo" class="nav-logo" width="33" height="32">
                <h1><a href="{{ url_for('main.index') }}">Words to Readlang</a></h1>
            </div>
            <div class="nav-right">
                {% if user_session %}
                <a href="{{ url_for('upload.manage_uploads') }}" class="btn btn-secondary">Manage Uploads</a>
                <a href="{{ url_for('pool.pool') }}" class="btn btn-secondary">Word Pool</a>
                <div class="session-info">
                    <span style="margin-right: 0.5rem;">Session:</span>
                    <code class="session-phrase" id="session-phrase">{{ user_session.magic_phrase }}</code>
                    <button class="btn-copy" id="copy-session-btn" title="Copy to clipboard">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.5 4.5V2.5C5.5 2.23478 5.60536 1.98043 5.79289 1.79289C5.98043 1.60536 6.23478 1.5 6.5 1.5H13.5C13.7652 1.5 14.0196 1.60536 14.2071 1.79289C14.3946 1.98043 14.5 2.23478 14.5 2.5V11.5C14.5 11.7652 14.3946 12.0196 14.2071 12.2071C14.0196 12.3946 13.7652 12.5 13.5 12.5H11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <rect x="1.5" y="4.5" width="9" height="10" rx="1" stroke="currentColor" stroke-width="1.5"/>
                        </svg>
                    </button>
                    <span class="copy-feedback" id="copy-feedback">Copied!</span>
                </div>
                <button type="button" class="btn btn-secondary" id="logout-btn">Log Out</button>
                {% endif %}
            </div>
        </div>
    </nav>

    <main class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message }}
                </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        {% block content %}{% endblock %}
    </main>

    <footer class="footer">
        <div class="footer-content">
            {% if user_session %}
            <p>Session created {{ user_session.created_at.strftime('%Y-%m-%d %H:%M') }} UTC</p>
            <p>Expires {{ user_session.expires_at.strftime('%Y-%m-%d') }}</p>
            {% else %}
            <p>No active session. Upload a file to start a session.</p>
            {% endif %}
            <p class="footer-links">
                <a href="{{ url_for('main.thanks') }}">Thanks</a>
                &middot;
                <a href="https://codeberg.org/psy-q/words-to-readlang" target="_blank" rel="noopener">Source Code</a>
            </p>
        </div>
    </footer>

    <script>
        // Copy session phrase to clipboard
        const copyBtn = document.getElementById('copy-session-btn');
        if (copyBtn) {
            copyBtn.addEventListener('click', function() {
                const phrase = document.getElementById('session-phrase').textContent;
                const feedback = document.getElementById('copy-feedback');

                navigator.clipboard.writeText(phrase).then(function() {
                    // Show feedback
                    feedback.classList.add('show');

                    // Hide feedback after animation
                    setTimeout(() => {
                        feedback.classList.remove('show');
                    }, 2000);
                }).catch(function(err) {
                    console.error('Failed to copy:', err);
                });
            });
        }

        // Logout confirmation
        const logoutBtn = document.getElementById('logout-btn');
        if (logoutBtn) {
            logoutBtn.addEventListener('click', function() {
                const phrase = document.getElementById('session-phrase').textContent;

                // First confirmation - warning to copy
                const warningSeen = confirm(
                    'WARNING: Make sure you have copied your session phrase first!\n\n' +
                    'Your session phrase is: ' + phrase + '\n\n' +
                    'Without this phrase, you will lose access to your uploads.\n\n' +
                    'Click OK if you have copied it, or Cancel to stay logged in.'
                );

                if (!warningSeen) {
                    return;
                }

                // Second confirmation - final check
                const confirmed = confirm(
                    'Have you written down or copied your session phrase?\n\n' +
                    phrase + '\n\n' +
                    'Click OK to log out, or Cancel to stay logged in.'
                );

                if (confirmed) {
                    // Create a hidden form and submit
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = '{{ url_for("main.logout") }}';

                    const confirmedInput = document.createElement('input');
                    confirmedInput.type = 'hidden';
                    confirmedInput.name = 'confirmed';
                    confirmedInput.value = 'true';
                    form.appendChild(confirmedInput);

                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }
    </script>
</body>
</html>
