{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">

  {% if coolify_result is defined and coolify_result %}
  <div class="rounded-2xl {% if coolify_result.ok %}bg-emerald-50 text-emerald-800{% else %}bg-red-50 text-red-800{% endif %} p-4 text-sm">
    <div class="font-semibold">Coolify API: {{ coolify_result.status.replace('_', ' ')|title }}</div>
    <div class="mt-1">{{ coolify_result.message }}</div>
    {% if coolify_result.updated_domains %}<div class="mt-2 text-xs">Application domains: {{ coolify_result.updated_domains|join(', ') }}</div>{% endif %}
  </div>
  {% endif %}
  <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 Automation</h1>
      <p class="mt-1 text-sm text-slate-500">Track SSL readiness for marketplace, audit firm and consultant domains. Certificate issuance is handled by your deployment proxy such as Coolify, Caddy, Traefik, Cloudflare or Nginx + Certbot.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <form method="post" action="/domains/ssl/check-all">
        <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 shadow-sm">Check Active SSL</button>
      </form>
      <a href="/domains/coolify/status" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Coolify Status</a>
      <a href="/domains/verification" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">DNS Verification</a>
      <a href="/domains" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Domains</a>
    </div>
  </div>

  {% if ssl_results is defined and ssl_results %}
  <div class="rounded-2xl border bg-white p-4 shadow-soft">
    <h2 class="text-sm font-semibold text-slate-900">Latest SSL check</h2>
    <div class="mt-3 grid gap-2">
      {% for mapping, result in ssl_results %}
      <div class="rounded-xl {% if result.ok %}bg-emerald-50 text-emerald-800{% else %}bg-red-50 text-red-800{% endif %} p-3 text-sm">
        <span class="font-semibold">{{ mapping.domain_name }}:</span> {{ result.message }}
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
    <div class="rounded-2xl border bg-white p-5 shadow-soft">
      <div class="text-sm text-slate-500">Verified active domains</div>
      <div class="mt-2 text-3xl font-semibold text-slate-900">{{ domains|selectattr('is_verified')|selectattr('status', 'equalto', 'active')|list|length }}</div>
    </div>
    <div class="rounded-2xl border bg-white p-5 shadow-soft">
      <div class="text-sm text-slate-500">SSL active</div>
      <div class="mt-2 text-3xl font-semibold text-emerald-700">{{ domains|selectattr('ssl_status', 'equalto', 'active')|list|length }}</div>
    </div>
    <div class="rounded-2xl border bg-white p-5 shadow-soft">
      <div class="text-sm text-slate-500">Needs attention</div>
      <div class="mt-2 text-3xl font-semibold text-amber-700">{{ domains|rejectattr('ssl_status', 'equalto', 'active')|list|length }}</div>
    </div>
  </div>

  <div class="overflow-hidden rounded-2xl border bg-white shadow-soft">
    <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">DNS</th>
          <th class="p-3 text-left">SSL Mode</th>
          <th class="p-3 text-left">SSL Status</th>
          <th class="p-3 text-left">Expiry</th>
          <th class="p-3 text-left">Action</th>
        </tr>
      </thead>
      <tbody>
        {% for m in domains %}
        <tr class="border-t align-top">
          <td class="p-3 font-semibold text-slate-900">{{ m.domain_name }}</td>
          <td class="p-3">{{ m.domain_type.replace('_', ' ')|title }}</td>
          <td class="p-3">
            {% if m.is_verified and m.status == 'active' %}<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">{{ m.ssl_mode or 'manual' }}</td>
          <td class="p-3">
            {% set ssl_status = m.ssl_status or 'not_checked' %}
            <span class="rounded-full {% if ssl_status == 'active' %}bg-emerald-50 text-emerald-700{% elif ssl_status == 'failed' %}bg-red-50 text-red-700{% else %}bg-slate-100 text-slate-700{% endif %} px-2.5 py-1 text-xs font-medium">{{ ssl_status.replace('_', ' ')|title }}</span>
            {% if m.ssl_last_error %}<div class="mt-1 max-w-sm truncate text-xs text-red-600">{{ m.ssl_last_error }}</div>{% endif %}
          </td>
          <td class="p-3 text-slate-600">{{ m.ssl_not_after_utc.strftime('%d-%m-%Y') if m.ssl_not_after_utc else '-' }}</td>
          <td class="p-3"><a href="/domains/{{ m.id }}/ssl" class="text-slate-900 underline">Open SSL</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}