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

{% block title %}{% if article %}Edit Article{% else %}New Article{% endif %} — Admin{% endblock %}
{% block topbar_title %}{% if article %}Edit Article{% else %}New Article{% endif %}{% endblock %}

{% block admin_content %}
  <div style="margin-bottom:16px;">
    <a href="{{ url_for('cms.cms_index') }}" style="font-size:13px;color:#64748B;text-decoration:none;">
      ← Articles
    </a>
  </div>

  <div class="card" style="padding:20px;max-width:720px;">
    <form method="post"
          action="{{ url_for('cms.cms_edit', article_id=article.id) if article else url_for('cms.cms_new') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div style="display:grid;gap:16px;">
        <div>
          <label class="text-sm" style="display:block;margin-bottom:4px;font-weight:500;">Title *</label>
          <input type="text" name="title" value="{{ article.title if article else '' }}" required
                 placeholder="Article title"
                 style="width:100%;box-sizing:border-box;border:1px solid #CBD5E1;border-radius:6px;padding:8px 12px;font-size:14px;">
        </div>

        <div>
          <label class="text-sm" style="display:block;margin-bottom:4px;font-weight:500;">
            URL Path *
            <span style="font-weight:400;color:#94A3B8;font-size:11px;">e.g. /coffee/brazil</span>
          </label>
          <input type="text" name="url_path" value="{{ article.url_path if article else '' }}" required
                 placeholder="/coffee/country-name"
                 style="width:100%;box-sizing:border-box;border:1px solid #CBD5E1;border-radius:6px;padding:8px 12px;font-size:14px;font-family:monospace;">
        </div>

        <div>
          <label class="text-sm" style="display:block;margin-bottom:4px;font-weight:500;">
            Meta Description
            <span style="font-weight:400;color:#94A3B8;font-size:11px;">150–160 chars</span>
          </label>
          <textarea name="meta_description" maxlength="300" rows="2"
                    placeholder="Short description for search engines"
                    style="width:100%;box-sizing:border-box;border:1px solid #CBD5E1;border-radius:6px;padding:8px 12px;font-size:13px;resize:vertical;">{{ article.meta_description if article else '' }}</textarea>
        </div>

        <div>
          <label class="text-sm" style="display:block;margin-bottom:4px;font-weight:500;">OG Image URL</label>
          <input type="url" name="og_image_url" value="{{ article.og_image_url if article else '' }}"
                 placeholder="https://..."
                 style="width:100%;box-sizing:border-box;border:1px solid #CBD5E1;border-radius:6px;padding:8px 12px;font-size:13px;">
        </div>

        <div>
          <label class="text-sm" style="display:block;margin-bottom:4px;font-weight:500;">Status</label>
          <select name="status"
                  style="border:1px solid #CBD5E1;border-radius:6px;padding:8px 12px;font-size:13px;background:#fff;">
            <option value="draft" {% if not article or article.status == 'draft' %}selected{% endif %}>Draft</option>
            <option value="published" {% if article and article.status == 'published' %}selected{% endif %}>Published</option>
          </select>
        </div>
      </div>

      <div style="margin-top:20px;display:flex;gap:10px;align-items:center;">
        <button type="submit" class="btn">Save</button>
        {% if article %}
        <a href="{{ article.url_path }}" target="_blank" class="btn-outline btn-sm">View →</a>
        <form method="post" action="{{ url_for('cms.cms_delete', article_id=article.id) }}"
              class="m-0" onsubmit="return confirm('Delete this article?')">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn-outline btn-sm" style="color:#EF4444;border-color:#EF4444;">Delete</button>
        </form>
        {% endif %}
      </div>
    </form>

    {% if article %}
    <div style="margin-top:24px;padding-top:16px;border-top:1px solid #E2E8F0;">
      <p class="text-sm text-slate" style="margin:0 0 8px;">
        <strong style="color:#0F172A;">Body content:</strong>
        {% if article.template_data_id %}
        Programmatically generated from pSEO template data.
        {% else %}
        Hand-written article (no template linked).
        {% endif %}
      </p>
    </div>
    {% endif %}
  </div>
{% endblock %}
