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

{% block extra_head %}
<style>
  .domain-count-badge { font-size: .85rem; }
</style>
{% endblock %}

{% block content %}

<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="fw-bold mb-0">
    <i class="bi bi-diagram-3 me-2 text-primary"></i>Domains
    <span class="badge bg-secondary domain-count-badge ms-2">{{ domains | length }} domain{{ 's' if (domains | length) != 1 else '' }}</span>
  </h4>
  <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#addDomainModal">
    <i class="bi bi-plus-circle me-1"></i>Add Domain
  </button>
</div>

<!-- Domains Table -->
<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-dark">
        <tr>
          <th class="ps-3">Domain</th>
          <th>Mail Host</th>
          <th style="width:5rem;" class="text-center">Port</th>
          <th style="width:6rem;" class="text-center">Active</th>
          <th>Description</th>
          {% if current_user.is_superadmin %}
          <th class="text-end">Outbound (24h)</th>
          {% endif %}
          <th style="width:11rem;" class="text-center">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% if domains %}
          {% for domain in domains %}
          {% set held_n = held_counts.get(domain.id) %}
          <tr id="domain-row-{{ domain.id }}">
            <!-- Normal view -->
            <td class="ps-3 fw-semibold font-monospace" id="view-domain-{{ domain.id }}">
              {{ domain.domain }}
              {% if current_user.is_superadmin and domain.hold_all_mail %}
                <span class="badge bg-danger ms-2" title="All clean mail for this domain is being held">
                  <i class="bi bi-pause-circle me-1"></i>ON HOLD{% if held_n %} - {{ held_n }} held{% endif %}
                </span>
              {% endif %}
            </td>
            <td id="view-relay-{{ domain.id }}">{{ domain.relay_host | default('-') }}</td>
            <td class="text-center" id="view-port-{{ domain.id }}">{{ domain.relay_port | default(25) }}</td>
            <td class="text-center" id="view-active-{{ domain.id }}">
              {% if domain.is_active %}
                <span class="badge bg-success"><i class="bi bi-check-lg me-1"></i>Active</span>
              {% else %}
                <span class="badge bg-secondary"><i class="bi bi-x-lg me-1"></i>Inactive</span>
              {% endif %}
            </td>
            <td class="text-muted small" id="view-desc-{{ domain.id }}">{{ domain.description | default('') }}</td>
            {% if current_user.is_superadmin %}
            <td class="text-end">{{ outbound_counts.get(domain.id, 0) }}</td>
            {% endif %}
            <td class="text-center" id="view-actions-{{ domain.id }}">
              <div class="d-flex justify-content-center gap-1">
                <button class="btn btn-outline-primary btn-sm py-0 px-2"
                        onclick="startEdit({{ domain.id }})" title="Edit">
                  <i class="bi bi-pencil-fill"></i>
                </button>
                <form method="POST" action="{{ url_for('domains.toggle', domain_id=domain.id) }}"
                      style="display:inline;">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn btn-sm py-0 px-2
                    {% if domain.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}"
                    title="{% if domain.is_active %}Deactivate{% else %}Activate{% endif %}">
                    <i class="bi {% if domain.is_active %}bi-toggle-on{% else %}bi-toggle-off{% endif %}"></i>
                  </button>
                </form>
                {% if current_user.is_superadmin %}
                <form method="POST" action="{{ url_for('domains.hold_toggle', domain_id=domain.id) }}"
                      style="display:inline;">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn btn-sm py-0 px-2
                    {% if domain.hold_all_mail %}btn-danger{% else %}btn-outline-secondary{% endif %}"
                    title="{% if domain.hold_all_mail %}Stop holding mail for this domain{% else %}Hold all mail for this domain{% endif %}">
                    <i class="bi {% if domain.hold_all_mail %}bi-pause-fill{% else %}bi-pause{% endif %}"></i>
                  </button>
                </form>
                {% if domain.hold_all_mail and held_n %}
                <form method="POST" action="{{ url_for('domains.release_held', domain_id=domain.id) }}"
                      style="display:inline;"
                      data-confirm-msg="Release all {{ held_n }} held message(s) for {{ domain.domain }} to the mail server?"
                      onsubmit="return confirm(this.dataset.confirmMsg)">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn btn-outline-success btn-sm py-0 px-2"
                          title="Release all held mail for this domain">
                    <i class="bi bi-send-fill me-1"></i>{{ held_n }}
                  </button>
                </form>
                {% endif %}
                {% endif %}
                {% if current_user.is_superadmin %}
                <a href="{{ url_for('domains.delete_confirm', domain_id=domain.id) }}"
                   class="btn btn-outline-danger btn-sm py-0 px-2"
                   title="Delete domain (opens confirmation page)">
                  <i class="bi bi-trash3-fill"></i>
                </a>
                {% endif %}
              </div>
            </td>
          </tr>

          <!-- Inline edit row (hidden by default) -->
          <tr id="edit-row-{{ domain.id }}" class="d-none table-warning">
            <td colspan="{{ 7 if current_user.is_superadmin else 6 }}" class="px-3 py-2">
              <form method="POST" action="{{ url_for('domains.edit', domain_id=domain.id) }}"
                    class="row g-2 align-items-end">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="col-12 col-md-3">
                  <label class="form-label form-label-sm mb-1 fw-semibold">Domain Name</label>
                  <input type="text" name="domain_name" class="form-control form-control-sm"
                         value="{{ domain.domain }}" required>
                </div>
                <div class="col-12 col-md-3">
                  <label class="form-label form-label-sm mb-1 fw-semibold">Mail Host</label>
                  <input type="text" name="relay_host" class="form-control form-control-sm"
                         value="{{ domain.relay_host | default('') }}" placeholder="mail.example.com">
                </div>
                <div class="col-6 col-md-1">
                  <label class="form-label form-label-sm mb-1 fw-semibold">Port</label>
                  <input type="number" name="relay_port" class="form-control form-control-sm"
                         value="{{ domain.relay_port | default(25) }}" min="1" max="65535">
                </div>
                <div class="col-6 col-md-2">
                  <label class="form-label form-label-sm mb-1 fw-semibold">Description</label>
                  <input type="text" name="description" class="form-control form-control-sm"
                         value="{{ domain.description | default('') }}" placeholder="Optional note">
                </div>
                <div class="col-6 col-md-1 d-flex align-items-end">
                  <div class="form-check mb-1">
                    <input class="form-check-input" type="checkbox" name="is_active"
                           id="edit-active-{{ domain.id }}"
                           {% if domain.is_active %}checked{% endif %}>
                    <label class="form-check-label small fw-semibold" for="edit-active-{{ domain.id }}">Active</label>
                  </div>
                </div>
                <div class="col-6 col-md-1 d-flex align-items-end">
                  <div class="form-check mb-1">
                    <input class="form-check-input" type="checkbox"
                           name="verify_recipients" value="1"
                           id="edit-verify-{{ domain.id }}"
                           {% if domain.verify_recipients %}checked{% endif %}>
                    <label class="form-check-label small fw-semibold"
                           for="edit-verify-{{ domain.id }}">Verify rcpts</label>
                  </div>
                </div>
                {% if current_user.is_superadmin %}
                <div class="col-12 mt-3 p-3 border rounded bg-light">
                  <strong>Outbound relay (superadmin only)</strong>
                  <div class="form-check mt-2">
                    <input type="checkbox" class="form-check-input"
                           id="outbound_relay_enabled_{{ domain.id }}"
                           name="outbound_relay_enabled" value="1"
                           {% if domain.outbound_relay_enabled %}checked{% endif %}>
                    <label class="form-check-label"
                           for="outbound_relay_enabled_{{ domain.id }}">
                      Allow this domain to relay outbound mail through SpamGate
                    </label>
                  </div>
                  <div class="mt-2">
                    <label for="outbound_relay_clients_{{ domain.id }}"
                           class="form-label">
                      Allowed client IPs / CIDRs (one per line, # for comments)
                    </label>
                    <textarea class="form-control font-monospace" rows="4"
                              id="outbound_relay_clients_{{ domain.id }}"
                              name="outbound_relay_clients"
                              placeholder="10.5.5.10/32&#10;10.5.5.11/32&#10;# Exchange DAG members">{{ domain.outbound_relay_clients or '' }}</textarea>
                    <div class="form-text">
                      Each listed IP is bound to <code>{{ domain.domain }}</code>.
                      Outbound mail from these IPs must use a MAIL FROM at
                      <code>{{ domain.domain }}</code>.
                    </div>
                  </div>
                </div>
                {% endif %}
                <div class="col-auto ms-auto d-flex gap-2">
                  <button type="submit" class="btn btn-sm btn-primary">
                    <i class="bi bi-check-lg me-1"></i>Save
                  </button>
                  <button type="button" class="btn btn-sm btn-outline-secondary"
                          onclick="cancelEdit({{ domain.id }})">
                    Cancel
                  </button>
                </div>
              </form>
            </td>
          </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="{{ 7 if current_user.is_superadmin else 6 }}" class="text-center text-muted py-5">
              <i class="bi bi-diagram-3 fs-2 d-block mb-2 text-secondary"></i>
              No domains configured. Click <strong>Add Domain</strong> to get started.
            </td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>

<!-- Add Domain Modal -->
<div class="modal fade" id="addDomainModal" tabindex="-1" aria-labelledby="addDomainModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content shadow">
      <div class="modal-header bg-dark text-white">
        <h5 class="modal-title" id="addDomainModalLabel">
          <i class="bi bi-plus-circle me-2"></i>Add Domain
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="POST" action="{{ url_for('domains.add') }}" novalidate>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-body">

          <div class="mb-3">
            <label class="form-label fw-semibold" for="add_domain_name">Domain Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="add_domain_name" name="domain"
                   placeholder="example.com" required autofocus>
            <div class="form-text">The domain for which mail is being relayed.</div>
          </div>

          <div class="row g-3">
            <div class="col-8">
              <label class="form-label fw-semibold" for="add_relay_host">Mail Host</label>
              <input type="text" class="form-control" id="add_relay_host" name="relay_host"
                     placeholder="mail.example.com">
            </div>
            <div class="col-4">
              <label class="form-label fw-semibold" for="add_relay_port">Port</label>
              <input type="number" class="form-control" id="add_relay_port" name="relay_port"
                     value="25" min="1" max="65535">
            </div>
          </div>

          <div class="mt-3">
            <label class="form-label fw-semibold" for="add_description">Description</label>
            <input type="text" class="form-control" id="add_description" name="description"
                   placeholder="Optional description">
          </div>

          <div class="mt-3 form-check">
            <input class="form-check-input" type="checkbox" id="add_is_active" name="is_active" checked>
            <label class="form-check-label fw-semibold" for="add_is_active">Active</label>
          </div>

          <div class="mt-3 form-check">
            <input class="form-check-input" type="checkbox" id="add_verify_recipients"
                   name="verify_recipients" value="1" checked>
            <label class="form-check-label fw-semibold" for="add_verify_recipients">
              Verify recipients against downstream
            </label>
            <div class="form-text">
              Reject mail to unknown addresses at RCPT TO. Disable only if
              the downstream accepts-all or refuses probes from
              <code>&lt;&gt;</code>.
            </div>
          </div>

          {% if current_user.is_superadmin %}
          <div class="mt-3 p-3 border rounded bg-light">
            <strong>Outbound relay (superadmin only)</strong>
            <div class="form-check mt-2">
              <input type="checkbox" class="form-check-input"
                     id="add_outbound_relay_enabled"
                     name="outbound_relay_enabled" value="1">
              <label class="form-check-label"
                     for="add_outbound_relay_enabled">
                Allow this domain to relay outbound mail through SpamGate
              </label>
            </div>
            <div class="mt-2">
              <label for="add_outbound_relay_clients" class="form-label">
                Allowed client IPs / CIDRs (one per line, # for comments)
              </label>
              <textarea class="form-control font-monospace" rows="4"
                        id="add_outbound_relay_clients"
                        name="outbound_relay_clients"
                        placeholder="10.5.5.10/32&#10;10.5.5.11/32&#10;# Exchange DAG members"></textarea>
              <div class="form-text">
                Each listed IP is bound to the domain being added.
                Outbound mail from these IPs must use a MAIL FROM at that domain.
              </div>
            </div>
          </div>
          {% endif %}

        </div>
        <div class="modal-footer bg-light">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i>Add Domain
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
function startEdit(id) {
  document.getElementById('edit-row-' + id).classList.remove('d-none');
  document.getElementById('domain-row-' + id).classList.add('d-none');
}
function cancelEdit(id) {
  document.getElementById('edit-row-' + id).classList.add('d-none');
  document.getElementById('domain-row-' + id).classList.remove('d-none');
}
</script>
{% endblock %}