{% load i18n %}
<script>
    if (typeof window.athmAssetsLoaded === "undefined") {
        window.athmAssetsLoaded = true;

        const style = document.createElement("style");
        style.textContent = `
            .athm-container { display: inline-block; font-family: system-ui, -apple-system, sans-serif; }

            /* Button */
            .athm-button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: none; border-radius: 8px; font: 500 15px/1 system-ui, sans-serif; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; }
            .athm-button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
            .athm-button:active { transform: translateY(0); }
            .athm-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
            .athm-button svg { height: 18px; width: auto; }
            .athm-btn { background: #E86D00; color: white; }
            .athm-btn-dark { background: #18181B; color: white; }
            .athm-btn-light { background: white; color: #18181B; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }

            /* Dialog backdrop */
            .athm-dialog::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
            .athm-dialog { border: none; border-radius: 16px; padding: 0; width: min(360px, calc(100vw - 32px)); box-shadow: 0 24px 48px rgba(0,0,0,0.16); }
            .athm-dialog[open] { animation: athm-appear 0.2s ease-out; }
            @keyframes athm-appear { from { opacity: 0; transform: scale(0.96) translateY(8px); } }

            /* Modal structure */
            .athm-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; }
            .athm-modal-header h3 { margin: 0; font: 600 16px/1.2 system-ui, sans-serif; color: #18181B; }
            .athm-modal-close { all: unset; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; cursor: pointer; color: #71717A; transition: background 0.15s; }
            .athm-modal-close:hover { background: #f4f4f5; }
            .athm-modal-close svg { width: 20px; height: 20px; }
            .athm-modal-body { padding: 24px; text-align: center; }

            /* Phone step */
            .athm-instructions { color: #52525B; font: 400 14px/1.5 system-ui, sans-serif; margin: 0 0 20px; }
            .athm-phone-input { width: 100%; padding: 14px 16px; font: 400 18px/1.4 system-ui, sans-serif; letter-spacing: 0.5px; border: 2px solid #E4E4E7; border-radius: 10px; text-align: center; box-sizing: border-box; transition: border-color 0.15s, box-shadow 0.15s; }
            .athm-phone-input::placeholder { color: #A1A1AA; }
            .athm-phone-input:focus { outline: none; border-color: #E86D00; box-shadow: 0 0 0 3px rgba(232,109,0,0.1); }
            .athm-modal-body .athm-button { width: 100%; justify-content: center; margin-top: 16px; }
            .athm-error { color: #DC2626; font: 500 13px/1.4 system-ui, sans-serif; margin: 12px 0 0; }

            /* Loading states */
            .athm-spinner { width: 32px; height: 32px; border: 3px solid #f0f0f0; border-top-color: #E86D00; border-radius: 50%; margin: 0 auto 20px; animation: athm-spin 0.7s linear infinite; }
            @keyframes athm-spin { to { transform: rotate(360deg); } }
            .athm-waiting-text { font: 500 15px/1.4 system-ui, sans-serif; color: #18181B; margin: 0 0 6px; }
            .athm-waiting-subtext { color: #71717A; font: 400 14px/1.4 system-ui, sans-serif; margin: 0; }
            .athm-cancel-link { all: unset; color: #71717A; font: 400 14px/1 system-ui, sans-serif; cursor: pointer; margin-top: 20px; display: inline-block; padding: 8px 16px; border-radius: 6px; transition: background 0.15s; }
            .athm-cancel-link:hover { background: #f4f4f5; }

            /* Success */
            .athm-success-icon { width: 48px; height: 48px; background: #DCFCE7; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
            .athm-success-icon svg { width: 24px; height: 24px; color: #16A34A; }
            .athm-success-text { font: 500 15px/1.4 system-ui, sans-serif; color: #18181B; margin: 0 0 8px; }
            .athm-reference { color: #71717A; font: 400 13px/1.4 ui-monospace, monospace; background: #f4f4f5; padding: 6px 12px; border-radius: 6px; display: inline-block; }

            /* Error */
            .athm-error-icon { width: 48px; height: 48px; background: #FEE2E2; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
            .athm-error-icon svg { width: 24px; height: 24px; color: #DC2626; }
            .athm-error-text { color: #52525B; font: 400 14px/1.5 system-ui, sans-serif; margin: 0 0 20px; }

            .hidden { display: none !important; }
        `;
        document.head.appendChild(style);
    }
</script>

