{% for pacela in parcelas %}
<div class="top-margin-medium parcela_config_{{pacela.num_parcela}}">
    <label class="field field-medium">
    <div class=" flex content-center">
      <span class="field-label">{{text_parcela}} {{pacela.num_parcela}}</span> 

  {% if loop.first %}
      <i class="fas fa-info-circle info-icon icon-info"></i>
      <div class="content-box  show-modal  modal-info-installments absolute-position info-text">
      <span class="text-medium">
       Defina o total mínimo do pedido para habilitar esta parcela. 
       Exemplo: Em uma parcela mínima de 100,00, para habilitar a parcela 2, o pedido deverá ter no mínimo um total de 200,00. Para a parcela 3 o pedido deverá ter um total de ao menos 300,00, e assim por diante.
      </span> 
</div>


  {% endif %}

     </div>
      <input type="text" class="field-entry hidden" name="{{modulo}}_parcelamento_configs[{{pacela.num_parcela}}][num_parcela]" value="{{pacela.num_parcela}}">
    </label>
    <div class="field-group-join top-margin-small">
      <label class="field field-medium">
        <span class="field-label">{{entry_valor_minimo}}</span>
        <input type="text" class="field-entry mask-money" name="{{modulo}}_parcelamento_configs[{{pacela.num_parcela}}][val_minimo]" mask="brazilCurrency" value="{{pacela.val_minimo}}" maxlength="22">
      </label>
      
      <label class="field field-medium">
        <span class="field-label">{{entry_tipo_calculo }}</span>
        <select class="field-entry" name="{{modulo}}_parcelamento_configs[{{pacela.num_parcela}}][tipo_calculo]" >
          {% for key, display in Type_CalculoParcelamento.getEnumList() %}
            <option value="{{ key }}" {{ ftr_geral.isSelected(key, pacela.tipo_calculo) }}>{{ display }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="field field-medium">
        <span class="field-label">{{entry_percentual_calculo}}</span>
        <input type="text" class="field-entry mask-money" mask="brazilCurrency" name="{{modulo}}_parcelamento_configs[{{pacela.num_parcela}}][percentual_calculo]" value="{{pacela.percentual_calculo}}" maxlength="22">
      </label> 
    </div> 
</div>
{% endfor %}

<style>
.info-icon {
   
    cursor: pointer;
}


.info-text {
    background: white;
    padding: 12px 14px;
    border-radius: 8px;
    display:none;
    border: 1px solid #ccc;
    max-width: 450px;
    text-align: left;
    color: #0D0D0D;
    z-index: 999;
  
}
.modal-info-installments{
      margin: 2rem 0 0 5rem;
}
.info-icon:hover + .info-text {
    display: block;
}
</style>


