{% 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">Audit Firm Custom Domain</h1>
      <p class="mt-1 text-sm text-slate-500">Create a verified mapping for your own audit firm domain, for example arrr.associates.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/domains" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">All 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>
    </div>
  </div>

  {% if errors %}
  <div class="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
    <ul class="list-disc pl-5">
      {% for err in errors %}<li>{{ err }}</li>{% endfor %}
    </ul>
  </div>
  {% endif %}
  {% if message %}
  <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">{{ message }}</div>
  {% endif %}

  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
    <div class="xl:col-span-2 rounded-2xl border bg-white p-5 shadow-soft">
      <h2 class="text-lg font-semibold text-slate-900">Create / Link Firm Domain</h2>
      <p class="mt-1 text-sm text-slate-500">Use this for your own branded firm domain. For other tenant firms, use auditfirm.filingabc.com subdomains first.</p>

      <form method="post" action="/domains/firm-domain/create" class="mt-5 space-y-4">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <div>
          <label class="block text-sm font-medium text-slate-700">Firm domain</label>
          <input name="domain_name" value="{{ domain_name or 'arrr.associates' }}" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm" placeholder="arrr.associates" />
          <p class="mt-1 text-xs text-slate-500">Enter the domain only. Do not include http://, https:// or path.</p>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label class="block text-sm font-medium text-slate-700">Audit firm / tenant</label>
            <select name="tenant_id" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm" required>
              <option value="">Select audit firm</option>
              {% for t in tenants %}
                <option value="{{ t.id }}">{{ t.display_name or t.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700">Branch, optional</label>
            <select name="branch_id" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm">
              <option value="">Firm-level domain</option>
              {% for b in branches %}
                <option value="{{ b.id }}">{{ b.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <label class="flex items-start gap-3 rounded-2xl border bg-slate-50 p-4 text-sm text-slate-700">
          <input type="checkbox" name="mark_verified_active" value="1" class="mt-1 rounded border-slate-300" />
          <span>
            <span class="font-medium text-slate-900">Mark verified and active now</span><br />
            Use this only if DNS is already pointing to the ERP server and SSL/proxy is ready. Otherwise leave unchecked and verify later from the domain detail page.
          </span>
        </label>

        <div class="flex justify-end">
          <button class="rounded-xl bg-slate-900 px-5 py-2 text-sm font-semibold text-white shadow-sm">Create Firm Domain</button>
        </div>
      </form>
    </div>

    <div class="space-y-4">
      <div class="rounded-2xl border bg-white p-5 shadow-soft">
        <h3 class="font-semibold text-slate-900">Recommended DNS</h3>
        <div class="mt-3 space-y-2 text-sm text-slate-600">
          <div><span class="font-medium text-slate-900">A record:</span> arrr.associates → your server IP</div>
          <div><span class="font-medium text-slate-900">CNAME:</span> www.arrr.associates → arrr.associates</div>
          <div><span class="font-medium text-slate-900">SSL:</span> configure in Coolify / proxy / Cloudflare</div>
        </div>
      </div>

      <div class="rounded-2xl border bg-white p-5 shadow-soft">
        <h3 class="font-semibold text-slate-900">Verification</h3>
        <p class="mt-2 text-sm text-slate-600">If not marked active now, open the created domain record and use the DNS TXT token shown there.</p>
        {% if existing %}
        <div class="mt-4 rounded-xl border bg-slate-50 p-3 text-sm">
          <div class="font-semibold text-slate-900">Existing mapping found</div>
          <div class="mt-1 text-slate-600">{{ existing.domain_name }} — {{ existing.status.replace('_', ' ')|title }}</div>
          <a href="/domains/{{ existing.id }}" class="mt-2 inline-block text-slate-900 underline">Open mapping</a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}