<script>
    if (typeof ATHMPayment === "undefined") {
        class ATHMPayment {
            #state = {
                showModal: false,
                step: "phone",
                phoneNumber: "",
                error: "",
                isProcessing: false,
                ecommerceId: null,
                referenceNumber: null,
                pollCount: 0,
                pollTimer: null
            };

            #elements = {};
            #config = {};
            #listeners = [];

            constructor(container, config) {
                this.#config = config;
                this.#cacheElements(container);
                this.#attachEventListeners();
            }

            #cacheElements(container) {
                this.#elements = {
                    container,
                    button: container.querySelector("[data-athm-button]"),
                    modal: container.querySelector("[data-athm-modal]"),
                    closeBtn: container.querySelector("[data-athm-close]"),
                    phoneInput: container.querySelector("[data-athm-phone-input]"),
                    submitBtn: container.querySelector("[data-athm-submit]"),
                    submitText: container.querySelector("[data-athm-submit-text]"),
                    submitLoading: container.querySelector("[data-athm-submit-loading]"),
                    cancelBtn: container.querySelector("[data-athm-cancel]"),
                    retryBtn: container.querySelector("[data-athm-retry]"),
                    errorText: container.querySelector("[data-athm-error]"),
                    errorTextInStep: container.querySelector("[data-athm-error-text]"),
                    referenceNumber: container.querySelector("[data-athm-reference]"),
                    steps: {
                        phone: container.querySelector('[data-athm-step="phone"]'),
                        waiting: container.querySelector('[data-athm-step="waiting"]'),
                        authorizing: container.querySelector('[data-athm-step="authorizing"]'),
                        success: container.querySelector('[data-athm-step="success"]'),
                        error: container.querySelector('[data-athm-step="error"]')
                    }
                };
            }

            #attachEventListeners() {
                // Button click
                this.#addListener(this.#elements.button, "click", () => this.openModal());

                // Modal close button
                this.#addListener(this.#elements.closeBtn, "click", () => this.closeModal());

                // Handle native dialog close (Escape key triggers this)
                this.#addListener(this.#elements.modal, "close", () => {
                    if (this.#state.showModal) {
                        this.#handleDialogClose();
                    }
                });

                // Backdrop click to close
                this.#addListener(this.#elements.modal, "click", (e) => {
                    if (e.target === this.#elements.modal) {
                        this.closeModal();
                    }
                });

                // Phone input
                this.#addListener(this.#elements.phoneInput, "input", (e) => {
                    this.#setState({ phoneNumber: e.target.value });
                });

                this.#addListener(this.#elements.phoneInput, "keyup", (e) => {
                    if (e.key === "Enter" && this.#isValidPhone()) this.submitPhone();
                });

                // Submit button
                this.#addListener(this.#elements.submitBtn, "click", () => this.submitPhone());

                // Cancel button
                this.#addListener(this.#elements.cancelBtn, "click", () => this.cancelPayment());

                // Retry button
                this.#addListener(this.#elements.retryBtn, "click", () => {
                    this.#setState({ step: "phone", error: "" });
                });
            }

            #addListener(element, event, handler) {
                if (!element) return;
                element.addEventListener(event, handler);
                this.#listeners.push({ element, event, handler });
            }

            #setState(updates) {
                this.#state = { ...this.#state, ...updates };
                this.#render();
            }

            #render() {
                this.#updateVisibility();
                this.#updateContent();
                this.#updateAttributes();
            }

            #updateVisibility() {
                // Modal visibility using native dialog API
                const modal = this.#elements.modal;
                if (this.#state.showModal && !modal.open) {
                    modal.showModal();
                } else if (!this.#state.showModal && modal.open) {
                    modal.close();
                }

                // Step visibility
                Object.entries(this.#elements.steps).forEach(([step, element]) => {
                    if (element) {
                        element.classList.toggle("hidden", this.#state.step !== step);
                    }
                });
            }

            #updateContent() {
                // Error message in phone step
                if (this.#elements.errorText) {
                    this.#elements.errorText.textContent = this.#state.error;
                    this.#elements.errorText.classList.toggle("hidden", !this.#state.error || this.#state.step !== "phone");
                }

                // Error message in error step
                if (this.#elements.errorTextInStep) {
                    this.#elements.errorTextInStep.textContent = this.#state.error;
                }

                // Reference number
                if (this.#elements.referenceNumber && this.#state.referenceNumber) {
                    this.#elements.referenceNumber.textContent = this.#state.referenceNumber;
                }

                // Submit button loading state
                if (this.#elements.submitText) {
                    this.#elements.submitText.classList.toggle("hidden", this.#state.isProcessing);
                }
                if (this.#elements.submitLoading) {
                    this.#elements.submitLoading.classList.toggle("hidden", !this.#state.isProcessing);
                }
            }

            #updateAttributes() {
                // Submit button disabled state
                if (this.#elements.submitBtn) {
                    this.#elements.submitBtn.disabled =
                        !this.#isValidPhone() || this.#state.isProcessing;
                }

                // Main button disabled state
                if (this.#elements.button) {
                    this.#elements.button.disabled = this.#state.isProcessing;
                }

                // Focus phone input when modal opens on phone step
                if (this.#state.showModal && this.#state.step === "phone" && this.#elements.phoneInput) {
                    setTimeout(() => this.#elements.phoneInput.focus(), 100);
                }
            }

            #isValidPhone() {
                const cleaned = this.#state.phoneNumber.replace(/\D/g, "");
                return cleaned.length === 10;
            }

            openModal() {
                this.#setState({
                    showModal: true,
                    step: "phone",
                    error: "",
                    phoneNumber: ""
                });
            }

            async closeModal() {
                if (this.#state.step === "waiting" || this.#state.step === "authorizing") {
                    if (!confirm("Cancel this payment?")) {
                        // Reopen dialog since native close already triggered
                        this.#elements.modal.showModal();
                        return;
                    }
                    await this.cancelPayment();
                    return;
                }
                this.#reset();
                this.#setState({ showModal: false });
            }

            // Handle native dialog close (Escape key)
            async #handleDialogClose() {
                if (this.#state.step === "waiting" || this.#state.step === "authorizing") {
                    // Reopen and let closeModal handle the confirm
                    this.#elements.modal.showModal();
                    await this.closeModal();
                } else {
                    this.#reset();
                    this.#state.showModal = false;
                }
            }

            #reset() {
                if (this.#state.pollTimer) {
                    clearTimeout(this.#state.pollTimer);
                }
                this.#setState({
                    step: "phone",
                    phoneNumber: "",
                    error: "",
                    ecommerceId: null,
                    referenceNumber: null,
                    pollCount: 0,
                    pollTimer: null,
                    isProcessing: false
                });
            }

            async submitPhone() {
                if (!this.#isValidPhone() || this.#state.isProcessing) return;

                this.#setState({ isProcessing: true, error: "" });

                try {
                    const response = await fetch(this.#config.initiateUrl, {
                        method: "POST",
                        credentials: "same-origin",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRFToken": this.#config.csrfToken,
                        },
                        body: JSON.stringify({
                            total: this.#config.total,
                            subtotal: this.#config.subtotal || null,
                            tax: this.#config.tax || null,
                            metadata_1: this.#config.metadata_1,
                            metadata_2: this.#config.metadata_2,
                            items: this.#config.items,
                            phone_number: this.#state.phoneNumber.replace(/\D/g, ""),
                        }),
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.error || "Failed to initiate payment");
                    }

                    this.#setState({
                        ecommerceId: data.ecommerce_id,
                        step: "waiting",
                        pollCount: 0,
                        isProcessing: false
                    });

                    this.#startPolling();
                } catch (err) {
                    this.#setState({
                        error: err.message,
                        step: "error",
                        isProcessing: false
                    });
                }
            }

            #startPolling() {
                const timer = setTimeout(() => this.#poll(), this.#config.pollInterval);
                this.#setState({ pollTimer: timer });
            }

            async #poll() {
                if (this.#state.step !== "waiting") return;

                const pollCount = this.#state.pollCount + 1;
                this.#setState({ pollCount });

                if (pollCount > this.#config.maxPollAttempts) {
                    this.#setState({
                        error: "Payment timed out. Please try again.",
                        step: "error",
                    });
                    return;
                }

                try {
                    const response = await fetch(
                        `${this.#config.statusUrl}?ecommerce_id=${this.#state.ecommerceId}`,
                        {
                            credentials: "same-origin",
                            headers: { "X-CSRFToken": this.#config.csrfToken },
                        }
                    );

                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.error || "Failed to check status");
                    }

                    switch (data.status) {
                        case "COMPLETED":
                            this.#setState({
                                referenceNumber: data.reference_number,
                                step: "success",
                            });
                            this.#handleSuccess();
                            break;

                        case "CONFIRM":
                            await this.#authorizePayment();
                            break;

                        case "CANCEL":
                            this.#setState({
                                error: "Payment was cancelled.",
                                step: "error",
                            });
                            break;

                        case "EXPIRED":
                            this.#setState({
                                error: "Payment expired. Please try again.",
                                step: "error",
                            });
                            break;

                        case "OPEN":
                        default:
                            this.#startPolling();
                            break;
                    }
                } catch (err) {
                    console.error("[django-athm] Poll error:", err);
                    this.#startPolling();
                }
            }

            async #authorizePayment() {
                this.#setState({ step: "authorizing" });

                try {
                    const response = await fetch(this.#config.authorizeUrl, {
                        method: "POST",
                        credentials: "same-origin",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRFToken": this.#config.csrfToken,
                        },
                        body: JSON.stringify({
                            ecommerce_id: this.#state.ecommerceId,
                        }),
                    });

                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.error || "Failed to authorize payment");
                    }

                    this.#setState({
                        referenceNumber: data.reference_number,
                        step: "success",
                    });
                    this.#handleSuccess();
                } catch (err) {
                    console.error("[django-athm] Authorization error:", err);
                    this.#setState({
                        error: err.message,
                        step: "error",
                    });
                }
            }

            #handleSuccess() {
                if (this.#config.successUrl) {
                    setTimeout(() => {
                        const url = new URL(this.#config.successUrl, window.location.origin);
                        url.searchParams.set('reference_number', this.#state.referenceNumber);
                        url.searchParams.set('ecommerce_id', this.#state.ecommerceId);
                        window.location.href = url.toString();
                    }, 2000);
                } else {
                    setTimeout(() => {
                        this.#reset();
                        this.#setState({ showModal: false });
                    }, 5000);
                }
            }

            async cancelPayment() {
                if (this.#state.pollTimer) {
                    clearTimeout(this.#state.pollTimer);
                }

                if (!this.#state.ecommerceId) {
                    this.#reset();
                    this.#setState({ showModal: false });
                    return;
                }

                try {
                    await fetch(this.#config.cancelUrl, {
                        method: "POST",
                        credentials: "same-origin",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRFToken": this.#config.csrfToken,
                        },
                        body: JSON.stringify({ ecommerce_id: this.#state.ecommerceId }),
                    });
                } catch (err) {
                    console.error("[django-athm] Cancel error:", err);
                }

                this.#reset();
                this.#setState({ showModal: false });
            }

            destroy() {
                this.#listeners.forEach(({ element, event, handler }) => {
                    element.removeEventListener(event, handler);
                });
                if (this.#state.pollTimer) {
                    clearTimeout(this.#state.pollTimer);
                }
                if (this.#elements.modal.open) {
                    this.#elements.modal.close();
                }
            }
        }

        // Initialize all payment buttons on the page
        window.initializeATHMButtons = function() {
            document.querySelectorAll("[data-athm-container]").forEach(container => {
                if (container._athmPayment) return; // Skip if already initialized

                const config = {
                    total: parseFloat(container.dataset.athmTotal),
                    subtotal: container.dataset.athmSubtotal ? parseFloat(container.dataset.athmSubtotal) : null,
                    tax: container.dataset.athmTax ? parseFloat(container.dataset.athmTax) : null,
                    metadata_1: container.dataset.athmMetadata1 || "",
                    metadata_2: container.dataset.athmMetadata2 || "",
                    items: JSON.parse(container.dataset.athmItems || "[]"),
                    successUrl: container.dataset.athmSuccessUrl || "",
                    failureUrl: container.dataset.athmFailureUrl || "",
                    pollInterval: parseInt(container.dataset.athmPollInterval) || 5000,
                    maxPollAttempts: parseInt(container.dataset.athmMaxPollAttempts) || 60,
                    initiateUrl: container.dataset.athmInitiateUrl,
                    statusUrl: container.dataset.athmStatusUrl,
                    authorizeUrl: container.dataset.athmAuthorizeUrl,
                    cancelUrl: container.dataset.athmCancelUrl,
                    csrfToken: container.dataset.athmCsrfToken,
                    language: container.dataset.athmLanguage || "es",
                };

                const instance = new ATHMPayment(container, config);
                container._athmPayment = instance;
            });
        };

    }
