{# HTMX partial — rendered inside the gaps panel for one template.
   Loaded via GET /admin/pseo/gaps/<slug>. #}

{% if not gaps %}
  <p class="text-success text-sm p-2">&#x2713; No gaps — all {{ template.name }} rows have articles.</p>
{% else %}
  <div class="flex justify-between items-center mb-2">
    <span class="text-sm font-semibold">{{ gaps | length }} missing row{{ 's' if gaps | length != 1 else '' }}</span>
    <form method="post" action="{{ url_for('pseo.pseo_generate_gaps', slug=template.slug) }}" class="m-0">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-sm">Generate {{ gaps | length }} missing</button>
    </form>
  </div>
  <div class="table-wrap" style="max-height: 300px; overflow-y: auto;">
    <table class="table text-sm">
      <thead>
        <tr>
          <th>{{ template.natural_key }}</th>
          <th>Missing languages</th>
          {% for key in (gaps[0].keys() | list | reject('equalto', '_natural_key') | reject('equalto', '_missing_languages') | list)[:4] %}
          <th>{{ key }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for gap in gaps[:100] %}
        <tr>
          <td class="font-mono text-xs">{{ gap._natural_key }}</td>
          <td class="text-xs text-amber-700">{{ gap._missing_languages | join(', ') }}</td>
          {% for key in (gap.keys() | list | reject('equalto', '_natural_key') | reject('equalto', '_missing_languages') | list)[:4] %}
          <td class="text-xs text-slate">{{ gap[key] | truncate(30) if gap[key] is string else gap[key] }}</td>
          {% endfor %}
        </tr>
        {% endfor %}
        {% if gaps | length > 100 %}
        <tr>
          <td colspan="10" class="text-xs text-slate text-center">… and {{ gaps | length - 100 }} more rows</td>
        </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
{% endif %}
