{% extends "base.html" %}

{% block title %}Upgrade Plan — ComplyForm{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
  <h1 class="text-2xl font-bold mb-2" style="color: var(--text-primary);">Upgrade Your Plan</h1>
  <p class="text-sm mb-6" style="color: var(--text-secondary);">
    Currently on <span class="font-semibold capitalize">{{ current_tier }}</span>.
    {% if current_tier == "enterprise" %}
    Contact us for Enterprise Unlimited.
    {% endif %}
  </p>

  {% if success_message %}
  <div class="rounded-lg p-4 mb-6" style="background: #dcfce7; border: 1px solid #bbf7d0;">
    <p class="text-sm font-medium" style="color: #166534;">{{ success_message }}</p>
  </div>
  {% endif %}

  {% if error_message %}
  <div class="rounded-lg p-4 mb-6" style="background: #fef2f2; border: 1px solid #fecaca;">
    <p class="text-sm font-medium" style="color: #991b1b;">{{ error_message }}</p>
  </div>
  {% endif %}

  {# Tier Cards #}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    {% for tier in available_tiers %}
    <div class="rounded-lg p-5 flex flex-col"
         style="background: var(--bg-surface); border: 1px solid var(--border-default);">
      <h3 class="text-lg font-bold capitalize mb-1" style="color: var(--text-primary);">{{ tier.name }}</h3>
      <p class="text-2xl font-bold mb-3" style="color: var(--accent);">
        ${{ "{:,}".format(tier.price_annual) }}<span class="text-sm font-normal" style="color: var(--text-muted);">/yr</span>
      </p>
      <ul class="text-sm space-y-1 flex-1 mb-4" style="color: var(--text-secondary);">
        {% for feature in tier.highlights %}
        <li>{{ feature }}</li>
        {% endfor %}
      </ul>
      <button
        class="w-full py-2 px-4 rounded text-sm font-medium text-white"
        style="background: var(--accent);"
        hx-post="/dashboard/upgrade/preview"
        hx-vals='{"target_tier": "{{ tier.name }}"}'
        hx-target="#preview-card"
        hx-swap="innerHTML"
        hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
        Select {{ tier.name | title }}
      </button>
    </div>
    {% endfor %}
  </div>

  {# Preview Card — populated by htmx #}
  <div id="preview-card"></div>
</div>
{% endblock %}