{% if grouped %}
<style>
  .lang-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.6rem; font-weight: 700;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.2rem 0.5rem 0.2rem 0.35rem; border-radius: 0.3rem;
    text-decoration: none;
    border: 1px solid transparent;
  }
  .lang-chip-live     { background: #DCFCE7; color: #14532D; border-color: #A7F3D0; }
  .lang-chip-scheduled { background: #FEF9C3; color: #713F12; border-color: #FDE68A; }
  .lang-chip-draft    { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
  .lang-chip .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  .lang-chip-live .dot     { background: #16A34A; }
  .lang-chip-scheduled .dot { background: #D97706; }
  .lang-chip-draft .dot    { background: #3B82F6; }
  .lang-chip .noindex-tag {
    font-size: 0.5rem; font-weight: 600; opacity: 0.55;
    border-left: 1px solid currentColor; padding-left: 0.3rem; margin-left: 0.1rem;
  }
  .article-subtitle {
    font-size: 0.625rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    color: #CBD5E1; margin-top: 0.1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .variant-row {
    display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    padding: 0.15rem 0;
  }
  .variant-row + .variant-row {
    border-top: 1px solid #F1F5F9; margin-top: 0.15rem; padding-top: 0.3rem;
  }
  .view-lang-btn { font-size: 0.65rem !important; padding: 0.15rem 0.5rem !important; }
</style>
{% endif %}
{% if is_generating %}
<div class="generating-banner"
     hx-get="{{ url_for('admin.article_results') }}"
     hx-trigger="every 3s"
     hx-target="#article-results"
     hx-swap="innerHTML">
  <svg class="spinner-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="10" stroke="#CBD5E1" stroke-width="3"/>
    <path d="M12 2a10 10 0 0 1 10 10" stroke="#0EA5E9" stroke-width="3" stroke-linecap="round"/>
  </svg>
  <span>Generating articles…</span>
</div>
{% endif %}
{% if articles %}
<div class="card" style="padding:0; overflow:hidden">
  <div style="overflow-x:auto">
  <table class="table text-sm">
    <thead>
      <tr>
        {% if not grouped %}
        <th style="width:32px"><input type="checkbox" id="article-select-all" onchange="document.querySelectorAll('.article-checkbox').forEach(cb => { cb.checked = this.checked; toggleArticleSelect(Number(cb.dataset.id), this.checked); })"></th>
        {% else %}
        <th style="width:32px"><input type="checkbox" id="article-select-all" onchange="document.querySelectorAll('.article-checkbox').forEach(cb => { cb.checked = this.checked; toggleArticleGroupSelect(cb); })"></th>
        {% endif %}
        <th>Title</th>
        <th>{% if grouped %}Variants{% else %}Status{% endif %}</th>
        <th>Published</th>
        {% if not grouped %}<th>Lang</th>{% endif %}
        {% if current_article_type == 'generated' %}<th>Template</th>{% endif %}
        {% if not grouped %}<th></th>{% endif %}
      </tr>
    </thead>
    <tbody>
      {% if grouped %}
        {% for g in articles %}
        {% include "admin/partials/article_group_row.html" %}
        {% endfor %}
      {% else %}
        {% for a in articles %}
        {% include "admin/partials/article_row.html" %}
        {% endfor %}
      {% endif %}
    </tbody>
  </table>
  </div>
  {% if articles | length >= 50 %}
  <div class="flex justify-between items-center" style="padding:0.75rem 1.5rem; border-top:1px solid #E2E8F0">
    {% if page > 1 %}
    <button class="btn-outline btn-sm"
            hx-get="{{ url_for('admin.article_results') }}?page={{ page - 1 }}"
            hx-target="#article-results"
            hx-include="closest form">Prev</button>
    {% else %}
    <span></span>
    {% endif %}
    <span class="text-xs text-slate">Page {{ page }}</span>
    <button class="btn-outline btn-sm"
            hx-get="{{ url_for('admin.article_results') }}?page={{ page + 1 }}"
            hx-target="#article-results"
            hx-include="closest form">Next</button>
  </div>
  {% endif %}
</div>
{% else %}
<div class="card text-center" style="padding:2rem">
  <p class="text-slate">No articles match the current filters.</p>
</div>
{% endif %}
