{% extends 'base.html' %}

{% block main %}
<div x-data="axPostForm()">

        <form @submit.prevent="save('publish')">

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">New Post</h1>
              <p class="ax-page-head__subtitle">Write your article, set a cover &amp; category, then publish to the blog.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--ghost" href="/blog/list/">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l14 0"/><path d="M5 12l6 6"/><path d="M5 12l6 -6"/></svg>
                <span class="ax-btn__label">Back to blog</span>
              </a>
            </div>
          </div>
        </div>

        <!-- save success alert -->
        <div x-show="saved" x-cloak x-transition class="ax-alert ax-alert--success" role="status" style="margin-bottom:var(--ax-space-6);">
          <span class="ax-alert__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span>
          <div class="ax-alert__content"><p class="ax-alert__title" x-text="savedKind==='draft' ? 'Saved as draft' : 'Post published'"></p><p class="ax-alert__message" x-text="savedKind==='draft' ? 'Your draft is saved. Publish when it\'s ready.' : 'Your article is now live on the blog.'"></p></div>
          <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="saved=false" aria-label="Dismiss"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid" style="padding-bottom:96px;">

          <!-- ───────── LEFT COLUMN (8) ───────── -->
          <div class="ax-col--8" style="display:flex;flex-direction:column;gap:var(--ax-space-6);">

            <!-- ░░ TITLE & SLUG ░░ -->
            <section class="ax-card" role="region" aria-label="Title">
              <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-5);">
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-title">Title <span class="ax-field__required">*</span></label>
                  <input id="b-title" type="text" class="ax-input ax-input--lg" placeholder="A clear, compelling headline" x-model="form.title" @input="syncSlug()" maxlength="120" style="font-family:var(--ax-font-display);font-size:var(--ax-text-lg);font-weight:600;">
                  <span class="ax-help"><span class="ax-num" x-text="form.title.length"></span> / 120 — strong titles are specific and promise a payoff.</span>
                </div>
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-slug">URL slug</label>
                  <div class="ax-input-group">
                    <span class="ax-input-group__addon" style="color:var(--ax-text-subtle);font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);">/blog/</span>
                    <input id="b-slug" type="text" class="ax-input ax-num" x-model="form.slug" style="border:0;background:transparent;font-family:var(--ax-font-mono);" placeholder="your-post-slug">
                  </div>
                  <span class="ax-help">Auto-generated from the title — edit for a custom link.</span>
                </div>
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-excerpt">Excerpt</label>
                  <textarea id="b-excerpt" class="ax-textarea" rows="2" placeholder="A one-or-two-line summary shown on cards, search and social previews." x-model="form.excerpt" maxlength="180" style="min-height:64px;"></textarea>
                  <span class="ax-help"><span class="ax-num" x-text="form.excerpt.length"></span> / 180 characters</span>
                </div>
              </div>
            </section>

            <!-- ░░ COVER IMAGE ░░ -->
            <section class="ax-card" role="region" aria-label="Cover image">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Cover image</h2><p class="ax-card__subtitle">Shown at the top of the article and on listing cards.</p></div></div>
              <div class="ax-card__body" style="padding-top:0;">
                <!-- empty: dropzone -->
                <div class="ax-dropzone" :class="dragover ? 'is-dragover' : ''" x-show="!cover">
                  <label class="ax-dropzone__area" for="b-cover" @dragover.prevent="dragover=true" @dragleave="dragover=false" @drop.prevent="dragover=false;setCover()" style="cursor:pointer;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 8h.01"/><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"/><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"/></svg>
                    <div><b style="color:var(--ax-text);">Click to upload</b> or drag &amp; drop</div>
                    <small style="color:var(--ax-text-subtle);">PNG, JPG or WEBP up to 5 MB · 16:9 recommended</small>
                    <input id="b-cover" type="file" accept="image/*" class="ax-visually-hidden" @change="setCover()">
                  </label>
                </div>
                <!-- filled: preview -->
                <div x-show="cover" x-cloak style="position:relative;aspect-ratio:16/9;border-radius:var(--ax-radius-md);overflow:hidden;border:1px solid var(--ax-border);" :style="`background:linear-gradient(135deg,color-mix(in oklab,var(--ax-viz-violet) 50%,var(--ax-accent)),color-mix(in oklab,var(--ax-viz-cyan) 55%,transparent));`">
                  <div style="position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:.8;"><svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 8h.01"/><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"/></svg></div>
                  <div class="ax-cluster" style="position:absolute;top:var(--ax-space-3);inset-inline-end:var(--ax-space-3);gap:var(--ax-space-2);">
                    <button type="button" class="ax-btn ax-btn--sm" @click="setCover()" style="background:color-mix(in oklab,var(--ax-canvas) 60%,transparent);color:var(--ax-text-strong);border:0;backdrop-filter:blur(6px);"><span class="ax-btn__label">Replace</span></button>
                    <button type="button" class="ax-btn ax-btn--icon ax-btn--sm" @click="cover=false" aria-label="Remove cover" style="background:color-mix(in oklab,var(--ax-canvas) 60%,transparent);color:var(--ax-text-strong);border:0;backdrop-filter:blur(6px);"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
                  </div>
                </div>
                <div class="ax-field" style="margin-top:var(--ax-space-4);margin-bottom:0;">
                  <label class="ax-label" for="b-alt">Alt text</label>
                  <input id="b-alt" type="text" class="ax-input" placeholder="Describe the image for screen readers" x-model="form.alt">
                </div>
              </div>
            </section>

            <!-- ░░ BODY EDITOR ░░ -->
            <section class="ax-card" role="region" aria-label="Article body">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Body</h2><p class="ax-card__subtitle">The full article. Use the toolbar to format.</p></div><span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);"><span x-text="wordCount()"></span> words · <span x-text="readTime()"></span> min read</span></div>
              <div class="ax-card__body" style="padding-top:0;">
                <!-- toolbar -->
                <div role="toolbar" aria-label="Formatting" style="display:flex;gap:2px;padding:6px;border:1px solid var(--ax-border);border-bottom:0;border-radius:var(--ax-radius-sm) var(--ax-radius-sm) 0 0;background:var(--ax-surface-subtle);flex-wrap:wrap;">
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm" aria-label="Heading"><span class="ax-btn__label" style="font-family:var(--ax-font-display);font-weight:700;">H</span></button>
                  <span style="width:1px;background:var(--ax-border);margin:2px 4px;"></span>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Bold"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z"/><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"/></svg></button>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Italic"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 5l6 0"/><path d="M7 19l6 0"/><path d="M14 5l-4 14"/></svg></button>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Inline code"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 8l-4 4l4 4"/><path d="M17 8l4 4l-4 4"/><path d="M14 4l-4 16"/></svg></button>
                  <span style="width:1px;background:var(--ax-border);margin:2px 4px;"></span>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Bulleted list"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l11 0"/><path d="M9 12l11 0"/><path d="M9 18l11 0"/><path d="M5 6l0 .01"/><path d="M5 12l0 .01"/><path d="M5 18l0 .01"/></svg></button>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Quote"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"/><path d="M19 11h-4a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v6c0 2.667 -1.333 4.333 -4 5"/></svg></button>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Insert link"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 15l6 -6"/><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"/><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"/></svg></button>
                  <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" aria-label="Insert image"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 8h.01"/><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12"/><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"/><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"/></svg></button>
                </div>
                <textarea id="b-body" class="ax-textarea" rows="14" placeholder="Start writing your story… A strong opening earns the next paragraph — lead with the payoff, then explain how you got there." x-model="form.body" style="border-radius:0 0 var(--ax-radius-sm) var(--ax-radius-sm);min-height:340px;line-height:1.7;"></textarea>
              </div>
            </section>

            <!-- ░░ SEO ░░ -->
            <section class="ax-card" role="region" aria-label="Search engine listing">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Search &amp; social preview</h2><p class="ax-card__subtitle">How this post appears in search results and shares.</p></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
                <div style="padding:var(--ax-space-4);border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);background:var(--ax-surface-subtle);">
                  <span class="ax-num" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="'vireo.blog › blog › ' + (form.slug || 'your-post-slug')"></span>
                  <div style="color:var(--ax-accent);font-size:var(--ax-text-md);font-weight:var(--ax-weight-medium);margin-top:4px;" x-text="form.metaTitle || form.title || 'Your post title'"></div>
                  <div style="color:var(--ax-text-muted);font-size:var(--ax-text-sm);line-height:1.4;margin-top:2px;" x-text="form.metaDesc || form.excerpt || 'Your meta description appears here. Aim for 120–155 characters.'"></div>
                </div>
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-metatitle">Meta title</label>
                  <input id="b-metatitle" type="text" class="ax-input" placeholder="Defaults to the post title" x-model="form.metaTitle" maxlength="70">
                  <span class="ax-help"><span class="ax-num" :style="form.metaTitle.length>60 ? 'color:var(--ax-warning-500);' : ''" x-text="form.metaTitle.length"></span> / 70</span>
                </div>
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-metadesc">Meta description</label>
                  <textarea id="b-metadesc" class="ax-textarea" rows="2" placeholder="A concise summary for search engines" x-model="form.metaDesc" maxlength="160" style="min-height:64px;"></textarea>
                  <span class="ax-help"><span class="ax-num" :style="form.metaDesc.length>155 ? 'color:var(--ax-warning-500);' : ''" x-text="form.metaDesc.length"></span> / 160</span>
                </div>
              </div>
            </section>
          </div>

          <!-- ───────── RIGHT RAIL (4) ───────── -->
          <aside class="ax-col--4" style="display:flex;flex-direction:column;gap:var(--ax-space-6);">

            <!-- ░░ PUBLISH ░░ -->
            <section class="ax-card" role="region" aria-label="Publish">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Publish</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-3);">
                <template x-for="s in statuses" :key="s.id">
                  <label style="display:flex;align-items:center;gap:var(--ax-space-3);cursor:pointer;border-radius:var(--ax-radius-md);padding:var(--ax-space-3) var(--ax-space-4);border:1.5px solid;transition:border-color var(--ax-motion-fast) var(--ax-ease-standard);"
                         :style="form.status===s.id ? 'border-color:var(--ax-accent);background:var(--ax-accent-wash);' : 'border-color:var(--ax-border);background:var(--ax-surface);'">
                    <input type="radio" name="b-status" class="ax-radio" :value="s.id" x-model="form.status">
                    <span style="width:8px;height:8px;border-radius:50%;flex:none;" :style="`background:${s.c};`"></span>
                    <span style="flex:1 1 auto;"><span style="display:block;font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);color:var(--ax-text-strong);" x-text="s.name"></span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);" x-text="s.desc"></span></span>
                  </label>
                </template>
                <div class="ax-field" x-show="form.status==='scheduled'" x-cloak style="margin:var(--ax-space-1) 0 0;">
                  <label class="ax-label" for="b-schedule">Publish date</label>
                  <input id="b-schedule" type="datetime-local" class="ax-input ax-num" x-model="form.scheduleDate" style="font-family:var(--ax-font-mono);">
                </div>
                <div class="ax-divider" role="separator" style="height:1px;background:var(--ax-border);margin:var(--ax-space-1) 0;"></div>
                <label class="ax-check" style="gap:var(--ax-space-3);">
                  <input type="checkbox" class="ax-switch" x-model="form.featured">
                  <span style="display:flex;flex-direction:column;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);font-weight:var(--ax-weight-medium);">Feature on homepage</span><span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Pins this post to the top of the blog.</span></span>
                </label>
                <label class="ax-check" style="gap:var(--ax-space-3);">
                  <input type="checkbox" class="ax-switch" x-model="form.comments">
                  <span style="display:flex;flex-direction:column;"><span style="font-size:var(--ax-text-sm);color:var(--ax-text);font-weight:var(--ax-weight-medium);">Allow comments</span><span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Readers can respond below the article.</span></span>
                </label>
              </div>
            </section>

            <!-- ░░ ORGANIZE ░░ -->
            <section class="ax-card" role="region" aria-label="Organize">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Organize</h2></div></div>
              <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-5);">
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-category">Category <span class="ax-field__required">*</span></label>
                  <select id="b-category" class="ax-select" x-model="form.category">
                    <option value="">Select a category</option>
                    <option value="eng">Engineering</option>
                    <option value="design">Design</option>
                    <option value="product">Product</option>
                    <option value="growth">Growth</option>
                    <option value="culture">Culture</option>
                  </select>
                </div>
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-author">Author</label>
                  <select id="b-author" class="ax-select" x-model="form.author">
                    <option value="devon">Devon Okafor</option>
                    <option value="lena">Lena Brandt</option>
                    <option value="priya">Priya Nair</option>
                    <option value="marcus">Marcus Reid</option>
                    <option value="ava">Ava Sutton</option>
                  </select>
                </div>
                <!-- tags token input -->
                <div class="ax-field" style="margin:0;">
                  <label class="ax-label" for="b-tags">Tags</label>
                  <div class="ax-tags">
                    <template x-for="(t, ti) in form.tags" :key="ti">
                      <span class="ax-badge ax-badge--accent ax-badge--soft ax-badge--pill" style="gap:4px;"><span x-text="t"></span><button type="button" @click="form.tags.splice(ti,1)" :aria-label="'Remove tag ' + t" style="background:none;border:0;cursor:pointer;color:inherit;display:inline-flex;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:11px;height:11px;"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button></span>
                    </template>
                    <input id="b-tags" type="text" class="ax-tags__input" placeholder="Add a tag…" @keydown.enter.prevent="addTag($event)" @keydown.comma.prevent="addTag($event)">
                  </div>
                  <span class="ax-help">Press Enter or comma to add. Helps readers discover this post.</span>
                </div>
              </div>
            </section>

            <!-- ░░ CHECKLIST ░░ -->
            <section class="ax-card" role="region" aria-label="Publish checklist">
              <div class="ax-card__header"><div class="ax-card__titles"><h2 class="ax-card__title">Ready to publish?</h2></div></div>
              <ul class="ax-list ax-list--compact" style="padding:0 var(--ax-space-4) var(--ax-space-4);">
                <template x-for="c in checklist" :key="c.label">
                  <li class="ax-list__row" style="border:0;">
                    <span class="ax-list__leading">
                      <svg x-show="c.done" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:var(--ax-viz-emerald);"><path d="M5 12l5 5l10 -10"/></svg>
                      <svg x-show="!c.done" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:var(--ax-text-subtle);"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/></svg>
                    </span>
                    <span class="ax-list__content"><span class="ax-list__title" style="font-size:var(--ax-text-sm);" :style="c.done ? 'color:var(--ax-text);' : 'color:var(--ax-text-muted);'" x-text="c.label"></span></span>
                  </li>
                </template>
              </ul>
            </section>
          </aside>
        </div>

        <!-- ════════════════ STICKY ACTION BAR ════════════════ -->
        <div style="position:sticky;bottom:0;z-index:5;margin-inline:calc(-1 * var(--ax-page-pad, var(--ax-space-6)));padding:var(--ax-space-4) var(--ax-page-pad, var(--ax-space-6));background:var(--ax-surface);backdrop-filter:blur(18px) saturate(1.1);border-top:1px solid var(--ax-border);box-shadow:var(--ax-shadow-sm);">
          <div class="ax-cluster" style="justify-content:space-between;gap:var(--ax-space-3);flex-wrap:wrap;">
            <span class="ax-cluster" style="gap:var(--ax-space-2);font-size:var(--ax-text-sm);color:var(--ax-text-muted);">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color:var(--ax-text-subtle);"><path d="M12 7a5 5 0 1 0 5 5"/><path d="M13 3.055a9 9 0 1 0 7.941 7.945"/><path d="M15 6v3h3l3 -3h-3v-3z"/><path d="M15 9l-3 3"/></svg>
              <span>Draft autosaved · just now</span>
            </span>
            <div class="ax-cluster" style="gap:var(--ax-space-2);">
              <button type="button" class="ax-btn ax-btn--ghost">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
                <span class="ax-btn__label">Preview</span>
              </button>
              <button type="button" class="ax-btn ax-btn--secondary" @click="save('draft')">Save draft</button>
              <button type="submit" class="ax-btn ax-btn--primary">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14l11 -11"/><path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"/></svg>
                <span class="ax-btn__label">Publish post</span>
              </button>
            </div>
          </div>
        </div>

        </form>

        
      
