<div class="item-list" style="height: 530px;">
    <p class="text-center padding" localize="hint_feature_upgrades"></p>

    <div class="item"
         ng-repeat="result in upgradesCtrl.featureResults track by result.featureInfo.featureName+result.featureInfo.platformName">
        <h3 style="text-align: left;">
            <span localize="{{ ::result.featureInfo.platformName }}"></span>: <span localize="{{ ::result.featureInfo.featureName }}"></span>
            (<span localize="feature_stats_hype" localize-data-hype="result.feature.hype"></span>,
            <span ng-class="{ 'color-red': !result.cuAvailable }">{{ result.feature.requiredComputeUnit }} CU</span>)
        </h3>

        <div style="display: flex;">
            <div class="flex5">
                <component component="::stack.component"
                           ng-disabled="!stack.isAvailableInInventory"
                           stack-amount="stack.amount"
                           class="small"
                           ng-repeat="stack in result.stacks track by stack.component.name"
                           show-inventory-amount="true">
                </component>
            </div>
            <div class="flex1" style="display: flex; align-items: center;">
                <button ng-click="result.cuAvailable && upgradesCtrl.upgradeFeature(result)"
                        ng-disabled="!result.upgradeAvailable"
                        ng-class="{ disabled: !result.cuAvailable }"
                        uib-tooltip="{{ GetLocalized('not_enough_cu') }}"
                        tooltip-append-to-body="true"
                        tooltip-enable="!result.cuAvailable"
                        class="blue" localize="upgrade">
                </button>
            </div>
        </div>

        <div class="flex-super-center margin-top">
            <ul class="level-indicator">
                <li ng-repeat="level in result.levels track by level.level"
                    ng-class="{filled: level.enabled}"></li>
            </ul>
        </div>
    </div>
</div>
