{% extends "base.html" %}

{% block title %}Payment Successful — CleanCopy{% endblock %}

{% block head %}
<style>
  .success-container {
    text-align: center;
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-success);
  }

  .checkmark {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

  .instructions {
    text-align: left;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
  }

  .instructions h3 {
    color: var(--color-accent);
    margin-bottom: 0.75rem;
  }

  .instructions ol {
    padding-left: 1.25rem;
  }

  .instructions li {
    margin-bottom: 0.5rem;
  }

  .instructions code {
    background: var(--color-border-subtle);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--color-accent);
  }

  .note {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    color: var(--color-text-primary);
  }

  .note strong {
    color: var(--color-text-emphasis);
  }

  .download {
    text-align: center;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
  }

  .download h3 {
    color: var(--color-accent);
    margin-bottom: 0.5rem;
  }

  .download .version {
    color: var(--color-text-primary);
    margin-bottom: 1rem;
  }

  .download .version strong {
    color: var(--color-text-emphasis);
  }

  .download-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .download-btn {
    display: inline-flex;
    flex-direction: column;
    padding: 0.75rem 1.5rem;
    background: var(--color-accent);
    color: var(--color-accent-text-on);
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    min-width: 280px;
    text-align: center;
  }

  .download-btn:hover {
    background: var(--color-accent-hover);
  }

  .download-btn-secondary {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
  }

  .download-btn-secondary:hover {
    background: var(--color-bg-elevated);
    border-color: var(--color-accent-hover);
  }

  .download-hint {
    font-size: 0.8rem;
    font-weight: normal;
    opacity: 0.8;
    margin-top: 0.25rem;
  }

  .download .placeholder {
    color: var(--color-text-secondary);
  }
</style>
{% endblock %}

{% block content %}
<div class="success-container">
  <div class="checkmark">✓</div>
  <h1>Payment Successful</h1>
  <p>Thank you for purchasing CleanCopy!</p>
</div>

<div class="download">
  <h3>Download CleanCopy</h3>
  {% if has_download %}
  <p class="version">Latest version: <strong>{{ download_version }}</strong></p>
  <div class="download-options">
    <a href="{{ exe_url }}" class="download-btn">
      Download for Windows (.exe)
      <span class="download-hint">Portable — no installation required</span>
    </a>
    {% if has_msi %}
    <a href="{{ msi_url }}" class="download-btn download-btn-secondary">
      Download Installer (.msi)
      <span class="download-hint">Traditional Windows installer</span>
    </a>
    {% endif %}
  </div>
  {% else %}
  <p class="placeholder">No releases available yet. Check back soon or contact support.</p>
  {% endif %}
</div>

<div class="instructions">
  <h3>How to activate your license</h3>
  <ol>
    <li>Open CleanCopy on your Windows PC</li>
    <li>Go to the <strong>License</strong> tab</li>
    <li>
      Find the payment ID in your receipt email — it starts with
      <code>pi_</code>
    </li>
    <li>Paste it into the license key field</li>
    <li>Click <strong>Activate</strong></li>
  </ol>
</div>

<div class="note">
  <strong>Can't find your payment ID?</strong> Check your email inbox (and
  spam folder) for the receipt from CleanCopy. The payment ID is in the
  receipt subject line or body.
</div>

<p>Need help? <a href="mailto:{{ email }}">Contact support</a></p>
{% endblock %}