{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<section class="page-hero compact-hero py-5">
  <div class="container">
    <span class="eyebrow">Signal CMS</span>
    <h1 class="display-title small-title">Publish an original story.</h1>
    <p class="hero-copy narrow-copy">This first workflow lets editors submit a polished brief, publish it immediately, and have it appear beside imported RSS coverage.</p>
  </div>
</section>

<section class="section-block pb-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-7">
        <form method="post" class="glass-panel article-form-card">
          {% csrf_token %}
          {% if form.non_field_errors %}
          <div class="alert alert-danger">{{ form.non_field_errors }}</div>
          {% endif %}
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label" for="{{ form.title.id_for_label }}">Headline</label>
              {{ form.title }}
              <div class="form-error">{{ form.title.errors }}</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="{{ form.topic.id_for_label }}">Topic</label>
              {{ form.topic }}
              <div class="form-error">{{ form.topic.errors }}</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="{{ form.author_name.id_for_label }}">Author</label>
              {{ form.author_name }}
              <div class="form-error">{{ form.author_name.errors }}</div>
            </div>
            <div class="col-12">
              <label class="form-label" for="{{ form.excerpt.id_for_label }}">Deck / summary</label>
              {{ form.excerpt }}
              <div class="form-error">{{ form.excerpt.errors }}</div>
            </div>
            <div class="col-12">
              <label class="form-label" for="{{ form.content.id_for_label }}">Story body</label>
              {{ form.content }}
              <div class="form-error">{{ form.content.errors }}</div>
            </div>
            <div class="col-12 form-check-wrapper">
              <div class="form-check">{{ form.is_featured }} <label class="form-check-label" for="{{ form.is_featured.id_for_label }}">{{ form.is_featured.label }}</label></div>
            </div>
            <div class="col-12 d-flex flex-wrap gap-3">
              <button class="btn btn-signal btn-lg" type="submit">Publish story</button>
              <a class="btn btn-outline-light btn-lg" href="/admin/">Manage in admin</a>
            </div>
          </div>
        </form>
      </div>
      <div class="col-lg-5">
        <div class="editorial-sidebar d-grid gap-4">
          <div class="glass-panel sidebar-card">
            <span class="eyebrow">What this validates</span>
            <ul class="detail-list mb-0">
              <li><strong>Summary</strong><span>Minimum 20 characters</span></li>
              <li><strong>Body</strong><span>Minimum 80 characters</span></li>
              <li><strong>Topic</strong><span>Connects to list filters</span></li>
            </ul>
          </div>
          <div class="glass-panel sidebar-card">
            <span class="eyebrow">End-to-end flow</span>
            <p class="mb-0">Submit → see confirmation → open detail page → find the story in the main listing. That gives you a real MVP slice from CMS input to public consumption.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}