{# HTMX partial — loaded by pseo_dashboard.html and /admin/pseo/health directly.
   When loaded via HTMX (hx-swap="outerHTML"), renders a full card.
   When loaded standalone (full page), also works since it just outputs HTML. #}

<div class="card" id="health-panel">
  <div class="card-header mb-4 flex justify-between items-center">
    <span>Health Checks</span>
    <span class="text-xs text-slate">{{ health.counts.total }} issue{{ 's' if health.counts.total != 1 else '' }}</span>
  </div>

  {% if health.counts.total == 0 %}
    <p class="text-success text-sm">&#x2713; No issues found — all articles are healthy.</p>
  {% else %}

  <!-- Hreflang Orphans -->
  {% if health.hreflang_orphans %}
  <details class="mb-4">
    <summary class="cursor-pointer font-semibold text-sm text-amber-700">
      &#x26A0; Hreflang orphans ({{ health.counts.hreflang_orphans }})
      <span class="text-xs font-normal text-slate ml-2">— articles missing a sibling language</span>
    </summary>
    <div class="table-wrap mt-2">
      <table class="table text-sm">
        <thead><tr><th>Template</th><th>URL path</th><th>Present</th><th>Missing</th></tr></thead>
        <tbody>
          {% for o in health.hreflang_orphans[:50] %}
          <tr>
            <td class="text-xs text-slate">{{ o.template_slug }}</td>
            <td><a href="{{ o.url_path }}" class="text-blue text-xs" target="_blank">{{ o.url_path }}</a></td>
            <td class="text-xs">{{ o.present_languages | join(', ') }}</td>
            <td class="text-xs text-red-600">{{ o.missing_languages | join(', ') }}</td>
          </tr>
          {% endfor %}
          {% if health.hreflang_orphans | length > 50 %}
          <tr><td colspan="4" class="text-xs text-slate text-center">… and {{ health.hreflang_orphans | length - 50 }} more</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </details>
  {% endif %}

  <!-- Missing Build Files -->
  {% if health.missing_build_files %}
  <details class="mb-4">
    <summary class="cursor-pointer font-semibold text-sm text-red-700">
      &#x274C; Missing build files ({{ health.counts.missing_build_files }})
      <span class="text-xs font-normal text-slate ml-2">— published articles with no HTML on disk</span>
    </summary>
    <div class="table-wrap mt-2">
      <table class="table text-sm">
        <thead><tr><th>Slug</th><th>Language</th><th>URL path</th><th>Expected path</th></tr></thead>
        <tbody>
          {% for m in health.missing_build_files[:50] %}
          <tr>
            <td class="text-xs font-mono">{{ m.slug }}</td>
            <td class="text-xs">{{ m.language }}</td>
            <td class="text-xs"><a href="{{ m.url_path }}" class="text-blue" target="_blank">{{ m.url_path }}</a></td>
            <td class="text-xs text-slate font-mono">{{ m.expected_path }}</td>
          </tr>
          {% endfor %}
          {% if health.missing_build_files | length > 50 %}
          <tr><td colspan="4" class="text-xs text-slate text-center">… and {{ health.missing_build_files | length - 50 }} more</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </details>
  {% endif %}

  <!-- Broken Scenario Refs -->
  {% if health.broken_scenario_refs %}
  <details class="mb-4">
    <summary class="cursor-pointer font-semibold text-sm text-red-700">
      &#x274C; Broken scenario refs ({{ health.counts.broken_scenario_refs }})
      <span class="text-xs font-normal text-slate ml-2">— [scenario:slug] markers referencing deleted scenarios</span>
    </summary>
    <div class="table-wrap mt-2">
      <table class="table text-sm">
        <thead><tr><th>Slug</th><th>Language</th><th>Broken refs</th></tr></thead>
        <tbody>
          {% for b in health.broken_scenario_refs[:50] %}
          <tr>
            <td class="text-xs font-mono">{{ b.slug }}</td>
            <td class="text-xs">{{ b.language }}</td>
            <td class="text-xs text-red-600 font-mono">{{ b.broken_scenario_refs | join(', ') }}</td>
          </tr>
          {% endfor %}
          {% if health.broken_scenario_refs | length > 50 %}
          <tr><td colspan="3" class="text-xs text-slate text-center">… and {{ health.broken_scenario_refs | length - 50 }} more</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </details>
  {% endif %}

  {% endif %}
</div>
