@extends('helper.include.view.modal', ['id' => 'modal-enderecamento', 'class_size' => 'modal-big'])

@section('modal-start')

@overwrite

@section('modal-header-left')

<h4 class="modal-title">
    <span>22550 - Controle de Placas do CD - Endereçamentos</span>
</h4>

@overwrite

@section('modal-header-right')

    <button type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.Placas.fecharModal2()" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 230px); display: inline-flex;">

    <div class="grupo" style="width: 150px; display: inline-block;" ng-repeat="grupos in vm.Placas.ENDERECAMENTOS | orderBy : ['GRUPO']">
        <div style="height: 70px;
                    border: 1px solid #c8c8c8;
                    border-radius: 7px;
                    padding: 3px;
                    margin: 5px;
                    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
                    cursor: pointer;"
            class="subgrupo"
            ng-repeat="grupo in grupos.COLLECTION | orderBy : ['SUBGRUPO']">
            <div style="font-size: 20px;" ttitle="Saldo:@{{grupo.SALDO | number:2}}<br>Capacidade:@{{grupo.CAPACIDADE | number:2}}<br>Usado:@{{grupo.USADO | number:2}}">@{{grupo.GRUPO}}-@{{grupo.SUBGRUPO}}</div>
            <div class="progress" style="height: 25px; margin-top: 6px; border: 1px solid #bebdbd;">
                <div class="progress-bar" role="progressbar" aria-valuenow="@{{grupo.PERCENTUAL2}}" aria-valuemin="0" aria-valuemax="100" style="width: @{{grupo.PERCENTUAL2}}%; font-size: 20px; font-weight: bold; padding: 2px;">
                    @{{grupo.PERCENTUAL | number:2}}%
                </div>
            </div>
        </div>
    </div>

</div>

@overwrite