{% extends "base_template.html" %}

{% block title %}{{ _('Edit post') if post else _('New post') }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('post.assets', subfolder='vendor', filename='splent-editor.css') }}">
{% endblock %}

{% block content %}
<div class="d-flex flex-column align-items-start gap-2 mb-4">
    <h1 class="h3 mb-0">{{ _('Edit post') if post else _('New post') }}</h1>
    <a href="{{ url_for('post.admin_index') }}" class="btn btn-outline-secondary">{{ _('← Back to posts') }}</a>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
        <div class="alert alert-{{ 'danger' if category == 'danger' else 'success' }} py-2">{{ message }}</div>
    {% endfor %}
{% endwith %}

<form method="POST" class="card">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-12">
                <label class="form-label">{{ _('Title') }} *</label>
                <input name="title" class="form-control" required value="{{ post.title if post else '' }}">
            </div>
            <div class="col-12">
                <label class="form-label">{{ _('Excerpt') }}</label>
                <textarea name="excerpt" class="form-control" rows="3">{{ post.excerpt if post else '' }}</textarea>
            </div>
            <div class="col-12">
                <label class="form-label" for="post-content">{{ _('Content') }}</label>
                {# Progressive enhancement. The textarea is the real field and
                   works on its own; splent-editor.js (vendored, offline) hides
                   it, reveals the toolbar shell and writes clean semantic HTML
                   back into it on submit. #}
                <div data-splent-editor data-label-link-url="{{ _('Link URL') }}">
                    <div class="splent-editor" hidden>
                        <div class="splent-editor__toolbar" role="toolbar" aria-label="{{ _('Text formatting') }}">
                            <button type="button" data-cmd="bold" title="{{ _('Bold') }}" aria-label="{{ _('Bold') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg></button>
                            <button type="button" data-cmd="italic" title="{{ _('Italic') }}" aria-label="{{ _('Italic') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg></button>
                            <span class="splent-editor__sep" aria-hidden="true"></span>
                            <button type="button" data-cmd="h2" title="{{ _('Heading 2') }}" aria-label="{{ _('Heading 2') }}">H2</button>
                            <button type="button" data-cmd="h3" title="{{ _('Heading 3') }}" aria-label="{{ _('Heading 3') }}">H3</button>
                            <span class="splent-editor__sep" aria-hidden="true"></span>
                            <button type="button" data-cmd="ul" title="{{ _('Bulleted list') }}" aria-label="{{ _('Bulleted list') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg></button>
                            <button type="button" data-cmd="ol" title="{{ _('Numbered list') }}" aria-label="{{ _('Numbered list') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="10" y1="6" x2="21" y2="6"></line><line x1="10" y1="12" x2="21" y2="12"></line><line x1="10" y1="18" x2="21" y2="18"></line><path d="M4 6h1v4"></path><path d="M4 10h2"></path><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"></path></svg></button>
                            <button type="button" data-cmd="quote" title="{{ _('Blockquote') }}" aria-label="{{ _('Blockquote') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 6H3"></path><path d="M21 12H8"></path><path d="M21 18H8"></path><path d="M3 12v6"></path></svg></button>
                            <span class="splent-editor__sep" aria-hidden="true"></span>
                            <button type="button" data-cmd="link" title="{{ _('Link') }}" aria-label="{{ _('Link') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></button>
                            <button type="button" data-cmd="image" title="{{ _('Insert image') }}" aria-label="{{ _('Insert image') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></button>
                            <button type="button" data-cmd="code" title="{{ _('Code block') }}" aria-label="{{ _('Code block') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg></button>
                            <span class="splent-editor__sep" aria-hidden="true"></span>
                            <button type="button" data-cmd="undo" title="{{ _('Undo') }}" aria-label="{{ _('Undo') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg></button>
                            <button type="button" data-cmd="redo" title="{{ _('Redo') }}" aria-label="{{ _('Redo') }}"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg></button>
                            <span class="splent-editor__sep" aria-hidden="true"></span>
                            <button type="button" data-cmd="html" title="{{ _('Edit HTML source') }}" aria-label="{{ _('Edit HTML source') }}">HTML</button>
                        </div>
                        <div class="splent-editor__area" contenteditable="true"></div>
                    </div>
                    <textarea name="content" id="post-content" class="form-control" rows="14">{{ post.content if post else '' }}</textarea>
                </div>
            </div>
            <div class="col-12">
                <label class="form-label">{{ _('Featured image') }}</label>
                {% from "media/_picker.html" import media_picker %}
                {{ media_picker("featured_image", post.featured_image if post else None, media, value_attr="url") }}
            </div>
            <div class="col-md-4">
                <label class="form-label">{{ _('Published at') }}</label>
                <input name="published_at" type="datetime-local" class="form-control" value="{{ post.published_at.strftime('%Y-%m-%dT%H:%M') if post and post.published_at else '' }}">
                <div class="form-text">{{ _('Leave empty to publish now. A published post with a future date stays hidden until that time.') }}</div>
            </div>
            <div class="col-md-4">
                <label class="form-label">{{ _('Status') }}</label>
                <select name="status" class="form-select">
                    <option value="published" {{ 'selected' if post and post.status == 'published' else '' }}>{{ _('Published') }}</option>
                    <option value="draft" {{ 'selected' if post and post.status == 'draft' else '' }}>{{ _('Draft') }}</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">{{ _('Comments') }}</label>
                <select name="comment_status" class="form-select">
                    <option value="open" {{ 'selected' if post and post.comment_status == 'open' else '' }}>{{ _('Open') }}</option>
                    <option value="closed" {{ 'selected' if post and post.comment_status == 'closed' else '' }}>{{ _('Closed') }}</option>
                </select>
            </div>
            <div class="col-12">
                <label class="form-label">{{ _('Categories') }}</label>
                <div class="row g-2">
                    {% for c in categories %}
                    <div class="col-md-4 col-sm-6">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="categories" value="{{ c.id }}" id="category-{{ c.id }}" {% if post and c in post.categories %}checked{% endif %}>
                            <label class="form-check-label" for="category-{{ c.id }}">{{ c.name }}</label>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% if not categories %}<div class="form-text">{{ _('No categories yet.') }}</div>{% endif %}
            </div>
        </div>
    </div>
    <div class="card-footer text-end">
        <a href="{{ url_for('post.admin_index') }}" class="btn btn-link text-muted">{{ _('Cancel') }}</a>
        {# Preview saves first. The button submits the form with action=preview,
           the route stores the post and redirects to the admin-only preview,
           so what you see is exactly what the public detail template renders. #}
        <button class="btn btn-outline-secondary" type="submit" name="action" value="preview">{{ _('Save and preview') }}</button>
        <button class="btn btn-primary" type="submit">{{ _('Save changes') if post else _('Create post') }}</button>
    </div>
</form>

{# Insert image dialog for the editor. Outside the <form> on purpose, so the
   picker radios are never submitted with the post. Reuses the one shared
   media picker, the same control the featured image uses. #}
<dialog class="splent-editor-dialog" data-editor-image-dialog>
    <h2 class="h5 mb-3">{{ _('Insert image') }}</h2>
    {{ media_picker("editor_image", None, media, value_attr="url", allow_none=false) }}
    <div class="splent-editor-dialog__actions">
        <button type="button" class="btn btn-link text-muted" data-editor-image-cancel>{{ _('Cancel') }}</button>
        <button type="button" class="btn btn-primary" data-editor-image-insert>{{ _('Insert image') }}</button>
    </div>
</dialog>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('post.assets', subfolder='vendor', filename='splent-editor.js') }}"></script>
{% endblock %}