<div class="grid gap-6 lg:grid-cols-3">
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft lg:col-span-2">
    <h2 class="text-lg font-bold text-slate-900">Platform SMTP</h2>
    <p class="mt-1 text-sm text-slate-500">Used for Firm Creation Wizard invites and system-level emails.</p>
    <dl class="mt-6 grid gap-4 md:grid-cols-2">
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">Status</dt><dd class="mt-1 font-bold {% if smtp.configured and smtp.active and smtp.send_auth_emails %}text-emerald-700{% else %}text-amber-700{% endif %}">{% if smtp.configured and smtp.active and smtp.send_auth_emails %}Ready{% else %}Needs Setup{% endif %}</dd></div>
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">Host / Port</dt><dd class="mt-1 font-semibold text-slate-900">{{ smtp.host or '-' }}{% if smtp.port %}:{{ smtp.port }}{% endif %}</dd></div>
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">From Email</dt><dd class="mt-1 font-semibold text-slate-900">{{ smtp.from_email or '-' }}</dd></div>
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">From Name</dt><dd class="mt-1 font-semibold text-slate-900">{{ smtp.from_name or '-' }}</dd></div>
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">Reply To</dt><dd class="mt-1 font-semibold text-slate-900">{{ smtp.reply_to_email or '-' }}</dd></div>
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">Security</dt><dd class="mt-1 font-semibold text-slate-900">{{ smtp.security or '-' }}</dd></div>
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">Active</dt><dd class="mt-1 font-semibold text-slate-900">{% if smtp.active %}Yes{% else %}No{% endif %}</dd></div>
      <div class="rounded-2xl bg-slate-50 p-4"><dt class="text-xs font-semibold uppercase text-slate-500">Auth Emails</dt><dd class="mt-1 font-semibold text-slate-900">{% if smtp.send_auth_emails %}Enabled{% else %}Disabled{% endif %}</dd></div>
    </dl>
    <p class="mt-4 text-sm text-slate-600">{{ smtp.message }}</p>
  </div>
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <h3 class="font-bold text-slate-900">Action</h3>
    <p class="mt-2 text-sm text-slate-500">Configure or test platform SMTP from the existing settings page.</p>
    <a href="/email/platform-smtp" class="mt-5 inline-flex rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Open Platform SMTP</a>
  </div>
</div>