{% load filters %}
{% if modo == "padrao-novo" %}
    <li class="pagamento lista-item" id="pagamento_9" data-id="9" data-nome="Koin Pós-Pago">
        <div class="radio_button">
            <input class="forma_pagamento" type="radio" value="9" 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-koin-logo.png" title="Pague com Koin Pós-Pago" alt="Pague com Koin Pós-Pago" />
        </div>
    </li>
{% else %}
    <div class="accordion-group koin">
        <label for="{% if modo == 'modal' %}modal-{% endif %}radio-koin" class="accordion-heading{% if modo == 'modal' %} forma-pagamento-modal{% endif %}" data-toggle="collapse" data-target="#{% if modo == 'modal' %}modal-{% endif %}escolha-koin" data-parent="#{% if modo == 'modal' %}modalFormasPagamento{% else %}formasPagamento{% endif %}" id="{% if modo == 'modal' %}modal{% endif %}pagamento9">
            <span class="radio-conteiner">
                <input type="radio" name="forma_pagamento" id="{% if modo == 'modal' %}modal-{% endif %}radio-koin" {% if forma_pagamento == pagamento.id|stringformat:"s" %}checked="checked"{% endif %} value="9">
            </span>
            <span class="forma-conteiner text-right">
                <img src="{{ STATIC_URL }}novo-template/img/bandeiras/koin-pos-pago.png" title="Pague com Koin Pós-Pago" alt="Pague com Koin Pós-Pago" />
            </span>
        </label>
        <div id="{% if modo == 'modal' %}modal-{% endif %}escolha-koin" class="collapse">
            <div class="accordion-inner">
                <div>
                    Escolha a Koin e pague pelo produto somente após recebê-lo. Para mais informações, <a href="http://www.koin.com.br/" target="_blank">clique aqui</a>.
                </div>
                <br />
                <script type="application/javascript">
                    $("#formas-pagamento-wrapper").on("click", "#finalizarCompra", function(event) {
                        if (!$("#radio-koin").is(':checked')) {
                            return true;
                        }
                        if (!$("#aceiteTermosKoin").is(':checked')) {
                            alert("Você precisa aceitar os Termos de Serviço da Koin Pós-Pago.");
                            event.preventDefault();
                            return false;
                        }
                    });
                </script>
                <div class="alert alert-warning" role="alert">
                    <div class="checkbox">
                        <label>
                            <input class="form-control" type="checkbox" id="aceiteTermosKoin" /> Lí e aceito os <a href="https://www.koin.com.br/home/termos" target="_blank" title="Termos e Serviços da Koin Pós-Pago">Termos de Serviço</a>.
                        </label>
                    </div>
                </div>
                <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 %}