{% extends "base.html" %}
{% block title %}Domains — Settings{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0"><i class="bi bi-globe me-2"></i>Domains</h4>
  <div class="btn-group btn-group-sm">
    <a href="{{ url_for('tenant_settings.branding') }}" class="btn btn-outline-secondary">Branding</a>
    <a href="{{ url_for('tenant_settings.plan') }}" class="btn btn-outline-secondary">Plan &amp; Usage</a>
    <a href="{{ url_for('tenant_settings.domains') }}" class="btn btn-primary">Domains</a>
  </div>
</div>

{% if not domain_allowed %}
<div class="alert alert-warning">
  <i class="bi bi-lock me-1"></i>
  Custom domains are available on <strong>Pro</strong> and <strong>Enterprise</strong> plans.
  <a href="{{ url_for('tenant_settings.plan') }}" class="alert-link">View your plan</a>.
</div>
{% endif %}

<div class="card border-0 shadow-sm mb-3">
  <div class="table-responsive">
    <table class="table table-hover mb-0 align-middle" style="font-size:.85rem;">
      <thead class="table-light">
        <tr>
          <th>Domain</th>
          <th>Type</th>
          <th>Status</th>
          <th>TLS</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for d in tenant_domains %}
        <tr>
          <td class="font-monospace fw-medium">{{ d.domain }}</td>
          <td>
            <span class="badge {{ 'bg-primary' if d.kind == 'subdomain' else 'bg-secondary' }}">
              {{ d.kind }}
            </span>
            {% if d.is_primary %}
            <span class="badge bg-light text-dark border ms-1">primary</span>
            {% endif %}
          </td>
          <td>
            {% if d.verified %}
            <span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>Verified</span>
            {% else %}
            <span class="text-warning"><i class="bi bi-clock me-1"></i>Pending DNS</span>
            {% endif %}
          </td>
          <td>
            <span class="badge {{ 'bg-success' if d.tls_status == 'active' else ('bg-danger' if d.tls_status == 'failed' else 'bg-secondary') }}">
              {{ d.tls_status }}
            </span>
          </td>
          <td>
            {% if not d.is_primary and d.kind == 'custom' %}
            <form method="POST"
                  action="{{ url_for('tenant_settings.delete_domain', domain_id=d.id) }}"
                  class="d-inline"
                  onsubmit="return confirm('Remove {{ d.domain }}?')">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button class="btn btn-outline-danger btn-sm">
                <i class="bi bi-trash"></i>
              </button>
            </form>
            {% endif %}
          </td>
        </tr>

        {# DNS verification instructions for unverified custom domains #}
        {% if not d.verified and d.kind == 'custom' and d.verification_token %}
        <tr class="table-warning">
          <td colspan="5" style="font-size:.82rem;">
            <strong><i class="bi bi-info-circle me-1"></i>DNS Verification required for {{ d.domain }}</strong><br>
            Add one of these DNS records at your DNS provider, then contact support to activate:
            <div class="mt-2 font-monospace" style="background:#f8fafc; padding:.5rem .75rem; border-radius:6px; font-size:.78rem;">
              <strong>Option A — TXT record</strong><br>
              Name: <code>_jqc-verify.{{ d.domain }}</code><br>
              Value: <code>jqc-verify={{ d.verification_token }}</code>
              <br><br>
              <strong>Option B — CNAME record</strong><br>
              Name: <code>{{ d.domain }}</code><br>
              Value: <code>{{ tenant_slug }}.{{ base_domain }}</code>
            </div>
          </td>
        </tr>
        {% endif %}

        {% else %}
        <tr><td colspan="5" class="text-muted py-3 text-center">No domains configured.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{% if domain_allowed %}
<div class="card border-0 shadow-sm">
  <div class="card-header bg-white py-2">
    <span class="fw-semibold" style="font-size:.9rem;">Request Custom Domain</span>
  </div>
  <div class="card-body">
    <p class="text-muted" style="font-size:.85rem;">
      Enter the custom domain you want to use (e.g. <code>jqc.yourcompany.com</code>).
      You'll need to add a DNS record to verify ownership before it goes live.
    </p>
    <form method="POST" action="{{ url_for('tenant_settings.request_domain') }}"
          class="row g-2 align-items-end">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="col-auto">
        <input type="text" name="domain" class="form-control"
               placeholder="jqc.yourcompany.com" style="width:280px;"
               pattern="^(?:[a-z0-9](?:[a-z0-9\-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$">
      </div>
      <div class="col-auto">
        <button class="btn btn-primary">
          <i class="bi bi-plus-circle me-1"></i> Add Domain
        </button>
      </div>
    </form>
  </div>
</div>
{% endif %}
{% endblock %}