{#
 # Add Payment Method Form (Bootstrap 5 Override)
 #
 # Form to add a new payment method to the account.
 #
 # WooCommerce PHP equivalent: myaccount/form-add-payment-method.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% set available_gateways = fn('WC').payment_gateways.get_available_payment_gateways() %}

{% if available_gateways is not empty %}
    <form id="add_payment_method" method="post">
        <div id="payment" class="woocommerce-Payment">
            <ul class="list-group mb-4">
                {% for gateway in available_gateways %}
                    <li class="list-group-item payment_method_{{ gateway.id|esc_attr }}">
                        <div class="form-check">
                            <input type="radio"
                                   class="form-check-input input-radio"
                                   id="payment_method_{{ gateway.id|esc_attr }}"
                                   name="payment_method"
                                   value="{{ gateway.id|esc_attr }}"
                                   {% if gateway.chosen %}checked{% endif %} />
                            <label class="form-check-label d-flex align-items-center gap-2"
                                   for="payment_method_{{ gateway.id|esc_attr }}">
                                <span>{{ gateway.get_title()|wp_kses_post }}</span>
                                {{ gateway.get_icon()|raw }}
                            </label>
                        </div>

                        {% if gateway.has_fields() or gateway.get_description() %}
                            <div class="payment_box payment_method_{{ gateway.id|esc_attr }} mt-2 ps-4{% if not gateway.chosen|default(false) %} d-none{% endif %}">
                                {% if gateway.get_description() %}
                                    <p class="small text-body-secondary mb-2">{{ gateway.get_description()|wp_kses_post }}</p>
                                {% endif %}
                                {{ gateway.payment_fields() }}
                            </div>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>

            {{ do_action('woocommerce_add_payment_method_form_bottom') }}

            <div class="mt-3">
                {{ wp_nonce_field('woocommerce-add-payment-method', 'woocommerce-add-payment-method-nonce') }}
                <button type="submit"
                        class="btn btn-primary"
                        id="place_order"
                        value="{{ __('Add payment method') }}">
                    <i class="bi bi-plus-lg me-1" aria-hidden="true"></i>
                    {{ __('Add payment method') }}
                </button>
                <input type="hidden" name="woocommerce_add_payment_method" id="woocommerce_add_payment_method" value="1" />
            </div>
        </div>
    </form>
{% else %}
    <div class="alert alert-info" role="alert">
        <i class="bi bi-info-circle me-2" aria-hidden="true"></i>
        {{ __('New payment methods can only be added during checkout. Please contact us if you require assistance.') }}
    </div>
{% endif %}