{% extends "settings/index.html" %}

{% block header_text %}<h2 style="color:#fff">Edit Profile Page</h2>{% endblock %}

{% block main %}
<section style="padding: 20px; height: 100%; overflow: auto; display: flex; flex-direction: column;">
    <div style="margin-bottom: 16px;">
        <a href="/settings/profile_pages/index.html" class="btn btn-sm">
            Back to Pages
        </a>
    </div>

    {% if error %}
    <div style="background: #2a1515; border: 1px solid #8b0000; color: #ff6b6b; padding: 10px; margin-bottom: 16px; border-radius: 4px;">
        {{ error }}
    </div>
    {% endif %}

    <form method="post" style="flex: 1; display: flex; flex-direction: column;">
        <div class="form-group">
            <label for="title" class="form-label">
                Page Title <span style="color: #ff6b6b;">*</span>
            </label>
            <input
                type="text"
                id="title"
                name="title"
                value="{{ page.title }}"
                required
                placeholder="e.g., About Me, Projects, Blog"
                class="input"
            />
            <p style="color: #888; font-size: 0.85em; margin-top: 6px;">
                Slug: {{ page.slug }}
            </p>
        </div>

        <div class="form-group">
            <label for="is_published" class="checkbox-wrapper">
                <input
                    type="checkbox"
                    id="is_published"
                    name="is_published"
                    {% if page.is_published %}checked{% endif %}
                    class="checkbox"
                />
                <span style="color: #e6e6e6;">Publish this page</span>
            </label>
        </div>

        <div style="flex: 1; display: flex; flex-direction: column; min-height: 0;" class="form-group">
            <label for="content" class="form-label">
                Content (Markdown)
            </label>
            <textarea id="content" name="content" class="textarea" style="flex: 1;">{{ page.content }}</textarea>
        </div>

        <div style="margin-top: 16px; display: flex; gap: 10px;">
            <button type="submit" class="btn btn-primary">
                Save Changes
            </button>
            <a href="/user/{{ page.user_uid }}/{{ page.slug }}.html" class="btn btn-secondary">
                Preview
            </a>
            <a href="/settings/profile_pages/index.html" class="btn">
                Cancel
            </a>
        </div>
    </form>
</section>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<script>
    const textarea = document.getElementById("content");
    const container = textarea.parentElement;
    const containerHeight = container.offsetHeight;
    const editorHeight = Math.max(200, containerHeight - 50);

    const easyMDE = new EasyMDE({
        element: textarea,
        minHeight: editorHeight + "px",
        maxHeight: editorHeight + "px",
        autosave: {
            enabled: true,
            uniqueId: "edit_profile_page_{{ page.uid }}",
            delay: 1000,
        },
        spellChecker: false,
        status: ["lines", "words"],
        placeholder: "Write your content here using Markdown...",
    });
    document.querySelector('form').addEventListener('submit', function(e) {
        easyMDE.codemirror.save();
    });
</script>

<style>
    .EasyMDEContainer {
        background: #0f0f0f;
        color: #e6e6e6;
        height: 100%;
    }

    .EasyMDEContainer .CodeMirror {
        background: #0f0f0f;
        color: #e6e6e6;
        border: 1px solid #333;
    }

    .EasyMDEContainer .editor-toolbar {
        background: #1a1a1a;
        border: 1px solid #333;
        border-bottom: none;
    }

    .EasyMDEContainer .editor-toolbar button {
        color: #e6e6e6 !important;
    }

    .EasyMDEContainer .editor-toolbar button:hover {
        background: #2a2a2a;
    }

    .CodeMirror-cursor {
        border-left-color: #e6e6e6 !important;
    }

    .editor-statusbar {
        color: #888 !important;
    }
</style>
{% endblock %}