{% extends "base.html" %}

{% block title %}{% if editing %}Edit Post{% else %}New Post{% endif %} - {{ project_slug }} - Dashboard{% endblock %}
{% block body_attrs %} class="{{ crate::shell::measure(crate::shell::Measure::Wide) }} blog-editor"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <div class="breadcrumb">
            <a href="/dashboard">Dashboard</a> /
            <a href="/dashboard/project/{{ project_slug }}">{{ project_slug }}</a> /
            <a href="/dashboard/project/{{ project_slug }}?tab=content">Blog</a> /
            {% if editing %}Edit{% else %}New Post{% endif %}
        </div>

        <h1 class="page-title">{% if editing %}Edit Post{% else %}New Blog Post{% endif %}<span class="dot">.</span></h1>

        <div class="editor-form" id="blog-editor" data-project-id="{{ project_id }}" data-project-slug="{{ project_slug }}"{% if editing %} data-post-id="{{ post_id }}"{% endif %}>
            <div class="form-group">
                <label for="post-title">Title</label>
                <input type="text" id="post-title" class="blog-editor-input input--sm w-full" placeholder="Post title"
                       value="{{ post_title }}">
            </div>
            <div class="form-group">
                <label for="post-slug">Slug (optional, auto-generated from title)</label>
                <input type="text" id="post-slug" class="blog-editor-input input--sm w-full" placeholder="post-slug"
                       value="{{ post_slug }}"
                       hx-post="/api/validate/blog-slug"
                       hx-trigger="keyup changed delay:500ms"
                       hx-target="#blog-slug-status"
                       hx-indicator="#blog-slug-spinner"
                       hx-vals='{"project_id": "{{ project_id }}"}'>
                <span id="blog-slug-spinner" class="htmx-indicator blog-editor-slug-spinner">Checking...</span>
                <span id="blog-slug-status"></span>
            </div>
            {# The described markdown field. Keeps the id `post-body`, which is
               what `blog-editor.js` reads on save and on autosave; the picker
               below addresses it by NAME (`body`). #}
            {{ crate::quasi::rich_field::html("post", "Content (Markdown)", "Write your post in Markdown...", post_body, crate::quasi::rich_field::Height::Tall)|safe }}
            {{ crate::quasi::media_picker::trigger("body")|safe }}
            {% if is_changelog_project %}
            <div class="form-group blog-editor-landing-toggle">
                <label for="post-show-on-landing">
                    <input type="checkbox" id="post-show-on-landing"{% if post_show_on_landing %} checked{% endif %}>
                    Show on landing
                </label>
                <p class="hint">Surfaces this post as the "Last shipped" line on the landing page. The most recent published post with this set wins; uncheck to retire it.</p>
            </div>
            {% endif %}
            <div class="blog-editor-actions">
                <button class="btn-primary" id="save-draft-btn">{% if editing %}Save as Draft{% else %}Save Draft{% endif %}</button>
                <button class="btn-secondary" id="publish-btn">{% if editing && post_is_published %}Update{% else %}Publish{% endif %}</button>
                <a href="/dashboard/project/{{ project_slug }}?tab=content">
                    <button class="btn-secondary" type="button">Cancel</button>
                </a>
            </div>
            <div id="post-status" class="blog-editor-status"></div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
<script src="/static/blog-editor.js"></script>
{% endblock %}