{% extends "admin/base_admin.html" %}
{% set admin_page = "articles" %}

{% block title %}{% if editing %}Edit{% else %}New{% endif %} Article - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
  <div style="max-width: 48rem; margin: 0 auto;">
    <a href="{{ url_for('admin.articles') }}" class="text-sm text-slate">&larr; Back to articles</a>
    <h1 class="text-2xl mt-4 mb-6">{% if editing %}Edit{% else %}New{% endif %} Article</h1>

    <form method="post" class="card">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;" class="mb-4">
        <div>
          <label class="form-label" for="title">Title</label>
          <input type="text" id="title" name="title" value="{{ data.get('title', '') }}" class="form-input" required>
        </div>
        <div>
          <label class="form-label" for="slug">Slug</label>
          <input type="text" id="slug" name="slug" value="{{ data.get('slug', '') }}" class="form-input"
                 placeholder="auto-generated from title" {% if editing %}readonly{% endif %}>
        </div>
      </div>

      <div class="mb-4">
        <label class="form-label" for="url_path">URL Path</label>
        <input type="text" id="url_path" name="url_path" value="{{ data.get('url_path', '') }}" class="form-input"
               placeholder="e.g. /padel-court-cost-miami">
        <p class="form-hint">Defaults to /slug. Must not conflict with existing routes.</p>
      </div>

      <div class="mb-4">
        <label class="form-label" for="meta_description">Meta Description</label>
        <input type="text" id="meta_description" name="meta_description" value="{{ data.get('meta_description', '') }}"
               class="form-input" maxlength="160">
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;" class="mb-4">
        <div>
          <label class="form-label" for="country">Country</label>
          <input type="text" id="country" name="country" value="{{ data.get('country', '') }}" class="form-input"
                 placeholder="e.g. US">
        </div>
        <div>
          <label class="form-label" for="region">Region</label>
          <input type="text" id="region" name="region" value="{{ data.get('region', '') }}" class="form-input"
                 placeholder="e.g. North America">
        </div>
        <div>
          <label class="form-label" for="og_image_url">OG Image URL</label>
          <input type="text" id="og_image_url" name="og_image_url" value="{{ data.get('og_image_url', '') }}" class="form-input">
        </div>
      </div>

      <div class="mb-4">
        <label class="form-label" for="body">Body (Markdown)</label>
        <textarea id="body" name="body" rows="20" class="form-input"
                  style="font-family: var(--font-mono); font-size: 0.8125rem;" {% if not editing %}required{% endif %}>{{ data.get('body', '') }}</textarea>
        <p class="form-hint">Use [scenario:slug] to embed scenario widgets. Sections: :capex, :operating, :cashflow, :returns, :full</p>
      </div>

      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;" class="mb-4">
        <div>
          <label class="form-label" for="language">Language</label>
          <select id="language" name="language" class="form-input">
            <option value="en" {% if data.get('language', 'en') == 'en' %}selected{% endif %}>English (en)</option>
            <option value="de" {% if data.get('language') == 'de' %}selected{% endif %}>German (de)</option>
          </select>
        </div>
        <div>
          <label class="form-label" for="status">Status</label>
          <select id="status" name="status" class="form-input">
            <option value="draft" {% if data.get('status') == 'draft' %}selected{% endif %}>Draft</option>
            <option value="published" {% if data.get('status') == 'published' %}selected{% endif %}>Published</option>
          </select>
        </div>
        <div>
          <label class="form-label" for="published_at">Publish Date</label>
          <input type="datetime-local" id="published_at" name="published_at"
                 value="{{ data.get('published_at', '')[:16] if data.get('published_at') else '' }}" class="form-input">
          <p class="form-hint">Leave blank for now. Future date = scheduled.</p>
        </div>
      </div>

      <button type="submit" class="btn" style="width: 100%;">{% if editing %}Update Article{% else %}Create Article{% endif %}</button>
    </form>
  </div>
{% endblock %}
