{% extends "pages/base.html" %}
{% load static %}

{% block title %}Success{% endblock %}

{% block content %}
  <div class="card">
    <div class="success-header">
      <h1>Payment Successful</h1>
    <div class="success-icon">
      ✔
    </div>
</div>
    <p class="muted">
      Important: save your key first. Then join Discord in a new tab and redeem it to get access + open a support ticket.
    </p>

    <div class="mt">
      <h3>Your key</h3>

      {% if plaintext_key %}
          <div class="alert mt">
            ⚠️ Your key is <strong>not emailed</strong>. Copy and save it now before leaving this page.
          </div>

          <div class="code mt" id="licenseKey">{{ plaintext_key }}</div>

          <div class="row mt wrap-gap">
            <button class="btn btn-primary" type="button" id="copyBtn">Copy key</button>
            <span class="muted" id="copyMsg" style="display:none;">Copied ✔</span>
          </div>

          <p class="muted mt">If you lose your key, open a Discord ticket with your order info.</p>

      {% elif pending %}
        <p class="muted">
          Payment received — generating your key…  
          <br>
          This page will refresh automatically.
        </p>

        <!-- Auto refresh if webhook slightly delayed -->
        <script>
          setTimeout(function () {
            window.location.reload();
          }, 3000);
        </script>

      {% else %}
        <p class="muted">
          Key not available. If you believe this is an error, contact support.
        </p>
      {% endif %}
    </div>

    <div class="mt">
      <h3>Join Discord</h3>
      <p class="muted">
        This opens in a new tab so you don’t lose access to this page.
      </p>
      <p>
        <a class="btn btn-primary" href="{{ discord_invite }}" target="_blank" rel="noopener noreferrer">
          Join our Discord
        </a>
      </p>
    </div>

    {% if order_id %}
      <p class="muted mt">Order: {{ order_id }}</p>
    {% endif %}

    <div class="row mt">
      <a class="btn" href="/">Back to Home</a>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
  <script src="{% static 'js/success.js' %}"></script>
{% endblock %}