{% extends "base.html" %}
{% block title %}Delete {{ domain.domain }}{% endblock %}

{% block content %}
<div class="container mt-4">
  <h4 class="fw-bold mb-3">
    <i class="bi bi-exclamation-triangle-fill text-danger me-2"></i>
    Delete domain: <span class="font-monospace">{{ domain.domain }}</span>
  </h4>

  <div class="alert alert-danger">
    <strong>This will permanently remove the domain from SpamGate.</strong>
    {% if msg_count > 0 %}
      There are currently <strong>{{ msg_count }}</strong> quarantine
      message(s) totalling <strong>{{ size_mb }} MB</strong> across the
      cluster.
    {% else %}
      There are no quarantine messages for this domain.
    {% endif %}
    There is no in-product undo.
  </div>

  <form method="POST"
        action="{{ url_for('domains.delete_post', domain_id=domain.id) }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="mb-3">
      <label class="form-label fw-semibold">
        Type the domain name to confirm:
      </label>
      <input type="text" name="confirm_domain" class="form-control font-monospace"
             placeholder="{{ domain.domain }}" autocomplete="off" required>
    </div>

    <div class="form-check mb-2">
      <input type="checkbox" name="i_understand" id="i_understand"
             class="form-check-input" required>
      <label for="i_understand" class="form-check-label">
        I understand this is permanent.
      </label>
    </div>

    {% if msg_count > 0 %}
      <div class="form-check mb-2">
        <input type="checkbox" name="archive_emails" id="archive_emails"
               class="form-check-input" checked>
        <label for="archive_emails" class="form-check-label">
          Archive the {{ msg_count }} message(s) to
          <code>/var/spool/spamgate/deleted-domain/</code> before deletion.
        </label>
      </div>
      <div id="no-archive-warning" class="alert alert-danger mt-2 d-none">
        The {{ msg_count }} message(s) will be permanently lost without
        an archive.
      </div>
    {% endif %}

    <div class="mt-4">
      <a href="{{ url_for('domains.index') }}"
         class="btn btn-secondary">Cancel</a>
      <button id="delete-btn" type="submit" class="btn btn-danger" disabled>
        <i class="bi bi-trash3-fill me-1"></i>Delete domain
      </button>
    </div>
  </form>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  const nameIn = document.querySelector('input[name=confirm_domain]');
  const undBox = document.querySelector('input[name=i_understand]');
  const arcBox = document.querySelector('input[name=archive_emails]');
  const btn    = document.getElementById('delete-btn');
  const warn   = document.getElementById('no-archive-warning');
  const target = {{ domain.domain | tojson }};
  function check() {
    btn.disabled = !(nameIn.value === target && undBox.checked);
    if (warn && arcBox) warn.classList.toggle('d-none', arcBox.checked);
  }
  // Text input + checkbox use 'input' for live feedback; checkboxes also
  // get 'change' so we cover browsers that don't fire 'input' on toggles.
  [nameIn, undBox].forEach(el => el.addEventListener('input', check));
  if (arcBox) arcBox.addEventListener('change', check);
</script>
{% endblock %}