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

    <div class="item" ng-repeat="result in marketingCtrl.marketingPackagesResults track by result.name">
        <div style="display: flex;">
            <div class="flex5">
                <h3 style="text-align: left;">
                    <span localize="{{ ::result.name }}"></span>
                    (
                    <span localize="feature_stats_hype" localize-data-hype="result.hype"></span>,
                    <span localize="x_hours" localize-data-hours="{{ result.hours }}"></span>)
                </h3>
                <component component="::stack.component"
                           ng-if="result.activePackage == null"
                           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 class="progressBar big blue" ng-if="result.activePackage != null">
                    <div class="indicator" style="width: {{result.activePackageProgress}}%">
                        <span>{{ result.activePackageProgress }}% (<span localize="hours_left"
                                                                         localize-data-hours="{{result.hoursLeft }}"></span>)
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex1" style="display: flex; align-items: center;" ng-if="result.activePackage == null">
                <button ng-click="result.available && marketingCtrl.startMarketingCampaign(result)"
                        ng-disabled="!result.available"
                        class="blue" localize="start_marketingpackage" localize-data-price="result.price"
                        localize-data-price-format="currency">
                </button>
            </div>
        </div>
    </div>
</div>
