{% extends "base.html" %}

{% block title %}{% if editing %}Edit Post{% else %}New Post{% endif %} - {{ project_slug }} - Dashboard{% endblock %}
{% block body_attrs %} class="padded-page 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 }}" onclick="setTimeout(function(){document.getElementById('tab-blog').click()},100)">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>
            <div class="form-group">
                <label for="post-body">Content (Markdown)</label>
                <textarea id="post-body" rows="20" class="blog-editor-input input--sm w-full" placeholder="Write your post in Markdown...">{{ post_body }}</textarea>
                <button type="button" class="btn-secondary blog-editor-media-btn" onclick="mediaPickerOpen('post-body')">Insert Image</button>
            </div>
            {% 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 }}" onclick="setTimeout(function(){document.getElementById('tab-blog').click()},100)">
                    <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/media-picker.js"></script>
<script src="/static/blog-editor.js"></script>
{% endblock %}