{% 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">Domain Mapping</h1>
      <p class="mt-1 text-sm text-slate-500">Map marketplace, audit firm, branch and consultant domains. Tenant subdomains like auditfirm.filingabc.com, firm domains like arrr.associates, and consultant profile domains like abc.accountants or yourname.arrr.accountant can be created from here.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/domains/ssl" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">SSL Automation</a>
      <a href="/domains/verification" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Verify Domains</a>
      <a href="/domains/firm-domain" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Firm Domain</a>
      <a href="/domains/consultant-domains" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Consultant Domains</a>
      <a href="/domains/tenant-subdomains" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Tenant Subdomains</a>
      <a href="/domains/new" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm">Add Domain</a>
    </div>
  </div>

  <form method="get" class="rounded-2xl border bg-white p-4 shadow-soft">
    <div class="grid grid-cols-1 gap-3 md:grid-cols-4">
      <input class="rounded-xl border px-3 py-2 text-sm" name="q" value="{{ filters.q }}" placeholder="Search domain" />
      <select class="rounded-xl border px-3 py-2 text-sm" name="domain_type">
        <option value="">All domain types</option>
        {% for code, label in domain_types %}<option value="{{ code }}" {% if filters.domain_type == code %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
      <select class="rounded-xl border px-3 py-2 text-sm" name="status">
        <option value="">All statuses</option>
        {% for code, label in statuses %}<option value="{{ code }}" {% if filters.status == code %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
      <button class="rounded-xl bg-slate-800 px-4 py-2 text-sm font-medium text-white">Filter</button>
    </div>
  </form>

  <div class="overflow-hidden rounded-2xl border bg-white shadow-soft">
    {% if mappings %}
    <table class="w-full text-sm">
      <thead class="bg-slate-50 text-slate-600">
        <tr>
          <th class="p-3 text-left">Domain</th>
          <th class="p-3 text-left">Type</th>
          <th class="p-3 text-left">Mapped To</th>
          <th class="p-3 text-left">Status</th>
          <th class="p-3 text-left">Verification</th>
          <th class="p-3 text-left">Action</th>
        </tr>
      </thead>
      <tbody>
        {% for m in mappings %}
        <tr class="border-t align-top">
          <td class="p-3">
            <div class="font-semibold text-slate-900">{{ m.domain_name }}</div>
            <div class="text-xs text-slate-500">SSL: {{ m.ssl_mode }} / {{ (m.ssl_status or "not_checked").replace("_", " ")|title }}</div>
          </td>
          <td class="p-3">{{ m.domain_type.replace('_', ' ')|title }}</td>
          <td class="p-3 text-slate-700">
            {% if m.tenant %}<div>Firm: {{ m.tenant.display_name or m.tenant.name }}</div>{% endif %}
            {% if m.branch %}<div>Branch: {{ m.branch.name }}</div>{% endif %}
            {% if m.consultant %}<div>Consultant: {{ m.consultant.contact_person }}</div>{% endif %}
            {% if not m.tenant and not m.branch and not m.consultant %}<span class="text-slate-400">Marketplace / platform</span>{% endif %}
          </td>
          <td class="p-3">
            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700">{{ m.status.replace('_', ' ')|title }}</span>
            {% if m.is_primary %}<span class="ml-1 rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-700">Primary</span>{% endif %}
          </td>
          <td class="p-3">
            {% if m.is_verified %}
              <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">Verified</span>
            {% else %}
              <span class="rounded-full bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700">Pending</span>
            {% endif %}
          </td>
          <td class="p-3"><div class="flex flex-col gap-1"><a class="text-slate-900 underline" href="/domains/{{ m.id }}">Open</a><a class="text-slate-600 underline" href="/domains/{{ m.id }}/ssl">SSL</a></div></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="p-8 text-center text-sm text-slate-500">No domain mappings found.</div>
    {% endif %}
  </div>
</div>
{% endblock %}