{% 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">SSL Setup: {{ mapping.domain_name }}</h1>
      <p class="mt-1 text-sm text-slate-500">Use this page to track DNS, proxy and certificate readiness.</p>
    </div>
    <div class="flex gap-2">
      <a href="/domains/{{ mapping.id }}" class="rounded-xl border px-4 py-2 text-sm text-slate-700">Domain Detail</a>
      <a href="/domains/ssl" class="rounded-xl bg-slate-900 px-4 py-2 text-sm text-white">Back to SSL</a>
    </div>
  </div>

  {% if ssl_result is defined and ssl_result %}
  <div class="rounded-2xl {% if ssl_result.ok %}bg-emerald-50 text-emerald-800{% else %}bg-red-50 text-red-800{% endif %} p-4 text-sm">
    <div class="font-semibold">{{ ssl_result.status.replace('_', ' ')|title }}</div>
    <div class="mt-1">{{ ssl_result.message }}</div>
  </div>
  {% endif %}

  <div class="grid grid-cols-1 gap-5 lg:grid-cols-3">
    <div class="rounded-2xl border bg-white p-5 shadow-soft lg:col-span-2">
      <h2 class="text-lg font-semibold text-slate-900">Readiness checklist</h2>
      <div class="mt-4 space-y-3 text-sm">
        <div class="flex items-start gap-3"><span class="mt-0.5 rounded-full px-2 py-0.5 text-xs {% if mapping.is_verified and mapping.status == 'active' %}bg-emerald-50 text-emerald-700{% else %}bg-amber-50 text-amber-700{% endif %}">{{ 'Done' if mapping.is_verified and mapping.status == 'active' else 'Pending' }}</span><div><div class="font-medium text-slate-900">DNS TXT verification</div><div class="text-slate-500">The domain should be verified and active in ERP.</div></div></div>
        <div class="flex items-start gap-3"><span class="mt-0.5 rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700">Manual</span><div><div class="font-medium text-slate-900">A/CNAME record</div><div class="text-slate-500">Point {{ mapping.domain_name }} to your Coolify/proxy server before certificate issue.</div></div></div>
        <div class="flex items-start gap-3"><span class="mt-0.5 rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700">Proxy</span><div><div class="font-medium text-slate-900">Add domain in deployment proxy</div><div class="text-slate-500">Coolify/Caddy/Traefik/Nginx must route this domain to the FastAPI app.</div></div></div>
        <div class="flex items-start gap-3"><span class="mt-0.5 rounded-full px-2 py-0.5 text-xs {% if mapping.ssl_status == 'active' %}bg-emerald-50 text-emerald-700{% else %}bg-amber-50 text-amber-700{% endif %}">{{ (mapping.ssl_status or 'not_checked').replace('_', ' ')|title }}</span><div><div class="font-medium text-slate-900">Certificate check</div><div class="text-slate-500">ERP checks public HTTPS on port 443 and records certificate expiry.</div></div></div>
      </div>

      <div class="mt-5 flex flex-wrap gap-2">
        <form method="post" action="/domains/{{ mapping.id }}/ssl/check">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white">Check SSL Now</button>
        </form>

        <form method="post" action="/domains/{{ mapping.id }}/coolify/sync">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <button class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white">Add Domain to Coolify</button>
        </form>
        <form method="post" action="/domains/{{ mapping.id }}/ssl/mark-managed" class="flex gap-2">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <select name="provider" class="rounded-xl border px-3 py-2 text-sm">
            <option value="coolify" {% if mapping.ssl_mode == 'coolify' %}selected{% endif %}>Coolify</option>
            <option value="caddy" {% if mapping.ssl_mode == 'caddy' %}selected{% endif %}>Caddy</option>
            <option value="traefik" {% if mapping.ssl_mode == 'traefik' %}selected{% endif %}>Traefik</option>
            <option value="cloudflare" {% if mapping.ssl_mode == 'cloudflare' %}selected{% endif %}>Cloudflare</option>
            <option value="manual" {% if mapping.ssl_mode == 'manual' %}selected{% endif %}>Manual</option>
          </select>
          <button class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700">Mark Managed</button>
        </form>
      </div>
    </div>

    <div class="rounded-2xl border bg-white p-5 shadow-soft">
      <h2 class="text-lg font-semibold text-slate-900">Certificate status</h2>
      <dl class="mt-4 space-y-3 text-sm">
        <div><dt class="text-slate-500">SSL Status</dt><dd class="font-medium text-slate-900">{{ (mapping.ssl_status or 'not_checked').replace('_', ' ')|title }}</dd></div>
        <div><dt class="text-slate-500">SSL Mode</dt><dd>{{ mapping.ssl_mode or 'manual' }}</dd></div>
        <div><dt class="text-slate-500">Last Checked</dt><dd>{{ mapping.ssl_last_checked_at_utc.strftime('%d-%m-%Y %H:%M') if mapping.ssl_last_checked_at_utc else '-' }}</dd></div>
        <div><dt class="text-slate-500">Valid Until</dt><dd>{{ mapping.ssl_not_after_utc.strftime('%d-%m-%Y') if mapping.ssl_not_after_utc else '-' }}</dd></div>
        <div><dt class="text-slate-500">Issuer</dt><dd class="break-words">{{ mapping.ssl_issuer or '-' }}</dd></div>
        <div><dt class="text-slate-500">Subject</dt><dd class="break-words">{{ mapping.ssl_subject or '-' }}</dd></div>
      </dl>
      {% if mapping.ssl_last_error %}<div class="mt-4 rounded-xl bg-red-50 p-3 text-sm text-red-800">{{ mapping.ssl_last_error }}</div>{% endif %}
    </div>
  </div>

  <div class="space-y-4">
    <h2 class="text-lg font-semibold text-slate-900">Proxy snippets / setup notes</h2>
    {% for snippet in snippets %}
    <div class="rounded-2xl border bg-white p-5 shadow-soft">
      <h3 class="font-semibold text-slate-900">{{ snippet.title }}</h3>
      <pre class="mt-3 overflow-auto rounded-xl bg-slate-900 p-4 text-xs text-slate-100"><code>{{ snippet.body }}</code></pre>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}