</div>
{% endblock %}

{% block scripts %}
<script>
          function axPostForm(){
            return {
              saved:false, savedKind:'', dragover:false, cover:false,
              form:{
                title:'', slug:'', excerpt:'', alt:'', body:'',
                metaTitle:'', metaDesc:'',
                status:'draft', scheduleDate:'', featured:false, comments:true,
                category:'', author:'devon', tags:[],
              },
              statuses:[
                { id:'draft', name:'Draft', desc:'Only visible to your team', c:'var(--ax-text-subtle)' },
                { id:'published', name:'Published', desc:'Live on the blog immediately', c:'var(--ax-viz-emerald)' },
                { id:'scheduled', name:'Scheduled', desc:'Goes live at a set time', c:'var(--ax-viz-amber)' },
              ],
              /* A getter, not a plain array. Arrow functions written directly in this
                 object literal capture `this` from the enclosing scope (window), not
                 the Alpine component — every `c.done()` threw before the checklist
                 could render. Inside a getter `this` is the reactive proxy, so the
                 list also re-evaluates whenever the fields it reads change. */
              get checklist(){ return [
                { label:'Title is set', done: this.form.title.trim().length>3 },
                { label:'Excerpt written', done: this.form.excerpt.trim().length>10 },
                { label:'Cover image added', done: this.cover },
                { label:'Category selected', done: !!this.form.category },
                { label:'At least one tag', done: this.form.tags.length>0 },
                { label:'Body has content', done: this.wordCount()>20 },
              ]; },
              slugify(s){ return s.toLowerCase().trim().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,''); },
              syncSlug(){ this.form.slug = this.slugify(this.form.title); },
              setCover(){ this.cover=true; },
              addTag(e){ const v=e.target.value.trim().replace(/,$/,''); if(v && !this.form.tags.includes(v)){ this.form.tags.push(v); } e.target.value=''; },
              wordCount(){ const t=this.form.body.trim(); return t ? t.split(/\s+/).length : 0; },
              readTime(){ return Math.max(1, Math.round(this.wordCount()/200)); },
              save(kind){ this.savedKind=kind; this.saved=true; window.scrollTo({top:0,behavior:'smooth'}); setTimeout(()=>{ this.saved=false; }, 4000); },
            };
          }
        </script>
{% endblock %}