{% extends 'base.html.twig' %}

{% block title %}{{ 'purchase.title'|trans }}{% endblock %}

{% block head_extra %}
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endblock %}

{% block body %}
<div class="max-w-lg mx-auto px-5 py-12">
    <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ package.name }}</h1>
    <p class="text-gray-500 mb-8">{{ 'pricing.plus.period'|trans }}</p>

    <div class="bg-white border-2 border-nova rounded-2xl p-6 mb-8">
        <div class="flex items-baseline justify-between mb-4">
            <span class="text-4xl font-extrabold text-gray-900">{{ package.price }} {{ package.currency }}</span>
            <span class="text-sm text-gray-500">{{ 'purchase.one_time'|trans }}</span>
        </div>
        <ul class="space-y-3 text-gray-700 text-sm">
            <li class="flex items-start gap-2"><span class="text-green-500">&#10003;</span> {{ 'pricing.plus.all_free'|trans }}</li>
            <li class="flex items-start gap-2"><span class="text-nova">&#10003;</span> <strong>{{ 'pricing.plus.package'|trans }}</strong></li>
            <li class="flex items-start gap-2"><span class="text-nova">&#10003;</span> {{ 'pricing.plus.exclusive_badges'|trans }}</li>
            <li class="flex items-start gap-2"><span class="text-nova">&#10003;</span> {{ 'pricing.plus.boardgame'|trans }}</li>
        </ul>
    </div>

    {% if error %}
        <div class="bg-red-50 text-red-700 rounded-xl px-4 py-3 mb-4 text-sm">{{ error }}</div>
    {% endif %}

    <form method="post" action="{{ path('purchase_index', {packageId: package.id}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('purchase') }}">

        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
            {{ 'purchase.email_label'|trans }}
        </label>
        <input
            type="email"
            id="email"
            name="email"
            value="{{ email }}"
            required
            placeholder="jan@example.com"
            class="w-full border border-gray-300 rounded-xl py-3 px-4 mb-4 text-gray-900 focus:border-nova focus:outline-none"
        />

        <div class="cf-turnstile mb-6" data-sitekey="{{ turnstile_site_key }}" data-theme="light" data-size="flexible"></div>

        <button
            type="submit"
            class="btn btn-primary btn-lg w-full relative z-10 shadow-lg"
        >
            {{ 'purchase.cta'|trans({'%price%': package.price ~ ' ' ~ package.currency}) }}
        </button>
    </form>

    <p class="text-xs text-gray-400 mt-4 text-center">
        {{ 'purchase.footer'|trans }}
    </p>
</div>
{% endblock %}