</script>

<div
    data-athm-container
    data-athm-total="{{ total }}"
    data-athm-subtotal="{{ subtotal }}"
    data-athm-tax="{{ tax }}"
    data-athm-metadata1="{{ metadata_1 }}"
    data-athm-metadata2="{{ metadata_2 }}"
    data-athm-items="{{ items_json }}"
    data-athm-success-url="{{ success_url }}"
    data-athm-failure-url="{{ failure_url }}"
    data-athm-poll-interval="{{ poll_interval }}000"
    data-athm-max-poll-attempts="{{ max_poll_attempts }}"
    data-athm-initiate-url="{{ initiate_url }}"
    data-athm-status-url="{{ status_url }}"
    data-athm-authorize-url="{{ authorize_url }}"
    data-athm-cancel-url="{{ cancel_url }}"
    data-athm-csrf-token="{{ csrf_token }}"
    data-athm-language="{{ language }}"
    class="athm-container"
>
    <!-- Payment Button -->
   <button
      type="button"
      data-athm-button
      class="athm-button athm-{{ theme }}"
  >
    {% if language == 'es' %}
        <svg viewBox="0 0 1820 190" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m859.68 6.42c45.87 0 91.74.01 137.61 0-.02 15.8-.02 31.59-.01 47.39-13.51-.01-27.02 0-40.53-.01-.01 43.8.01 87.59-.01 131.39-18.09-.01-36.17-.01-54.26 0-.02-43.78.02-87.55-.02-131.32-14.26 0-28.52.01-42.78.01 0-15.82.02-31.64 0-47.46z"/><path d="m1008.14 6.43c17.81-.01 35.62-.01 53.43-.01-.02 20.28 0 40.56-.01 60.84 14.86-.01 29.73 0 44.6-.01-.02-20.28.02-40.55-.02-60.82 17.88-.01 35.77-.01 53.65 0-.03 59.6-.01 119.21 0 178.81-17.89 0-35.76 0-53.64 0 .01-22.7-.01-45.39.01-68.09-14.87-.04-29.74 0-44.6-.02v68.11c-17.8-.01-35.61 0-53.41 0 0-59.61.02-119.21-.01-178.81z"/><path d="m778.79 8.84c10.1-3.18 21.2-3.14 31.28.07 12.89 4.34 22.45 15.62 27.07 28.12 15.34 49.13 29.47 98.63 43.5 148.15-17.57 0-35.14.01-52.7 0-3.31-8.89-6.66-17.76-9.95-26.65-15.52-.03-31.05.01-46.57-.02-2.44 9.13-4.94 18.24-7.32 27.38-17.88 0-35.76-.02-53.64.01 13.95-50.21 27.73-100.46 41.7-150.66 4.91-11.81 14.3-22.23 26.63-26.4m15.05 55.63c-3.79 15.91-7.27 31.89-10.91 47.84 7.57.01 15.13 0 22.7 0-3.97-15.93-8.03-31.85-11.79-47.84z"/><path d="m1507.68 8.43c12.24.13 24.5-.2 36.74.18-9.03 12.15-18.92 23.67-28.33 35.54-9.19-.03-18.37.07-27.55-.05 5.84-12.15 12.82-23.74 19.14-35.67z"/><path d="m1739.49 9.86c7.91-2.89 17.97-.2 22.33 7.29 3.89 6.85 3.18 16.43-2.51 22.1-7.35 7.3-20.93 6.84-27.49-1.27-7.27-8.87-3.81-24.69 7.67-28.12z"/><path d="m1789.15 9.78c10.28.01 20.56-.02 30.85.02v174.83c-10.28.36-20.58.06-30.86.15.03-58.33.01-116.66.01-175z"/><path d="m.52 35.44c13.7.05 27.41-.11 41.11.08 11.08.21 22.45 4.5 29.72 13.1 6.58 7.41 9.42 17.76 8.12 27.53-1.15 12.09-9.46 22.98-20.52 27.81-11.48 5.54-24.54 3.6-36.83 3.96v42.08c-7.2 0-14.4 0-21.6 0 0-38.19 0-76.37 0-114.56m21.6 20.48v31.52c6.28-.02 12.56.04 18.85-.02 4.37-.04 9.07-.97 12.29-4.15 5.83-5.33 6.66-15.11 1.84-21.35-3.08-3.97-8.18-5.85-13.09-5.94-6.63-.15-13.26-.01-19.89-.06z"/><path d="m1265.78 62.87c11.64-5.07 25.52-5.02 37.1.21 8.16 3.7 14.28 10.84 17.78 18.99 4.66-7.35 10.92-13.92 18.83-17.75 8.83-4.37 18.96-5.18 28.67-4.48 11.36.83 22.93 4.69 31.16 12.84 11.17 10.98 14.87 27.23 15.24 42.39.12 23.24 0 46.48.06 69.71-10.25-.01-20.5.04-30.74-.02 0-22.61.02-45.22-.01-67.82-.09-8.58-2.31-17.88-8.91-23.83-8.47-7.15-21.91-6.26-30.32.53-7.47 6.08-11.06 15.94-10.98 25.39.02 21.92-.01 43.84.02 65.75-10.21.01-20.41.01-30.61 0-.04-22.6.2-45.2-.18-67.8-.16-8.57-3.07-17.48-9.44-23.44-8.66-7.98-23.24-7.74-31.94.05-7.08 6.32-10.35 16.04-10.26 25.36 0 21.94 0 43.89.01 65.84-10.26 0-20.52 0-30.77 0 .01-41.21.01-82.42 0-123.62 9.51.02 19.03-.04 28.55.03.6 4.95 1.56 9.85 2.03 14.82 3.52-5.68 8.5-10.52 14.71-13.15z"/><path d="m1491.59 59.91c19.31-3.26 40.47.99 55.51 13.98 14.21 11.97 21.98 30.64 21.77 49.09.3 17.81-6.41 36.06-19.69 48.21-11.55 10.99-27.56 15.89-43.22 16.58-15.25-.03-31.03-3.95-43.04-13.72-15.04-11.84-23-31.19-22.84-50.1-.41-16.92 5.61-34.17 17.44-46.42 9.01-9.43 21.25-15.49 34.07-17.62m3.86 27.83c-7.08 1.74-13.46 6.11-17.64 12.07-9.88 14.07-9.65 34.77 1.08 48.31 9.34 11.77 27 14.31 40.28 8.31 9.09-4.13 15.33-13.03 17.59-22.6 3.55-14.05-.47-30.29-11.8-39.75-8-6.88-19.41-8.97-29.51-6.34z"/><path d="m1577.01 61.19c11.13-.05 22.27-.01 33.41-.02 7.38 18.07 15.55 35.83 22.03 54.26 4.75 12.84 9.34 25.73 14.2 38.52 8.43-22.62 16.03-45.57 25.53-67.78 3.45-8.33 6.89-16.67 10.35-25 11.14.01 22.28-.02 33.42.01-17.6 41.37-35.17 82.76-52.77 124.13-11.06 0-22.12.01-33.18 0-17.65-41.38-35.32-82.75-52.99-124.12z"/><path d="m1730.79 60.84c10.22-.01 20.44 0 30.67-.01.02 41.32-.01 82.64.01 123.96-10.23 0-20.46 0-30.69 0 .01-41.32-.01-82.64.01-123.95z"/><path d="m86.39 84.7c7.11-9.03 18.04-14.73 29.51-15.44 11.41-.65 24.12.8 32.87 8.91 6.79 6.29 9.06 15.87 9.11 24.81.1 15.67.01 31.35.04 47.02-6.88 0-13.76 0-20.64 0 .01-2.99.04-5.98-.14-8.97-4.24 3.49-7.93 7.95-13.32 9.72-12.19 4.34-27.53.41-34.96-10.53-5.76-8.55-5.83-20.75.31-29.13 4.6-6.34 12.09-10 19.68-11.28 9.57-1.49 19.47-.41 28.54 2.97.33-5.38-1.81-11-6.62-13.78-9.45-6-22.5-2.39-29.19 6.11-5.06-3.48-10.14-6.92-15.19-10.41m25.1 31.66c-5.53 2.5-8.07 10.23-4.07 15.12 5.77 6.34 16.31 5.86 22.77.81 4.47-3.24 6.85-8.65 7.17-14.07-8-3.54-17.59-5.75-25.87-1.86z"/><path d="m174.84 88.92c5.3-10.21 15.5-17.95 27.01-19.43 8.45-1.14 17.69.58 24.27 6.28 1.73 1.65 3.35 3.45 5.29 4.88.21-3.01.15-6.03.15-9.05h20c0 23.83.01 47.66-.01 71.49-.23 5.3-.42 10.67-2.08 15.75-3.15 12.08-12.66 22.34-24.68 25.95-12.89 3.96-27.71 2.87-39.21-4.49-6.32-3.97-11.43-9.88-14.22-16.83 6.67-2.7 13.36-5.35 20.03-8.03 2.36 5.56 6.76 10.51 12.71 12.21 7.76 2.18 17.12.32 22.37-6.13 5.14-6.18 5.45-14.74 4.89-22.39-3.32 2.76-6.01 6.32-10.01 8.21-9.35 4.68-20.9 4.36-30.19-.3-10.41-5.1-17.69-15.39-20.39-26.52-2.33-10.55-1.26-22.09 4.07-31.6m30.65-.2c-3.04.84-5.88 2.41-8.17 4.59-9.46 8.83-9.16 26.15 1.12 34.24 7.26 5.92 18.61 5.65 25.68-.46 8.65-7.35 9.64-21.37 3.42-30.57-4.69-6.96-14.04-10.11-22.05-7.8z"/><path d="m266.39 84.7c7.11-9.03 18.04-14.73 29.51-15.44 11.42-.65 24.13.8 32.88 8.91 6.78 6.29 9.05 15.86 9.1 24.8.1 15.67.01 31.35.04 47.03-6.88 0-13.76 0-20.64 0 .01-2.99.03-5.99-.14-8.97-4.23 3.48-7.92 7.94-13.3 9.7-12.2 4.36-27.56.43-34.99-10.52-5.75-8.55-5.82-20.74.32-29.11 4.59-6.34 12.07-10 19.65-11.28 9.58-1.5 19.49-.42 28.57 2.95.33-5.34-1.78-10.94-6.56-13.73-9.44-6.05-22.54-2.45-29.25 6.07-5.06-3.48-10.14-6.92-15.19-10.41m25.05 31.69c-5.49 2.51-8 10.19-4.04 15.07 5.58 6.18 15.74 5.91 22.21 1.25 4.8-3.2 7.44-8.82 7.75-14.49-8.02-3.54-17.64-5.76-25.92-1.83z"/><path d="m395.21 83.24c11.63-14.04 32.8-17.59 49.28-10.86 8.47 3.67 15.27 10.68 19.09 19.04-6.4 2.69-12.8 5.34-19.2 8.02-2.91-5.48-7.98-10.26-14.43-10.69-7.54-1.38-15.62 2.2-19.74 8.64-6.01 9.57-4.93 23.95 4.08 31.34 6.55 5.48 16.57 5.75 23.73 1.3 3.13-2.07 5.27-5.18 7.15-8.35 6.4 2.78 12.8 5.55 19.2 8.32-5.26 9.85-14.12 18.23-25.13 21.03-11.53 2.83-24.34 1.63-34.59-4.6-9-5.47-15.47-14.73-17.85-24.96-3-13.1-.47-27.87 8.41-38.23z"/><path d="m504.53 69.88c12.94-2.28 27.17.7 36.99 9.76 16.63 15.09 17.42 43.81 2.2 60.16-15.71 16.94-45.8 16.9-61.41-.15-14.92-16.18-14.26-44.24 1.72-59.48 5.66-5.33 12.89-8.81 20.5-10.29m1.84 19.68c-16.4 5.35-18.65 30.59-4.87 40.01 6.71 4.75 16.28 4.72 23.04.08 12.15-8.3 12.26-29.01.27-37.5-5.27-3.74-12.35-4.7-18.44-2.59z"/><path d="m597.64 72.68c7.94-4.56 17.9-4.49 26.39-1.53 7.32 2.61 12.79 9.02 15.14 16.33 1.95 5.61 2.32 11.6 2.36 17.5-.01 15.01-.01 30.01-.01 45.02-6.99 0-13.97 0-20.96 0-.01-14.95.02-29.91-.01-44.86-.08-4.47-.71-9.35-3.9-12.75-3.44-3.63-8.9-4.44-13.65-3.68-5.7.84-10.31 5.24-12.57 10.39-1.97 4.34-2.52 9.17-2.51 13.9v37c-6.99 0-13.97 0-20.96 0 0-26.13 0-52.27 0-78.4h19.68c.01 3.66-.1 7.32.15 10.97 3.52-3.42 6.38-7.56 10.85-9.89z"/></g></svg>
    {% else %}
        <svg viewBox="0 0 1790 190" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m829.68 10.42c45.87 0 91.74.01 137.61 0-.02 15.8-.01 31.59-.01 47.39-13.51-.01-27.02 0-40.53-.01-.01 43.8.01 87.59-.01 131.39-18.08-.01-36.17-.01-54.26 0-.02-43.78.02-87.55-.02-131.32-14.26 0-28.52 0-42.77.01-.01-15.82.01-31.64-.01-47.46z"/><path d="m978.14 10.43c17.81-.01 35.62-.01 53.43 0-.02 20.27 0 40.55-.01 60.83 14.86-.01 29.73 0 44.6-.01-.02-20.28.01-40.55-.02-60.82 17.88-.01 35.77-.01 53.65 0-.03 59.6-.02 119.21 0 178.81-17.88 0-35.76 0-53.64 0 .01-22.7-.01-45.39.01-68.09-14.87-.04-29.74 0-44.6-.02v68.11c-17.8-.01-35.61 0-53.41 0 0-59.61.02-119.21-.01-178.81z"/><path d="m1479.53 10.55c12.21-.13 24.46-.3 36.67.1-8.51 11.51-17.94 22.31-26.72 33.63-1.79 2.99-5.7 1.56-8.52 1.88-6.89-.32-13.89.66-20.69-.58.98-1.87 2.01-3.72 3.06-5.56 5.41-9.81 10.6-19.77 16.2-29.47z"/><path d="m748.75 12.86c10.14-3.21 21.3-3.17 31.42.09 13.11 4.47 22.8 16.08 27.24 28.91 15.22 48.87 29.29 98.08 43.23 147.32-17.57 0-35.13.01-52.7 0-3.31-8.89-6.65-17.76-9.95-26.65-15.53-.03-31.06-.01-46.59-.01-2.47 9.16-4.85 18.34-7.4 27.48h-53.58c13.88-49.94 27.62-99.92 41.47-149.87 4.63-12.23 14.3-22.97 26.86-27.27m15.07 55.73c-3.8 15.87-7.25 31.81-10.89 47.71 7.57.02 15.13.01 22.7.01-3.99-15.89-7.95-31.79-11.81-47.72z"/><path d="m1703.4 17.46c6.14-8 18.98-8.88 26.61-2.53 2.35 1.85 3.81 4.5 5.19 7.11.91 5.66 1.4 12.11-2.22 16.98-6.12 8.7-19.96 9.85-27.7 2.72-6.63-6.06-7.32-17.23-1.88-24.28z"/><path d="m1760.77 11.8c9.74-.04 19.48-.01 29.23-.02v175.01c-9.75-.03-19.5.07-29.25-.06.03-58.31.01-116.62.02-174.93z"/><path d="m437.44 44.48c7.71-3.68 17.78 2.02 18.64 10.49 1.35 7.67-5.33 15.29-13.05 15.23-7.61.44-14.54-6.63-13.77-14.25.1-5.1 3.69-9.4 8.18-11.47z"/><path d="m5.52 45.44c13.71.05 27.41-.11 41.11.08 11.09.21 22.47 4.51 29.73 13.12 6.56 7.39 9.39 17.71 8.11 27.45-1.12 12.11-9.44 23.03-20.51 27.87-11.48 5.54-24.55 3.59-36.84 3.96v42.08c-7.2 0-14.4 0-21.6 0 0-38.19 0-76.37 0-114.56m21.6 20.48v31.52c7.97-.25 16.03.56 23.95-.54 8.81-1.44 14.18-11.57 11.56-19.87-1.56-6.54-8.11-10.78-14.61-10.98-6.96-.3-13.94-.05-20.9-.13z"/><path d="m536.96 45.44h20.96c.01 9.51-.01 19.01.01 28.52.13 6.23-1.1 12.38-1.19 18.59 3.44-3.2 6.12-7.24 10.37-9.52 7.99-5 18.23-4.79 26.96-1.98 8.07 2.67 13.58 10.13 15.72 18.12 1.42 5.15 1.7 10.52 1.74 15.83-.01 15-.01 30 0 45-6.99.01-13.98 0-20.97 0-.01-14.98.03-29.95-.02-44.93 0-5.13-1.26-10.85-5.66-14.03-6.18-4.31-15.47-3.16-20.57 2.35-4.72 4.91-6.32 11.97-6.37 18.59-.05 12.68-.01 25.35-.02 38.02-6.99 0-13.97 0-20.96 0 0-38.19 0-76.37 0-114.56z"/><path d="m480.6 57.6h20.96v24h19.2v17.92c-6.4 0-12.8 0-19.2 0 .01 9.82-.03 19.65.01 29.47.23 3.34.08 7.23 2.68 9.77 3.61 3.72 9.66 3.12 13.82.68 1.95 6.13 3.95 12.24 5.89 18.37-7.84 3.39-16.78 4.41-25.11 2.44-7.67-1.81-14.12-7.8-16.54-15.3-1.94-5.75-1.7-11.92-1.71-17.91 0-9.17 0-18.35 0-27.52-4.59 0-9.17 0-13.76 0 0-5.97 0-11.95 0-17.92h13.76c0-8 0-16 0-24z"/><path d="m1241.55 63.32c10.55-3.3 22.39-2.94 32.56 1.52 7.33 3.21 13.18 9.18 16.95 16.17.35.99.72 1.99 1.09 2.99 4.29-5.56 8.62-11.31 14.64-15.12 12.66-8.33 28.94-8.58 43.31-5.43 13.22 2.83 24.68 12.11 30.27 24.42 2.26 5.58 4.46 11.35 4.57 17.46l.53-.1c.09 2.55.34 5.09.82 7.6.4 24.62.03 49.26.19 73.9-10.27.12-20.54.05-30.81.04.01-16.92 0-33.84 0-50.75-.26-8.3.65-16.69-.71-24.91-.26-1.09-.49-2.18-.69-3.27-.47-1.28-.87-2.56-1.28-3.83-2.25-5.05-5.88-9.76-11.09-11.96-8.69-3.63-19.49-1.96-26.46 4.45-3.48 3.05-5.87 7.09-7.72 11.29-.68 2.35-1.28 4.72-1.96 7.07-.57 23.95-.13 47.92-.23 71.88-10.28.09-20.55.06-30.82.01.01-16.58 0-33.15 0-49.73-.22-8.27.56-16.61-.65-24.82-.4-1.35-.7-2.71-1.06-4.06-.56-1.44-1.13-2.86-1.66-4.3-2.58-4.96-6.28-9.55-11.48-11.9-9.12-4.32-20.99-2.46-27.93 5.01-3.38 3.26-5.42 7.56-7.13 11.86-2.5 8.17-1.35 16.8-1.61 25.2.01 17.56-.03 35.11.02 52.66-10.28.26-20.57.06-30.85.11.02-41.2.01-82.41.01-123.62 9.56.12 19.13-.21 28.69.19.23 2.58.48 5.17.82 7.74.52 2.18.7 4.4 1.06 6.61 4.34-6.76 10.85-12.09 18.61-14.38z"/><path d="m1450.57 65.42c17.68-6.68 38.15-6.08 55.27 1.99 12.4 5.86 22.48 16.17 28.46 28.47.86 2.08 1.75 4.14 2.57 6.24.75 2.33 1.43 4.68 2.07 7.04 1.99 8.74 2.25 17.86 1.03 26.73-.87 6.22-2.63 12.31-5.2 18.05-.51 1.06-1.02 2.11-1.49 3.17-6.72 12.86-18.26 23.11-31.91 28.09-20.08 7.32-43.72 5.8-61.94-5.74-12.92-8.13-21.79-21.71-25.52-36.38-.35-1.66-.66-3.31-1.1-4.94-.29-2.36-.4-4.76-.95-7.08-.21-3.71-.2-7.44-.03-11.16.78-5.36 1.47-10.75 3.12-15.94.61-1.7 1.23-3.4 1.83-5.12 6.13-15.1 18.48-27.65 33.79-33.42m11.23 26.22c-7.79 3.52-13.62 10.53-16.64 18.43-.46 1.28-.83 2.56-1.27 3.83-.37 1.66-.66 3.33-1.11 4.97-.4 4.4-.36 8.82.02 13.21.85 3.4 1.69 6.8 2.98 10.07.25.5.77 1.48 1.03 1.97.24.5.73 1.49.98 1.98 4.01 6.69 10.44 11.93 18.01 14.02 9.99 2.75 21.45 1.61 30-4.54 5.16-3.55 8.75-8.92 11.19-14.61.41-1.26.81-2.54 1.28-3.8.2-1.09.43-2.18.72-3.26 1.06-5.52.9-11.25.13-16.8-.88-3.1-1.88-6.16-3.12-9.12-2.89-5.47-6.73-10.59-12-13.96-9.35-6.35-21.98-6.99-32.2-2.39z"/><path d="m1548.84 63.22c11.13.01 22.28-.26 33.39.12 5.73 13.19 11.09 26.53 16.75 39.75.62 1.67 1.24 3.34 1.85 5.03.36.98.73 1.97 1.11 2.96.6 1.67 1.21 3.33 1.82 5.01.36 1.01.73 2.02 1.11 3.04.47 1.24.9 2.5 1.41 3.75.83 2.42 1.74 4.82 2.61 7.23.47 1.24.9 2.49 1.42 3.74.47 1.43 1 2.85 1.51 4.28.36.98.74 1.96 1.12 2.95.45 1.26.87 2.51 1.38 3.76.49 1.43 1.03 2.86 1.57 4.29.85 2.21 1.55 4.44 2.32 6.7.43-.97 1.3-2.91 1.73-3.88 1.03-2.96 2.11-5.9 3.11-8.87 1.34-3.37 2.6-6.78 3.78-10.21.48-1.25.92-2.5 1.43-3.74.83-2.43 1.74-4.84 2.6-7.26.47-1.24.9-2.49 1.42-3.73.82-2.43 1.73-4.84 2.61-7.26.46-1.25.88-2.5 1.39-3.74 4.3-11.18 9.12-22.15 13.61-33.26 1.45-3.49 2.99-6.96 4.21-10.55 11.23-.32 22.47-.18 33.71-.07-1.04 2.19-1.98 4.4-2.92 6.61-6.35 15.03-12.75 30.04-19.14 45.05-1.24 3.01-2.55 5.98-3.81 8.98-8.94 21.13-18 42.21-26.88 63.37-11.08.09-22.15.03-33.22.04-4.34-10.06-8.61-20.14-12.92-30.2-1-2.34-2-4.67-2.98-7-1.02-2.34-2.02-4.68-3-7.01-1.01-2.33-2.01-4.67-2.99-7.01-6.7-15.65-13.36-31.32-20.06-46.97-.99-2.34-2-4.67-2.99-7-1.99-4.68-3.99-9.35-5.99-14.02-.7-1.63-1.4-3.26-2.07-4.88z"/><path d="m1702.58 186.79c.02-41.32 0-82.64.01-123.96 10.25.01 20.5-.01 30.75.02.04 41.28-.02 82.57.04 123.85-10.27.19-20.54.04-30.8.09z"/><path d="m92.39 94.7c7.12-9.05 18.1-14.75 29.59-15.44 11.38-.64 24.04.82 32.77 8.88 6.81 6.3 9.08 15.9 9.13 24.87.1 15.66.01 31.33.04 46.99-6.88 0-13.76 0-20.64 0 .01-2.97.04-5.95-.12-8.91-3.78 2.83-6.77 6.74-11.17 8.73-12.29 5.71-28.67 2.07-36.75-9.04-6.13-8.59-6.35-21.15-.05-29.71 4.6-6.32 12.06-9.98 19.64-11.25 9.57-1.5 19.48-.42 28.55 2.96.35-5.38-1.8-10.99-6.6-13.78-9.45-5.99-22.51-2.4-29.19 6.11-5.06-3.47-10.14-6.92-15.2-10.41m25.09 31.66c-5.54 2.51-8.07 10.27-4.04 15.14 5.43 5.96 15.17 5.88 21.6 1.59 5.11-3.14 8.03-8.97 8.31-14.88-8-3.52-17.59-5.74-25.87-1.85z"/><path d="m170.65 81.6h23.82c6.92 16.06 13.14 32.44 20.49 48.3 6.79-15.98 12.96-32.22 19.52-48.3h23.35c-15.76 36.13-31.33 72.34-47.22 108.4h-22.45c5.26-11.22 10.27-22.57 15.44-33.83-10.99-24.86-21.97-49.71-32.95-74.57z"/><path d="m293.65 81.6h23.51c3.98 15.09 7.97 30.17 11.93 45.27.41 1.56.94 3.08 1.53 4.59 1.39-2.65 2.14-5.57 3.05-8.41 4.35-13.82 8.72-27.63 13.09-41.45h21.6c5.44 16.58 10.35 33.35 16.13 49.81 1.37-2.58 1.91-5.49 2.66-8.3 3.59-13.84 7.21-27.67 10.81-41.51h23.2c-8.37 26.13-16.75 52.27-25.12 78.4-7.53-.01-15.06.03-22.59-.02-4.73-15.1-9.58-30.15-14.31-45.25-.51-1.72-1.24-3.36-2.05-4.96-5.65 16.65-10.68 33.5-16.09 50.23-7.42 0-14.83 0-22.24 0-8.38-26.13-16.75-52.26-25.11-78.4z"/><path d="m432.24 81.6h20.96v78.4c-6.99 0-13.98 0-20.96 0 0-26.13 0-52.27 0-78.4z"/></g></svg>
    {% endif %}
  </button>

    <!-- Modal Dialog -->
    <dialog data-athm-modal class="athm-dialog">
        <div class="athm-modal-header">
            <h3>{{ modal_title }}</h3>
            <button type="button" data-athm-close class="athm-modal-close" aria-label="{% trans 'Close' %}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
            </button>
        </div>

        <div class="athm-modal-body">
            <!-- Step 1: Phone Number Entry -->
            <div data-athm-step="phone">
                <p class="athm-instructions">{% trans "Enter your phone number registered with ATH Móvil" %}</p>
                <input
                    type="tel"
                    data-athm-phone-input
                    inputmode="tel"
                    autocomplete="off"
                    placeholder="787-123-4567"
                    class="athm-phone-input"
                    maxlength="12"
                    pattern="[0-9\-]{10,12}"
                />
                <p data-athm-error class="athm-error hidden"></p>
                <button type="button" data-athm-submit class="athm-button athm-{{ theme }}" disabled>
                    <span data-athm-submit-text>{% trans "Continue" %}</span>
                    <span data-athm-submit-loading class="hidden">{% trans "Processing..." %}</span>
                </button>
            </div>

            <!-- Step 2: Waiting for Confirmation -->
            <div data-athm-step="waiting" class="hidden">
                <div class="athm-spinner"></div>
                <p class="athm-waiting-text">{% trans "Confirm in ATH Móvil" %}</p>
                <p class="athm-waiting-subtext">{% trans "Check the notification on your phone" %}</p>
                <button type="button" data-athm-cancel class="athm-cancel-link">{% trans "Cancel" %}</button>
            </div>

            <!-- Step 2b: Authorizing -->
            <div data-athm-step="authorizing" class="hidden">
                <div class="athm-spinner"></div>
                <p class="athm-waiting-text">{% trans "Processing payment..." %}</p>
            </div>

            <!-- Step 3: Success -->
            <div data-athm-step="success" class="hidden">
                <div class="athm-success-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <p class="athm-success-text">{% trans "Payment completed" %}</p>
                <p class="athm-reference">Ref: <span data-athm-reference></span></p>
            </div>

            <!-- Step 4: Error -->
            <div data-athm-step="error" class="hidden">
                <div class="athm-error-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 8v4m0 4h.01"/></svg>
                </div>
                <p data-athm-error-text class="athm-error-text"></p>
                <button type="button" data-athm-retry class="athm-button athm-{{ theme }}">{% trans "Try again" %}</button>
            </div>
        </div>
    </dialog>
</div>

<script>initializeATHMButtons();</script>