<h1>
    <i class="fa fa-shopping-basket"></i>
    <span localize="purchase_item"></span>
    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<div class="box-list flex-row flex-wrap padding" style="height: 500px;">
    <div ng-repeat="workstationType in ctrl.workstations"
         uib-popover-html="workstationType.popoverText"
         popover-trigger="mouseenter"
         popover-append-to-body="true"
         popover-title="{{ GetLocalized(workstationType.name) }}"
         popover-append-to-body="true"
         ng-class="{ 'tier-locked': companyTier < workstationType.tier }"
         class="box text-center"
         ng-click="companyTier >= workstationType.tier && ctrl.clickWorkstation(workstationType);" id="purchase-tutorial-step-2">
        <div class="badge">{{ ctrl.remainingWorkstations }}</div>
        <img ng-src="3dmodels/workstation/tier{{ workstationType.id}}.png" />
    </div>
    <div class="box text-center column-center flex-row-center"
         ng-repeat="item in ctrl.items | orderBy:'tier' track by item.name"
         ng-class="{ 'tier-locked': item.tier > companyTier }"
         ng-click="ctrl.previewItem(item)"
         uib-popover-html="item.popoverText"
         popover-trigger="mouseenter"
         popover-append-to-body="true"
         popover-title="{{ GetLocalized(item.name) }}">
        <img ng-src="{{ item.url }}" />
    </div>
</div>

<p class="text-center dimmed" style="margin-top: 5px;" localize="tip_multi_place"></p>
