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

{% block title %}CMS Articles — {{ config.APP_NAME }} Admin{% endblock %}
{% block topbar_title %}CMS Articles{% endblock %}

{% block admin_content %}
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
    <div>
      <h2 class="text-xl" style="margin:0;">Articles</h2>
      <p class="text-sm text-slate" style="margin:4px 0 0;">
        {{ published_count }} published · {{ draft_count }} draft
      </p>
    </div>
    <div style="display:flex;gap:8px;">
      <a href="{{ url_for('cms.template_list') }}" class="btn-outline btn-sm">pSEO Templates</a>
      <a href="{{ url_for('cms.cms_new') }}" class="btn btn-sm">+ New Article</a>
    </div>
  </div>

  <div class="card" style="padding:0;overflow:hidden;">
    {% if articles %}
    <table class="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>URL Path</th>
          <th>Template</th>
          <th>Status</th>
          <th>Published</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for article in articles %}
        <tr>
          <td>
            <a href="{{ url_for('cms.cms_edit', article_id=article.id) }}" class="text-sm" style="font-weight:500;">
              {{ article.title }}
            </a>
          </td>
          <td>
            <a href="{{ article.url_path }}" target="_blank" class="mono text-sm" style="color:#64748B;">
              {{ article.url_path }}
            </a>
          </td>
          <td>
            {% if article.template_name %}
            <span class="text-sm text-slate">{{ article.template_name }}</span>
            {% else %}
            <span class="text-slate text-sm">—</span>
            {% endif %}
          </td>
          <td>
            {% if article.status == 'published' %}
            <span class="badge-success">published</span>
            {% else %}
            <span style="display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;background:#F1F5F9;color:#64748B;">draft</span>
            {% endif %}
          </td>
          <td class="mono text-sm">{{ article.published_at[:10] if article.published_at else "—" }}</td>
          <td>
            <div style="display:flex;gap:6px;">
              <a href="{{ url_for('cms.cms_edit', article_id=article.id) }}" class="btn-outline btn-sm">Edit</a>
              {% if article.status == 'published' %}
              <form method="post" action="{{ url_for('cms.cms_unpublish', article_id=article.id) }}" class="m-0">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn-outline btn-sm">Unpublish</button>
              </form>
              {% else %}
              <form method="post" action="{{ url_for('cms.cms_publish', article_id=article.id) }}" class="m-0">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-sm">Publish</button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div style="padding:40px;text-align:center;">
      <p class="text-slate text-sm">No articles yet. Use pSEO Templates to bulk-generate coffee market pages.</p>
      <div style="display:flex;gap:10px;justify-content:center;margin-top:12px;">
        <a href="{{ url_for('cms.template_list') }}" class="btn btn-sm">pSEO Templates</a>
        <a href="{{ url_for('cms.cms_new') }}" class="btn-outline btn-sm">New Article</a>
      </div>
    </div>
    {% endif %}
  </div>
{% endblock %}
