{% load filters %}
{% if modo == 'v0' %}
    <li class="pagamento lista-item" id="pagamento_1" data-id="1" data-nome="PagSeguro">
        <div class="radio_button">
            <input class="forma_pagamento" type="radio" value="1" name="forma_pagamento" {% if forma_pagamento == pagamento.id|stringformat:"s" %}checked="checked"{% endif %} />
        </div>
        <div class="pagamento_imagem">
            <img src="{{ STATIC_URL }}img/formas-de-pagamento/checkout-pagseguro-logo.png" title="Pague com PagSeguro" alt="Pague com PagSeguro" />
        </div>
    </li>
{% else %}
    <div class="accordion-group pagseguro">
        <label for="{% if modo == 'modal' %}modal-{% endif %}radio-pagseguro" class="accordion-heading{% if modo == 'modal' %} forma-pagamento-modal{% endif %}" data-toggle="collapse" data-target="#{% if modo == 'modal' %}modal-{% endif %}escolha-pagseguro" data-parent="#{% if modo == 'modal' %}modalFormasPagamento{% else %}formasPagamento{% endif %}" id="{% if modo == 'modal' %}modal{% endif %}pagamento1">
            <span class="radio-conteiner">
                <input type="radio" name="forma_pagamento" id="{% if modo == 'modal' %}modal-{% endif %}radio-pagseguro" {% if forma_pagamento == pagamento.id|stringformat:"s" %}checked="checked"{% endif %} value="1">
            </span>
            <span class="forma-conteiner text-right">
                <img src="{{ STATIC_URL }}loja/estrutura/v1/img/bandeiras/pagseguro.png" title="Pague com PagSeguro" alt="Pague com PagSeguro" />
            </span>
        </label>
        <div id="{% if modo == 'modal' %}modal-{% endif %}escolha-pagseguro" class="collapse">
            <div class="accordion-inner">
                <ul class="bandeiras-pagamento">
                    <li><i class="icone-pagamento visa" title="Visa"></i></li>
                    <li><i class="icone-pagamento mastercard" title="Mastercard"></i></li>
                    <li><i class="icone-pagamento hipercard" title="Hipercard"></i></li>
                    <li><i class="icone-pagamento amex" title="Amex"></i></li>
                    <li><i class="icone-pagamento elo" title="Elo"></i></li>
                    <li><i class="icone-pagamento boleto" title="Boleto"></i></li>
                    <li><i class="icone-pagamento itau" title="Itaú"></i></li>
                    <li><i class="icone-pagamento bradesco" title="Bradesco"></i></li>
                    <li><i class="icone-pagamento banco-do-brasil" title="Banco do Brasil"></i></li>
                </ul>
                <div class="text-right">
                    <span>Valor</span>
                    <h5 class="titulo cor-principal text-right pagamento-valor preco-carrinho-total">
                        R$ {{ carrinho_subtotal|formatar_decimal_br }}
                    </h5>
                </div>
            </div>
        </div>
    </div>
{% endif %}