<section id="quicklook-plugin" class="plugin">
    <div class="cpu-name">
        {{ vm.cpu_name }}
    </div>
    <div class="table">
        <div class="table-row" ng-if="!vm.arguments.percpu">
            <div class="table-cell text-left">CPU</div>
            <div class="table-cell">
                <div class="progress">
                    <div class="progress-bar progress-bar-{{ vm.getDecoration('cpu') }}" role="progressbar"
                         aria-valuenow="{{ vm.cpu }}" aria-valuemin="0" aria-valuemax="100"
                         style="width: {{ vm.cpu }}%;">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div class="table-cell">
                {{ vm.cpu }}%
            </div>
        </div>
        <div class="table-row" ng-if="vm.arguments.percpu" ng-repeat="percpu in vm.percpus track by percpu.number">
            <div class="table-cell text-left">CPU{{ percpu.number }}</div>
            <div class="table-cell">
                <div class="progress">
                    <div class="progress-bar progress-bar-{{ vm.getDecoration('cpu') }}" role="progressbar"
                         aria-valuenow="{{ percpu.total }}" aria-valuemin="0" aria-valuemax="100"
                         style="width: {{ percpu.total }}%;">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div class="table-cell">
                {{ percpu.total }}%
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell text-left">MEM</div>
            <div class="table-cell">
                <div class="progress">
                    <div class="progress-bar progress-bar-{{ vm.getDecoration('mem') }}" role="progressbar"
                         aria-valuenow="{{ vm.mem }}" aria-valuemin="0" aria-valuemax="100"
                         style="width: {{ vm.mem }}%;">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div class="table-cell">
                {{ vm.mem }}%
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell text-left">SWAP</div>
            <div class="table-cell">
                <div class="progress">
                    <div class="progress-bar progress-bar-{{ vm.getDecoration('swap') }}" role="progressbar"
                         aria-valuenow="{{ vm.swap }}" aria-valuemin="0" aria-valuemax="100"
                         style="width: {{ vm.swap }}%;">
                        &nbsp;
                    </div>
                </div>
            </div>
            <div class="table-cell">
                {{ vm.swap }}%
            </div>
        </div>
    </div>
</section>
