{% extends "admin_base.html" %}

{% block page_title %}New Payment - PayPal{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-3xl space-y-5 p-4 sm:p-6">
    <header class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-foreground">Create a payment</h1>
            <p class="mt-1 text-sm text-muted">Create a PayPal checkout link for a customer.</p>
        </div>
        <a href="/plugins/paypal-payment" class="blocks-button blocks-button-secondary">
            <i class="fas fa-arrow-left" aria-hidden="true"></i> Back to payments
        </a>
    </header>

    <section class="space-y-5 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7" aria-labelledby="payment-details-title">
        <div>
            <h2 id="payment-details-title" class="text-lg font-semibold text-foreground">Payment details</h2>
            <p class="mt-1 text-sm text-muted">Enter the amount and a description customers will recognize.</p>
        </div>
        <div id="payment-config" data-key-id="{{ key_id }}" data-currency="{{ settings.currency_code | default(value='USD') }}" hidden></div>

        <form id="payment-form" class="space-y-5">
            <div class="blocks-form-field">
                <label for="payment-amount">Payment amount</label>
                <input type="number" id="payment-amount" class="blocks-input" placeholder="100.00" value="50" min="0.01" step="0.01" inputmode="decimal" required>
            </div>
            <div class="blocks-form-field">
                <label for="payment-desc">Description</label>
                <input type="text" id="payment-desc" class="blocks-input" placeholder="Optional description" value="One-time Payment" maxlength="255">
            </div>
            <p id="payment-status" class="rounded-lg border border-divider bg-canvas p-3 text-sm text-foreground" role="status" aria-live="polite" hidden></p>
            <div class="flex justify-end border-t border-divider pt-5">
                <button id="btn-start-payment" type="submit" class="blocks-button blocks-button-primary w-full sm:w-auto">
                    <i class="fas fa-credit-card" aria-hidden="true"></i> Start payment
                </button>
            </div>
        </form>
    </section>
</div>

<script src="/plugins/paypal-payment/assets/js/admin_new_payment.js"></script>
{% endblock %}