{% extends 'base.html' %}
{% block title %}Upgrade — AgentForms{% endblock %}
{% block head_extra %}
<style nonce="{{ csp_nonce }}">
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; }
.container { max-width: 960px; margin: 0 auto; padding: 20px; }
nav { background: #1a1a2e; color: white; }
.card { background: white; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn { display: inline-block; padding: 8px 16px; background: #1a1a2e; color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; }
.btn:hover { background: #2d2d44; }
.btn-outline { background: transparent; border: 1px solid #1a1a2e; color: #1a1a2e; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.badge { display: inline-block; padding: 2px 8px; background: #e9ecef; border-radius: 12px; font-size: 12px; }
.badge-free { background: #e9ecef; color: #333; }
.badge-starter { background: #dbeafe; color: #1e40af; }
.badge-pro { background: #fef3c7; color: #92400e; }
.badge-teams { background: #d1fae5; color: #065f46; }
.badge-teams_plus { background: #ede9fe; color: #5b21b6; }
.success { background: #d4edda; color: #155724; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
.error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
.pricing { display: flex; gap: 20px; margin-top: 20px; }
.pricing-card { flex: 1; background: white; border: 2px solid #e9ecef; border-radius: 8px; padding: 24px; text-align: center; }
.pricing-card.current { border-color: #1a1a2e; position: relative; }
.pricing-card.current::before { content: 'Current Plan'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #1a1a2e; color: white; padding: 2px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.pricing-card.popular { border-color: #ffc107; }
.pricing-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.pricing-price { font-size: 36px; font-weight: 700; margin: 16px 0; }
.pricing-price span { font-size: 14px; color: #888; font-weight: 400; }
.pricing-features { list-style: none; text-align: left; margin: 16px 0; }
.pricing-features li { padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.pricing-features li:last-child { border: none; }
.pricing-features li::before { content: '✓'; margin-right: 8px; color: #28a745; }
.unlimited::before { content: '∞'; }
.no-stripe { background: #fff3cd; color: #856404; padding: 20px; border-radius: 8px; text-align: center; margin: 20px 0; }
@media (max-width: 640px) {
.pricing { flex-direction: column; }
.container { padding: 12px; }
.pricing-price { font-size: 28px; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
</style>
{% endblock %}
{% block content %}
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="{{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="card">
<h2 style="margin-bottom:8px;">Upgrade Your Plan</h2>
<p style="color:#666; font-size:14px;">You're currently on the <strong>{{ user.tier }}</strong> tier. Upgrade for more forms and higher submission limits.</p>
{% if not stripe_configured %}
<div class="no-stripe">
<p>Stripe integration is not configured yet. Check back soon!</p>
</div>
{% else %}
<div class="pricing">
{% for tier in tiers %}
<div class="pricing-card {% if tier.is_current %}current{% endif %}">
<div class="pricing-name">{{ tier.name }}</div>
<div class="pricing-price">
{% if tier.price == 0 %}Free{% else %}${{ tier.price }}<span>/mo</span>{% endif %}
</div>
<ul class="pricing-features">
{% if tier.max_sites == 0 %}
<li class="unlimited">Unlimited forms</li>
{% else %}
<li>{{ tier.max_sites }} forms</li>
{% endif %}
<li>{{ tier.max_submissions }} submissions/mo</li>
{% if tier.key in ('teams', 'teams_plus') %}
{% if tier.max_members == 0 %}
<li class="unlimited">Unlimited members</li>
{% else %}
<li>{{ tier.max_members }} members</li>
{% endif %}
<li>Role-based access control</li>
<li>Team analytics</li>
{% if tier.key == 'teams_plus' %}
<li>SSO & advanced security</li>
{% endif %}
{% else %}
<li>Email notifications</li>
{% endif %}
</ul>
{% if tier.is_current %}
<button class="btn btn-outline" disabled>Current Plan</button>
{% elif tier.can_upgrade %}
<form method="POST" action="{{ url_for('billing.create_checkout') }}" style="margin-top:8px;">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
<input type="hidden" name="tier" value="{{ tier.key }}">
<button type="submit" class="btn">Upgrade</button>
</form>
{% else %}
<button class="btn btn-outline" disabled>Coming Soon</button>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endblock %}