{% extends "admin/base.html" %}

{% block title %}{% if is_new %}New Post{% else %}Edit Post{% endif %}{% endblock %}

{% block content %}
<div class="header">
    <h2>{% if is_new %}New Post{% else %}Edit Post{% endif %}</h2>
</div>

<form method="post" action="{% if is_new %}/admin/posts{% else %}/admin/posts/{{ content.id }}{% endif %}">
    <div class="card">
        <div class="form-row">
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" id="title" name="title" value="{% if content %}{{ content.title }}{% endif %}" required aria-required="true">
            </div>
            <div class="form-group">
                <label for="slug">Slug</label>
                <input type="text" id="slug" name="slug" value="{% if content %}{{ content.slug }}{% endif %}" placeholder="auto-generated">
            </div>
        </div>

        <div class="form-group">
            <label for="body_markdown">Content (Markdown)</label>
            <div class="editor-layout" id="editor-layout">
                <textarea id="body_markdown" name="body_markdown" hx-post="/htmx/preview" hx-trigger="input changed delay:500ms" hx-target="#preview">{% if content %}{{ content.body_markdown }}{% endif %}</textarea>
                <div class="resize-handle" id="resize-handle"></div>
                <div id="preview" class="preview content">{% if content and content.body_html %}{{ content.body_html | safe }}{% else %}<p style="color: var(--text-muted);">Preview will appear here...</p>{% endif %}</div>
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="excerpt">Excerpt</label>
                <input type="text" id="excerpt" name="excerpt" value="{% if content %}{{ content.excerpt }}{% endif %}" placeholder="auto-generated">
            </div>
            <div class="form-group">
                <label for="tags">Tags (comma separated)</label>
                <input type="text" id="tags" name="tags" value="">
            </div>
        </div>

        <details class="seo-section" style="margin-bottom: 1rem;">
            <summary style="cursor: pointer; font-weight: 500; padding: 0.5rem 0;">SEO Settings</summary>
            <div style="padding: 1rem; background: var(--bg-secondary); border-radius: var(--radius); margin-top: 0.5rem;">
                <div class="form-group">
                    <label for="meta_title">Meta Title <small style="color: var(--text-muted);">(defaults to post title)</small></label>
                    <input type="text" id="meta_title" name="meta_title" value="{% if content and content.metadata.meta_title %}{{ content.metadata.meta_title }}{% endif %}" placeholder="{{ content.title | default(value='') }}">
                </div>
                <div class="form-group">
                    <label for="meta_description">Meta Description <small style="color: var(--text-muted);">(defaults to excerpt)</small></label>
                    <textarea id="meta_description" name="meta_description" rows="2" style="min-height: 60px;">{% if content and content.metadata.meta_description %}{{ content.metadata.meta_description }}{% endif %}</textarea>
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="canonical_url">Canonical URL <small style="color: var(--text-muted);">(optional)</small></label>
                    <input type="url" id="canonical_url" name="canonical_url" value="{% if content and content.metadata.canonical_url %}{{ content.metadata.canonical_url }}{% endif %}" placeholder="https://...">
                </div>
            </div>
        </details>

        <div class="form-row">
            <div class="form-group">
                <label for="status">Status</label>
                <select id="status" name="status" onchange="toggleScheduled()">
                    <option value="draft"{% if is_new %} selected{% elif content %}{% if content.status == "draft" %} selected{% endif %}{% endif %}>Draft</option>
                    <option value="scheduled"{% if content %}{% if content.status == "scheduled" %} selected{% endif %}{% endif %}>Scheduled</option>
                    <option value="published"{% if content %}{% if content.status == "published" %} selected{% endif %}{% endif %}>Published</option>
                    <option value="archived"{% if content %}{% if content.status == "archived" %} selected{% endif %}{% endif %}>Archived</option>
                </select>
            </div>
            <div class="form-group" id="scheduled-group" style="display: none;">
                <label for="scheduled_at">Publish At</label>
                <input type="datetime-local" id="scheduled_at" name="scheduled_at" value="{% if content and content.scheduled_at %}{{ content.scheduled_at | truncate_str(len=16) }}{% endif %}">
            </div>
        </div>
        <script>
            function toggleScheduled() {
                const status = document.getElementById('status').value;
                const group = document.getElementById('scheduled-group');
                group.style.display = status === 'scheduled' ? 'block' : 'none';
            }
            toggleScheduled();

            // Resizable editor panes
            (function() {
                const layout = document.getElementById('editor-layout');
                const handle = document.getElementById('resize-handle');
                const textarea = document.getElementById('body_markdown');
                const preview = document.getElementById('preview');

                if (!layout || !handle || !textarea || !preview) return;

                let isDragging = false;

                handle.addEventListener('mousedown', function(e) {
                    isDragging = true;
                    handle.classList.add('dragging');
                    document.body.style.cursor = 'col-resize';
                    document.body.style.userSelect = 'none';
                    e.preventDefault();
                });

                document.addEventListener('mousemove', function(e) {
                    if (!isDragging) return;

                    const layoutRect = layout.getBoundingClientRect();
                    const handleWidth = handle.offsetWidth;
                    const minWidth = 200;

                    let leftWidth = e.clientX - layoutRect.left;
                    let rightWidth = layoutRect.right - e.clientX - handleWidth;

                    if (leftWidth < minWidth) leftWidth = minWidth;
                    if (rightWidth < minWidth) rightWidth = minWidth;

                    const totalWidth = layoutRect.width - handleWidth;
                    const leftPercent = (leftWidth / totalWidth) * 100;
                    const rightPercent = (rightWidth / totalWidth) * 100;

                    textarea.style.flex = '0 0 ' + leftPercent + '%';
                    preview.style.flex = '0 0 ' + rightPercent + '%';
                });

                document.addEventListener('mouseup', function() {
                    if (isDragging) {
                        isDragging = false;
                        handle.classList.remove('dragging');
                        document.body.style.cursor = '';
                        document.body.style.userSelect = '';
                    }
                });
            })();
        </script>

        <div style="display: flex; gap: 1rem; align-items: center;">
            <button type="submit" class="btn btn-primary">{% if is_new %}Create Post{% else %}Save Changes{% endif %}</button>
            <a href="/admin/posts" class="btn btn-secondary">Cancel</a>
            {% if not is_new %}<a href="/admin/posts/{{ content.id }}/versions" class="btn btn-secondary">Version History</a>{% endif %}
            <small style="color: var(--text-muted); margin-left: auto;">
                Shortcuts: <kbd style="background: var(--bg-tertiary); padding: 0.1rem 0.4rem; border-radius: 0.25rem;">Cmd/Ctrl+S</kbd> Save
                <kbd style="background: var(--bg-tertiary); padding: 0.1rem 0.4rem; border-radius: 0.25rem;">Cmd/Ctrl+Shift+P</kbd> Publish
            </small>
        </div>
    </div>
</form>
{% endblock %}