{% 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 background-dark-gray show-modal box-shadow-dark modal-info-installments absolute-position info-text">
      <span class="text-medium text-dark-opacity">
       Total minimo do pedido para habilitar esta parcela. Exp: Em uma parcela de 100,  o minimo do pedido com 2 parcelas deverá ser 200.
      </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 {
   display:none;
  white-space: nowrap;
    z-index: 999;
}

.modal-info-installments{
      margin: 0.75rem 0 0 4.5rem;
      padding: 0.5rem;
    border-radius: 10px;
}
.info-icon:hover + .info-text {
    display: block;
}
</style>