<div class="dialog" style="width: 600px; height: 600px; text-align: center">
    <h1>
        <span localize="new_tier_congrats"></span><i class="fa fa-times pull-right close-button" close-all-ui></i>
    </h1>
    <div class="padding">
        <p localize="new_tier_summary" localize-data-tier="companyTier"></p>

        <hr>

        <div style="height: 375px; overflow: auto; margin-bottom: 20px;">
            <div class="margin-top" ng-if="ctrl.unlockedComponents.length > 0">
                <h4 localize="new_components_unlocked"></h4>
                <div class="componentGrid small" style="justify-content: center;">
                    <component ng-repeat="component in ctrl.unlockedComponents" class="small"
                               component="component"></component>
                </div>
            </div>

            <div class="margin-top" ng-if="ctrl.unlockedEmployeeTypes.length > 0">
                <h4 localize="new_employee_types_unlocked"></h4>
                <div class="item-list">
                    <div ng-repeat="employeeType in ctrl.unlockedEmployeeTypes"
                         class="item text-center">
                        <h3 class="{{ employeeType.name }}">
                            <icon class="{{employeeType.name }}"></icon>
                            <span localize="{{ employeeType.name }}"></span>
                        </h3>
                        <p class="small" localize="{{ employeeType.description }}"></p>
                    </div>
                </div>
            </div>

            <div class="margin-top" ng-if="ctrl.unlockedBenefits.length > 0">
                <h4 localize="new_benefits_unlocked"></h4>
                <div class="item-list">
                    <div ng-repeat="benefit in ctrl.unlockedBenefits"
                         class="item text-center">
                        <h3 localize="{{ benefit.name }}"></h3>
                        <p class="small" localize="{{ benefit.description }}"></p>
                    </div>
                </div>
            </div>

            <div class="margin-top" ng-if="ctrl.unlockedItems.length > 0">
                <h4 localize="new_items_unlocked"></h4>
                <div class="box-list flex-row flex-wrap padding">
                    <div class="box text-center column-center flex-row-center"
                         ng-repeat="item in ctrl.unlockedItems"
                         uib-popover-html="Helpers.GetItemPopover(item)"
                         style="width: 154px;"
                         popover-trigger="mouseenter"
                         popover-append-to-body="true"
                         popover-title="{{ item.friendlyName }}">
                        <img ng-src="3dmodels/office_upgrades/{{item.name}}-3.png"/>
                    </div>
                </div>
            </div>
        </div>


        <button type="button" class="cancel" close-all-ui localize="close"></button>
    </div>
</div>
