{% extends "admin/base.html" %}

{% block title %}QA | Admin{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Responsive / SEO QA</p>
    <h1>QA Dashboard</h1>
    <p class="mt-3 text-sm font-bold text-zinc-600">Quick checks for translations, metadata, images, and SEO infrastructure.</p>
  </div>
</div>

<section class="mt-8 grid gap-4 md:grid-cols-5">
  <div class="admin-panel"><p class="form-label">Missing meta</p><p class="mt-2 text-3xl font-black">{{ report.missing_meta }}</p></div>
  <div class="admin-panel"><p class="form-label">Missing hero images</p><p class="mt-2 text-3xl font-black">{{ report.missing_hero }}</p></div>
  <div class="admin-panel"><p class="form-label">Broken image paths</p><p class="mt-2 text-3xl font-black">{{ report.broken_images }}</p></div>
  <div class="admin-panel"><p class="form-label">Hreflang build errors</p><p class="mt-2 text-3xl font-black">{{ report.hreflang_errors }}</p></div>
  <div class="admin-panel"><p class="form-label">Sitemap</p><p class="mt-2 text-sm font-black"><a class="underline" href="{{ report.sitemap_url }}" target="_blank">Open XML</a></p></div>
</section>

<section class="admin-panel mt-6">
  <h2>Translation Status</h2>
  <div class="mt-4 overflow-x-auto">
    <table class="min-w-full divide-y divide-zinc-200">
      <thead class="bg-zinc-100"><tr><th class="table-heading">Language</th><th class="table-heading">Missing</th><th class="table-heading">Outdated</th></tr></thead>
      <tbody class="divide-y divide-zinc-200">
        {% for code, count in report.missing_translations.items() %}
          <tr><td class="table-cell font-black">{{ language_display_code(code) }}</td><td class="table-cell">{{ count }}</td><td class="table-cell">{{ report.outdated_translations[code] }}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<section class="admin-panel mt-6">
  <h2>SEO Endpoints</h2>
  <div class="mt-4 grid gap-3 text-sm font-bold md:grid-cols-3">
    <a class="rounded-lg border border-zinc-200 p-4 underline" href="{{ report.robots_url }}" target="_blank">robots.txt</a>
    <a class="rounded-lg border border-zinc-200 p-4 underline" href="{{ report.sitemap_url }}" target="_blank">sitemap.xml</a>
    <a class="rounded-lg border border-zinc-200 p-4 underline" href="{{ report.image_sitemap_url }}" target="_blank">image-sitemap.xml</a>
  </div>
</section>
{% endblock %}