<%- include('../partials/header', { title }) %>

<div class="admin-page-head">
  <h2><%= article ? 'Edit Article' : 'New Article' %></h2>
  <a href="/admin/articles" class="btn btn-outline btn-sm">← Back to Insights</a>
</div>

<form action="<%= article ? `/admin/articles/${article.id}` : '/admin/articles' %>" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>" />

  <div class="admin-form-grid">
    <div class="admin-panel">
      <h3>Content</h3>
      <div class="field">
        <label for="title">Title</label>
        <input id="title" name="title" type="text" required value="<%= article?.title || '' %>" data-slug-source="slug" />
      </div>
      <div class="field">
        <label for="slug">URL slug</label>
        <input id="slug" name="slug" type="text" value="<%= article?.slug || '' %>" />
      </div>
      <div class="field">
        <label for="excerpt">Excerpt</label>
        <textarea id="excerpt" name="excerpt" rows="2" maxlength="400"><%= article?.excerpt || '' %></textarea>
      </div>
      <div class="field">
        <label for="bodyMarkdown">Body <span class="hint">(Markdown supported)</span></label>
        <textarea id="bodyMarkdown" name="bodyMarkdown" rows="18" required style="font-family: ui-monospace, monospace; font-size: 0.8125rem;"><%= article?.body_markdown || '' %></textarea>
      </div>

      <h3 style="margin-top: 1.5rem;">SEO</h3>
      <div class="field">
        <label for="metaTitle">Meta title <span class="hint">(optional)</span></label>
        <input id="metaTitle" name="metaTitle" type="text" maxlength="160" value="<%= article?.meta_title || '' %>" />
      </div>
      <div class="field">
        <label for="metaDescription">Meta description <span class="hint">(optional)</span></label>
        <textarea id="metaDescription" name="metaDescription" rows="2" maxlength="255"><%= article?.meta_description || '' %></textarea>
      </div>
    </div>

    <div>
      <div class="admin-panel">
        <h3>Publishing</h3>
        <div class="field">
          <label for="status">Status</label>
          <select id="status" name="status">
            <option value="draft" <%= (article?.status || 'draft') === 'draft' ? 'selected' : '' %>>Draft</option>
            <option value="published" <%= article?.status === 'published' ? 'selected' : '' %>>Published</option>
          </select>
        </div>
        <div class="field">
          <label for="publishedAt">Published date <span class="hint">(optional)</span></label>
          <input id="publishedAt" name="publishedAt" type="datetime-local" value="<%= article?.published_at ? new Date(article.published_at).toISOString().slice(0,16) : '' %>" />
        </div>
        <div class="checkbox-field">
          <input id="isFeatured" name="isFeatured" type="checkbox" value="1" <%= article?.is_featured ? 'checked' : '' %> />
          <label for="isFeatured">Featured on homepage</label>
        </div>
        <div class="field">
          <label for="readingMinutes">Reading time (min) <span class="hint">(auto if blank)</span></label>
          <input id="readingMinutes" name="readingMinutes" type="number" min="1" value="<%= article?.reading_minutes || '' %>" />
        </div>
      </div>

      <div class="admin-panel">
        <h3>Taxonomy</h3>
        <div class="field">
          <label for="categoryId">Category</label>
          <select id="categoryId" name="categoryId">
            <option value="">— Select —</option>
            <% categories.forEach(function(c) { %>
              <option value="<%= c.id %>" <%= article?.category_id === c.id ? 'selected' : '' %>><%= c.name %></option>
            <% }); %>
          </select>
        </div>
        <div class="field">
          <label for="authorId">Author</label>
          <select id="authorId" name="authorId">
            <option value="">— Kubera Wealth Management —</option>
            <% authors.forEach(function(a) { %>
              <option value="<%= a.id %>" <%= article?.author_id === a.id ? 'selected' : '' %>><%= a.name %></option>
            <% }); %>
          </select>
        </div>
        <div class="field">
          <label for="tags">Tags <span class="hint">(comma separated)</span></label>
          <input id="tags" name="tags" type="text" value="<%= article?.tags || '' %>" />
        </div>
      </div>

      <div class="admin-panel">
        <h3>Cover Image</h3>
        <div class="image-preview" id="cover-preview">
          <% if (article?.cover_image_path) { %><img src="<%= article.cover_image_path %>" alt="" /><% } else { %><span>No cover image</span><% } %>
        </div>
        <input type="file" name="coverImage" accept="image/*" data-image-input="cover-preview" />
      </div>
    </div>
  </div>

  <div class="form-sticky-actions">
    <button class="btn btn-primary" type="submit">Save Article</button>
    <a href="/admin/articles" class="btn btn-outline">Cancel</a>
  </div>
</form>

<%- include('../partials/footer') %>
