{% load filters %}
{% if modo == 'padrao-novo' %}
    <li class="pagamento lista-item" id="pagamento_1" data-id="11" data-nome="Cartão de Crédido">
        <div class="radio_button">
            <input class="forma_pagamento" type="radio" value="11" 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-rede-logo.png" title="Pague com Cartão de Crédido" alt="Pague com Cartão de Crédido" />
        </div>
    </li>
{% else %}
    <div class="accordion-group rede">
        <label for="{% if modo == 'modal' %}modal-{% endif %}radio-rede" class="accordion-heading{% if modo == 'modal' %} forma-pagamento-modal{% endif %}" data-toggle="collapse" data-target="#{% if modo == 'modal' %}modal-{% endif %}escolha-rede" 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-rede" {% if forma_pagamento == pagamento.id|stringformat:"s" %}checked="checked"{% endif %} value="11">
            </span>
            <span class="forma-conteiner text-right">
                <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>
                    {% if pagamento.aplicacao == "H" %}
                    <li style="color: red; line-height: 21px">(em homologação)</li>
                    {% endif %}
                </ul>
            </span>
        </label>
        <div id="{% if modo == 'modal' %}modal-{% endif %}escolha-rede" class="collapse">
            <input type="hidden" value="{{ pagamento.aplicacao }}" name="aplicacao" />
            <input type="hidden" value="{% get_client_ip %}" name="ip_address" />
            <input type="hidden" value="{{ request.session.session_key }}" name="session_id" />
            <div class="accordion-inner">
                {% if pagamento.aplicacao == "H" %}
                <div style="color: red;">
                    Esta forma de pagamento está em homologação e os valores não serão debitados do cartão de crédito.
                </div>
                {% endif %}
                <div class="placeholder-card"></div>
                <div>
                  <div class="span7">
                    <div class="control-group">
                      <div class="controls">
                        <label class="control-label" for="cartao_numero">Número do Cartão</label>
                        <input type="text" id="cartao_numero" name="cartao_numero" class="span12" placeholder="•••• •••• •••• ••••" />
                        <span class="help-block erro">Este campo é obrigatório</span>
                      </div>
                    </div>
                  </div>
                  <div class="span5">
                    <div class="control-group">
                      <div class="controls">
                        <label class="control-label" for="cartao_data_expiracao">Data de Expiração</label>
                        <input type="text" id="cartao_data_expiracao" name="cartao_data_expiracao" placeholder="mm/aa" class="span12" />
                        <span class="help-block erro">Este campo é obrigatório</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label" for="cartao_nome">Nome do Titular <small style="margin-left: 5px;">(Como escrito no cartão)</small></label>
                        <input type="text" id="cartao_nome" name="cartao_nome" class="span12" placeholder="" />
                        <span class="help-block erro">Este campo é obrigatório</span>
                    </div>
                </div>
                <div>
                  <div class="span5">
                    <div class="control-group">
                      <div class="controls">
                        <label class="control-label" for="cartao_cvv">Cód. de Segurança</label>
                        <div class="input-append">
                          <input type="text" id="cartao_cvv" name="cartao_cvv" placeholder="CCV" class="span7" />
                          <span class="add-on" data-toggle="tooltip" data-placement="right" title="Últimos 3 digitos no verso do cartão"><i class="icon-question-sign"></i></span>
                        </div>
                        <span class="help-block erro">Este campo é obrigatório</span>
                      </div>
                    </div>
                  </div>
                  <div class="span7">
                    <div class="control-group">
                      <div class="controls">
                        <label class="control-label" for="cartao_parcelas">Parcelas</label>
                        <select name="cartao_parcelas" id="cartao_parcelas" class="span12"></select>
                        <input type="hidden" value="false" name="cartao_parcelas_sem_juros" id="cartao_parcelas_sem_juros" />
                        <input type="hidden" value="{{ carrinho_subtotal|formatar_decimal_br }}" name="cartao_valor_parcela" id="cartao_valor_parcela" />
                        <span class="help-block erro">Este campo é obrigatório</span>
                      </div>
                    </div>
                  </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>
                    <script type="text/javascript">
                        var pagamento = {% autoescape off %}{{ pagamento|to_json }}{% endautoescape %};
                        Parcela.init(pagamento, ".preco-carrinho-total", "#cartao_parcelas");
                        Parcela.preencheParcelas();
                    </script>
                </div>
            </div>
        </div>
    </div>
{% endif %}