<div class="panel-group panel-group-lists" data-values="ranges">
    <div class="row bottom-space">
        <div class="col-md-3">
            <a href="#" data-form-add class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'buttonAdd'|translate}</a>
        </div>
        <div class="col-md-9">
            <p>Při úpravě dbejte na správnou návaznost hranic OD-DO, přičemž DO a následné OD použijte stejnou hodnotu.
                Například při použití hladin od 10 Kč do 50 Kč a následně od 50 Kč do 100 Kč, bude při ceně produktu 50 Kč použita první, tedy nižší hladina.</p>
        </div>
    </div>

    <div class="panel">
        <div class="panel-heading">
            <div class="row">
                <div class="col-md-2 col-md-offset-1" style="padding-left: 0;">
                    <small><strong>{'range_from'|translate}</strong></small>
                </div>
                <div class="col-md-2 text-center">
                    <small><strong>{'range_to'|translate}</strong></small>
                </div>
                <div class="col-md-1 col-md-offset-1 text-center">
                    <small><strong>{'value'|translate}</strong></small>
                </div>
                <div class="col-md-2 col-md-offset-1 text-center">
                    <small><strong>{'unit'|translate}</strong></small>
                </div>
            </div>
        </div>
    </div>

    {foreach array_merge([[]], $body.ranges|default:[]) as $key => $row}
        <div class="panel {if $row.bad_down_range}row-red{else}row-green{/if}" {if $key == 0}data-form-new style="display:none"{else}data-form-item{/if}>
            <div class="row bottom-space">
                {*<div class="col-md-1">*}
                {*<span class="drag-drop-mover pull-right">*}
                {*<i class="bi bi-arrows-move handle"></i>*}
                {*</span>*}
                {*</div>*}
                <div class="col-md-2 col-md-offset-1" style="padding-left: 0;">
                    {if $row.bad_down_range}
                        <a class="help-tip" data-toggle="tooltip"
                           title="!! Zadaný rozsah koliduje s jiným !!"><i class="glyphicon glyphicon-warning-sign"></i></a>
                    {/if}
                    <input type="text" class="form-control input-sm" name="data[ranges][{$key}][range_from]" maxlength="10" value="{$row.range_from}" />
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control input-sm" name="data[ranges][{$key}][range_to]" maxlength="10" value="{$row.range_to}" />
                </div>
                <div class="col-md-2 col-md-offset-1">
                    <input type="text" class="form-control input-sm" name="data[ranges][{$key}][discount]" maxlength="10" value="{$row.discount}" />
                </div>

                <div class="col-md-2">
                    <select name="data[ranges][{$key}][unit]" class="selecter">
                        <option value="perc" {"perc"|selected:$row.unit}>%</option>
                        <option value="price" {"price"|selected:$row.unit}>{$dbcfg.currency}</option>
                    </select>
                </div>
                <div class="col-md-1 col-md-offset-1">
                    <div class="btn-group">
                        <a class="btn-sm btn btn-danger" title="{'buttonDeleteValue'|translate}" data-form-delete>
                            <input class="hidden" type="checkbox" name="data[ranges][{$key}][delete]" />
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {/foreach}
</div>

<script type="application/javascript">
    initForm({
        selector:'[data-values=ranges]'
    });
</script>
