<div style="height: 530px; overflow: auto;">
    <div class="item-list">
        <div class="padding">
            <!-- Progress Bar -->
            <div class="progressBar big">
                <div class="indicator" style="width: {{hostingCtrl.hostingPercentage}}%;"
                     ng-class="{
            'red': hostingCtrl.hostingPercentage > 75,
            'yellow': hostingCtrl.hostingPercentage <= 75 && hostingCtrl.hostingPercentage > 50
        }">
                    <span>{{hostingCtrl.hostingPercentage}}%</span>
                </div>
            </div>

            <div class="text-center margin-top">
            <span style="display: inline-block; margin-right: 10px;" localize="total_cu"
                  localize-data-amount="{{hostingCtrl.totalCu}}"></span>
                <span style="display: inline-block; margin-right: 10px;" localize="used_cu"
                      localize-data-amount="{{hostingCtrl.requiredCu}}"></span>
                <span localize="free_cu" localize-data-amount="{{hostingCtrl.totalCu - hostingCtrl.requiredCu}}"></span>
            </div>
        </div>

        <div class="item" ng-repeat="server in hostingCtrl.servers track by server.name">
            <div class="flex-row">
                <!-- Server Count -->
                <div class="server-count">{{ server.instances }}</div>

                <div style="flex: 6; padding-left: 15px;" class="flex-row">
                    <div class="flex5">
                        <h3 style="text-align: left;">
                            <span localize="{{server.name}}"></span><br>
                            <span class="dimmed">(+{{ server.computeUnit }} CU, <span localize="amount_per_day"
                                                                                      localize-data-amount="server.pricePerDay"
                                                                                      localize-data-amount-format="currency"></span>)</span>
                        </h3>
                        <div>
                            <component component="::stack.component"
                                       ng-disabled="!stack.isAvailableInInventory"
                                       stack-amount="::stack.amount"
                                       class="small"
                                       ng-repeat="stack in server.stacks track by stack.component.name"
                                       show-inventory-amount="true">
                            </component>
                        </div>
                    </div>
                    <div class="flex2">
                        <button ng-click="hostingCtrl.addInstance(server)" style="width: 100%;"
                                ng-disabled="!server.isAvailable" class="blue" localize="add_instance">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
