{% load template_math %}
<div class="row no-gutters">
    <div class="col-8 small font-weight-bold text-nowrap">Formula Item (Drag)</div>
    <div class="col-2 small font-weight-bold pl-3">Tgt %</div>
    <div class="col-2 small font-weight-bold">Allocated</div>
</div>

{% for frmitem in frmitems %}
<div class="row no-gutters">
    <div id="id_{{ frmitem.id }}_item" class="col-7 small frmitem" data-id="{{ frmitem.item.id }}">
        {{ frmitem.item.name }}
    </div>
    <div id="id_{{ frmitem.id }}_pct" class="col-3 text-right small frmitem_pct" data-pct="{{ frmitem.pct|floatformat:'4' }}">
        {{ frmitem.pct|floatformat:'4' }}
    </div>
    <div id="id_{{ frmitem.id }}_pctalc" class="col-2 text-right small frmitem_pctalc">
    </div>
</div>
{% endfor %}

<div class="row no-gutters">
    <div class="col-7 small text-nowrap font-weight-bold">Total Formulation</div>
    <div class="col-3 text-right small" id="id_frmitems_pct_total">{{ total_pct|floatformat:'4' }}</div>
    <div class="col-2 text-right small" id="id_frmitems_pctalc_total"></div>
</div>

<script>
    $(".frmitem").draggable({
      containment: '#id-fdrlog-form',
      cursor: 'move',
      helper: 'clone',
      revert: true
    });
</script>