{% extends "admin/base.html" %}
{% from "admin/_image_picker_field.html" import image_picker_field %}
{% set is_edit = post is not none %}
{% block title %}{{ 'Edit' if is_edit else 'New' }} post · bragi admin{% endblock %}
{% block content %}
<h1>{{ 'Edit post' if is_edit else 'New post' }}</h1>
{% if is_edit %}
<p style="margin-top: -0.5em; color: #666;">
  <a href="{{ url_for('internal_links_admin.backlinks', target_type='post', target_id=post.id) }}">Backlinks &raquo;</a>
</p>
{% endif %}

<form method="post"
      action="{{ url_for('post_admin.edit_post', post_id=post.id) if is_edit else url_for('post_admin.new_post') }}">
  <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
  <fieldset>
    <label for="title">Title</label>
    <input type="text" name="title" id="title" required
           value="{{ form.get('title', '') }}">
  </fieldset>

  <fieldset>
    <label for="slug">Slug</label>
    <input type="text" name="slug" id="slug" required pattern="[a-z0-9-]+"
           value="{{ form.get('slug', '') }}">
  </fieldset>

  <fieldset>
    <label for="body_markdown">Body (markdown)</label>
    {% include "admin/_tiptap_editor.html" %}
    <textarea name="body_markdown" id="body_markdown">{{ form.get('body_markdown', '') }}</textarea>
  </fieldset>

  <fieldset>
    <label for="status">Status</label>
    <select name="status" id="status">
      {% set current_status = form.get('status', 'draft') %}
      <option value="draft" {% if current_status == 'draft' %}selected{% endif %}>Draft</option>
      <option value="scheduled" {% if current_status == 'scheduled' %}selected{% endif %}>Scheduled</option>
      <option value="published" {% if current_status == 'published' %}selected{% endif %}>Published</option>
      <option value="archived" {% if current_status == 'archived' %}selected{% endif %}>Archived</option>
    </select>
  </fieldset>

  {% if form.get('status') == 'published' %}
  <fieldset>
    <label style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
      <input type="checkbox" name="is_pinned" value="1"
             {% if form.get('is_pinned') == '1' %}checked{% endif %}>
      Pin on landing page
    </label>
    <label for="pinned_until" style="margin-left: 1.5rem;">
      Optional auto-unpin date:
      <input type="datetime-local" name="pinned_until" id="pinned_until"
             value="{{ form.get('pinned_until', '') }}">
    </label>
    <small style="margin-left: 1.5rem;">Naive UTC. Leave blank for an open-ended pin.</small>
  </fieldset>
  {% endif %}

  <fieldset>
    <label for="tags">Tags</label>
    <input type="text" name="tags" id="tags"
           value="{{ form.get('tags', '') }}">
    <small>Comma-separated. New tags are created on save; existing
       tags are re-used by slug.</small>
  </fieldset>

  {{ image_picker_field(
       name="featured_image_id",
       value=form.get("featured_image_id"),
       attachment=featured_image,
       thumb_storage_key=featured_image_thumb_key,
       label="Featured image",
       picker_url=url_for("attachment_admin.picker"),
       site_slug=request.view_args["site_slug"],
       helper="Optional. Used as og:image / twitter:image, the landing-page card thumbnail, and the post-detail hero. Falls back to the site's default featured image when unset."
     ) }}

  {% if is_edit %}
  <fieldset style="flex-direction: row; align-items: center; gap: 0.5rem;">
    <input type="checkbox" name="skip_redirect" id="skip_redirect" value="1">
    <label for="skip_redirect" style="margin: 0;">
      Skip redirect when slug changes (use for typo fixes in drafts)
    </label>
  </fieldset>
  {% endif %}

  <div class="actions">
    <button type="submit">{{ 'Save' if is_edit else 'Create' }}</button>
    <a href="{{ url_for('post_admin.list_posts') }}" class="btn secondary">Cancel</a>
  </div>
</form>

{% if not is_edit %}
<script>
  // Slug live-suggest: as the operator types the title, write a
  // slugified version into the slug field, until they touch it.
  // The server-side handler also fills empty slug at POST time;
  // this script is the live-UX layer.
  (function () {
    const titleEl = document.getElementById('title');
    const slugEl = document.getElementById('slug');
    if (!titleEl || !slugEl) return;
    let touched = slugEl.value.length > 0;
    slugEl.addEventListener('input', function () { touched = true; });
    titleEl.addEventListener('input', function () {
      if (touched) return;
      slugEl.value = slugify(titleEl.value);
    });
    function slugify(text) {
      return text
        .normalize('NFKD')
        .replace(/\p{M}/gu, '')
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
    }
  })();
</script>
{% endif %}
{% endblock %}