{%- liquid
    assign wantedProvider = ""

    if settings.show_payment_provider_visa
        assign wantedProvider = wantedProvider | append: "visa,"
    endif
    if settings.show_payment_provider_mastercard
        assign wantedProvider = wantedProvider | append: "master,"
    endif
    if settings.show_payment_provider_maestro
        assign wantedProvider = wantedProvider | append: "maestro,"
    endif
    if settings.show_payment_provider_amex
        assign wantedProvider = wantedProvider | append: "american_express,"
    endif
    if settings.show_payment_provider_shoppay
        assign wantedProvider = wantedProvider | append: "shopify_pay,"
    endif
    if settings.show_payment_provider_apple
        assign wantedProvider = wantedProvider | append: "apple_pay,"
    endif
    if settings.show_payment_provider_google
        assign wantedProvider = wantedProvider | append: "google_pay,"
    endif
    if settings.show_payment_provider_klarna
        assign wantedProvider = wantedProvider | append: "klarna,"
    endif
    if settings.show_payment_provider_klarnadirect
        assign wantedProvider = wantedProvider | append: "sofort,"
    endif
    if settings.show_payment_provider_paypal
        assign wantedProvider = wantedProvider | append: "paypal,"
    endif
    if settings.show_payment_provider_amazon
        assign wantedProvider = wantedProvider | append: "amazon,"
    endif
-%}

<div class="payment-providers">
    {% assign provider = wantedProvider | split: "," %}
    {% for type in provider %}
        {{ type | payment_type_svg_tag }}
    {% endfor %}

    {%- if settings.show_payment_provider_twint -%}
        {% render 'image', assetName: 'Icon-Twint.png' , class: 'autowidth' %}
    {%- endif -%}

    {%- if settings.show_payment_provider_paytrail -%}
        {% render 'image', assetName: 'Icon-Paytrail.png', class: 'autowidth' %}
    {%- endif -%}

    {%- if settings.show_payment_provider_eft -%}
        {% render 'image', assetName: 'eft.avif', class: 'eft' %}
    {%- endif -%}

    {%- if settings.show_payment_provider_paytr -%}
        {% render 'image', assetName: 'paytr.png', class: 'paytr' %}
    {%- endif -%}

    {%- if settings.show_payment_provider_troy -%}
        {% render 'image', assetName: 'troy.webp', class: 'autowidth troy' %}
    {%- endif -%}

    {%- if settings.show_payment_provider_afterpay -%}
        {% render 'image', assetName: 'afterpay.jpg', class: 'autowidth afterpay' %}
    {%- endif -%}
</div>