{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
    <div>
      <h1 class="text-2xl font-semibold text-slate-900">Custom Domain Verification</h1>
      <p class="mt-1 text-sm text-slate-500">Verify DNS TXT records for custom firm, consultant and marketplace domains before activating runtime routing.</p>
    </div>
    <div class="flex gap-2">
      <a href="/domains" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700">Back to Domains</a>
      <form method="post" action="/domains/verification/run">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <input type="hidden" name="limit" value="25" />
        <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white">Verify Pending</button>
      </form>
    </div>
  </div>

  {% if results %}
  <div class="rounded-2xl border bg-white p-5 shadow-soft">
    <h2 class="text-lg font-semibold text-slate-900">Verification Result</h2>
    <div class="mt-4 space-y-3">
      {% for mapping, result in results %}
      <div class="rounded-xl border p-4 {% if result.ok %}border-emerald-200 bg-emerald-50{% else %}border-red-200 bg-red-50{% endif %}">
        <div class="flex flex-col gap-1 md:flex-row md:items-center md:justify-between">
          <div class="font-semibold text-slate-900">{{ mapping.domain_name }}</div>
          <span class="text-xs font-semibold {% if result.ok %}text-emerald-700{% else %}text-red-700{% endif %}">{{ 'Verified' if result.ok else 'Pending' }}</span>
        </div>
        <div class="mt-1 text-sm text-slate-700">{{ result.message }}</div>
        {% if result.found_values %}<div class="mt-2 text-xs text-slate-600">Found: {{ result.found_values|join(', ') }}</div>{% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="rounded-2xl border bg-white shadow-soft overflow-hidden">
    <div class="border-b bg-slate-50 px-5 py-4">
      <h2 class="text-lg font-semibold text-slate-900">Domains Awaiting DNS Verification</h2>
      <p class="mt-1 text-sm text-slate-500">Add the TXT record at your DNS provider, wait for DNS propagation, then verify.</p>
    </div>
    {% if pending %}
    <div class="divide-y">
      {% for m in pending %}
      <div class="grid grid-cols-1 gap-4 p-5 lg:grid-cols-12 lg:items-center">
        <div class="lg:col-span-3">
          <div class="font-semibold text-slate-900">{{ m.domain_name }}</div>
          <div class="text-xs text-slate-500">{{ m.domain_type.replace('_', ' ')|title }}</div>
        </div>
        <div class="lg:col-span-6 text-sm">
          <div class="text-slate-500">TXT Name</div>
          <code class="mt-1 block rounded-lg bg-slate-100 p-2 text-xs break-all">{{ m.dns_txt_name or '-' }}</code>
          <div class="mt-2 text-slate-500">TXT Value</div>
          <code class="mt-1 block rounded-lg bg-slate-100 p-2 text-xs break-all">{{ m.dns_txt_value or '-' }}</code>
        </div>
        <div class="lg:col-span-3 flex flex-col gap-2">
          <form method="post" action="/domains/{{ m.id }}/verify-dns">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <button class="w-full rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white">Verify DNS</button>
          </form>
          <a href="/domains/{{ m.id }}" class="w-full rounded-xl border px-4 py-2 text-center text-sm font-medium text-slate-700">Open Details</a>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="p-8 text-center text-sm text-slate-500">No pending domain verification records.</div>
    {% endif %}
  </div>

  <div class="rounded-2xl border bg-white p-5 text-sm text-slate-600 shadow-soft">
    <h3 class="font-semibold text-slate-900">DNS record format</h3>
    <p class="mt-2">For a domain such as <strong>arrr.associates</strong>, add a TXT record at:</p>
    <code class="mt-2 block rounded-lg bg-slate-100 p-2 text-xs">_audit-firm-verify.arrr.associates</code>
    <p class="mt-2">The TXT value must exactly match the verification token shown for that domain.</p>
  </div>
</div>
{% endblock %}