<h1>
    <span><i class="fa fa-th"></i> <span localize="inventory"></span></span>
    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<div class="item-list horizontal" ng-if="ctrl.stacks.length != 0">
    <div class="item" style="height: 510px; width: 47%; overflow: auto;" ng-repeat="type in ['Component', 'Module']">
        <h3 localize="{{type}}s"></h3>
        <table class="medium">
            <tr ng-repeat="stack in ctrl.stacks | orderBy: '-amount' track by stack.component.name"
                ng-if="stack.component.type == type">
                <td>
                    <component class="small" component="::stack.component"></component>
                </td>
                <td localize="{{ stack.component.name }}"></td>
                <td class="text-bold">{{ stack.amount }}</td>
            </tr>
        </table>
    </div>
</div>

<p ng-if="ctrl.stacks.length == 0" class="padding text-center color-red" localize="inventory_empty"></p>
