{% if countries is defined and countries|length > 0 %}
    <div class="paysera-country"
         data-api-url="{{ paymentMethodsUrl|escape('html') }}"
         data-window-mode="{{ windowMode|default('same_page')|escape('html') }}"
         data-failure-url="{{ failureUrl|default('')|escape('html') }}"
         data-no-methods-text="{{ 'No payment methods available for the selected country.'|trans({}, 'Modules.Payserapayments.Global') }}"
         data-error-text="{{ 'Failed to load payment methods. Please try again.'|trans({}, 'Modules.Payserapayments.Global') }}"
         data-select-method-error="{{ 'Please select a Paysera payment method to proceed.'|trans({}, 'Modules.Payserapayments.Global') }}"
         data-payment-error-label="{{ 'Payment Error'|trans({}, 'Modules.Payserapayments.Global') }}">

        <div class="paysera-country__select-wrap">
            <label for="paysera_country" class="form-label">
                <select name="paysera_country" id="paysera_country" class="form-control paysera-country__select"
                        data-available-in-prefix="{{ 'Available in:'|trans({}, 'Modules.Payserapayments.Global') }}">
                    {% for code, name in countries %}
                        <option value="{{ code|escape('html') }}"
                                data-name="{{ name|escape('html') }}"
                                {% if selectedCountry is defined and selectedCountry == code %}selected{% endif %}>{{ name|escape('html') }}</option>
                    {% endfor %}
                </select>
            </label>
            <div class="paysera-hint"
                 title="{{ 'Select your country to see the available payment methods.\nThe list will be automatically updated based on your selection'|trans({}, 'Modules.Payserapayments.Global') }}">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.75 8V9.5H11.25V8H12.75Z" fill="#23B9D7"/>
                    <path d="M12.75 16V11H11.25V16H12.75Z" fill="#23B9D7"/>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                          d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM5.5 12C5.5 15.5899 8.41015 18.5 12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12Z"
                          fill="#23B9D7"/>
                </svg>
            </div>
        </div>

    <div id="paysera-payment-methods" class="paysera-payment-methods" style="display: none; margin-top: 15px;">
        <div id="paysera-payment-methods-list" class="paysera-methods-list"></div>
    </div>

        <div id="paysera-loading" class="paysera-loading" style="display: none;">
            {{ 'Loading payment methods...'|trans({}, 'Modules.Payserapayments.Global') }}
        </div>

        {% include 'customer_consent.html.twig' %}
    </div>
{% endif %}
