<h1>
    <i class="fa fa-pencil-square-o"></i>
    <input type="text" ng-model="settings.companyName">
    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<ul class="tab-list" style="width: 100%; display: inline-block;">
    <li ng-class="{ active: ctrl.tab == 'company' }" ng-click="ctrl.tab = 'company'" localize="company">Company</li>
    <li ng-class="{ active: ctrl.tab == 'benefits' }" ng-click="ctrl.tab = 'benefits'" localize="benefits">Benefits</li>
    <li ng-class="{ active: ctrl.tab == 'building' }" ng-click="ctrl.tab = 'building'" localize="building">Building</li>
</ul>

<div class="tab-content">
    <!-- Office -->
    <div ng-if="ctrl.tab == 'company'">
        <div class="padding" style="padding-bottom: 0">
            <div class="tierProgress flex-row" style="align-items: center">
                <div class="flex1"><h4><span localize="tier"></span> {{ companyTier }}</h4></div>
                <div style="flex: 8">
                    <div class="progressBar big">
                        <div class="indicator" style="width: {{ tierInfo.tierCompletion }}%">
                            <span class="text-center">{{ tierInfo.tierCompletion }}% ({{ tierInfo.currentXp | number: 0}}/{{ tierInfo.xpForNextTier | number: 0 }})</span>
                        </div>
                    </div>
                </div>
                <div class="flex1 text-right"><h4><span localize="tier"></span> {{ tierInfo.nextTier }}</h4></div>
            </div>

            <div class="text-center margin-top">
                <button class="cancel small" ng-click="ctrl.showUnlocks()" localize="show_unlocks"></button>
            </div>

            <hr class="big" style="margin: 10px 0;">
        </div>

        <div class="flex-row item-list" style="height: 360px;">
            <div class="flex1 item" style="margin-top: 0; margin-right: 0;" ng-if="!ctrl.showBenefits">
                <h4 class="text-center" localize="statistics"></h4>
                <table class="medium">
                    <tr>
                        <td localize="employees"></td>
                        <td class="text-right">{{ ctrl.employeeCount }}</td>
                    </tr>
                    <tr>
                        <td localize="workstations">Workstations</td>
                        <td class="text-right">{{ ctrl.workstationCount }}</td>
                    </tr>
                    <tr>
                        <td localize="contracts_completed"></td>
                        <td class="text-right">{{ ctrl.contractsCompleted }}</td>
                    </tr>
                </table>
            </div>
            <div class="flex1 item" style="margin-top: 0; padding-right: 15px; overflow-y: auto;"
                 ng-if="!ctrl.showBenefits">
                <h4 class="text-center" localize="work_environment_rating"></h4>
                <p class="small dimmed" localize="wer_description"></p>
                <table class="small">
                    <tr>
                        <td localize="office"></td>
                        <td class="text-right">{{ ctrl.wer.officeBonus }}%</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr>
                        </td>
                    </tr>
                    <tr ng-if="ctrl.activatedBenefits.length > 0"
                        ng-repeat="benefit in ctrl.activatedBenefits track by benefit.name">
                        <td localize="{{ benefit.name }}"></td>
                        <td class="text-right">{{ benefit.bonus }}%</td>
                    </tr>
                    <tr ng-if="ctrl.activatedBenefits.length == 0">
                        <td colspan="2" class="text-center" localize="no_active_benefits"></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <hr>
                        </td>
                    </tr>
                    <tr class="text-bold">
                        <td localize="total"></td>
                        <td class="text-right">{{ ctrl.wer.total }}%</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!-- Benefits -->
    <div ng-if="ctrl.tab == 'benefits'">
        <div class="flex1 item" style="margin-top: 0; height: 490px; overflow: auto;">
            <div class="padding">
                <table class="big">
                    <thead>
                    <tr>
                        <th style="width: 420px;" localize="name"></th>
                        <th localize="bonus"></th>
                        <th localize="per_month"></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tr ng-repeat="benefit in ctrl.benefits track by benefit.name">
                        <td>
                            <span localize="{{ benefit.name }}"></span>
                            <br>
                            <p class="small dimmed" localize="{{ benefit.description }}"></p>
                        </td>
                        <td>{{ benefit.bonus }}%</td>
                        <td>{{ benefit.price.monthly | currency }}</td>
                        <td class="text-right">
                            <div class="toggle-switch"
                                 uib-tooltip="{{GetLocalized('unlocked_at_tier', { tier: benefit.tier })}}"
                                 tooltip-enable="companyTier < benefit.tier"
                                 ng-class="{ active: benefit.active, 'tier-locked': companyTier < benefit.tier }"
                                 ng-click="ctrl.clickBenefit(benefit)">
                                <span></span>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!-- Building -->
    <div ng-if="ctrl.tab == 'building'">
        <div class="item-list flex-row padding">
            <div class="item flex1 text-center" ng-class="{ active: building.isActive }" style="margin: 5px;" ng-repeat="building in ctrl.buildings track by building.name">
                <h3 localize="{{ building.name }}"></h3>
                <img ng-src="{{ building.thumbnailPath }}" style="border-radius: 20px; height: 180px;">

                <div class="margin-top">
                    <div class="dimmed" localize="max_workstations"></div>
                    <div class="text-bold">{{ building.workstations }}</div>

                    <div class="dimmed" localize="payment_upfront"></div>
                    <div class="text-bold">{{ building.price | currency }}</div>

                    <div class="dimmed" localize="rent"></div>
                    <div class="text-bold" localize="amount_per_month" localize-data-amount="building.rent" localize-data-amount-format="currency"></div>
                </div>

                <button class="blue margin-top"
                        ng-disabled="building.isActive || !building.available"
                        ng-click="ctrl.rentBuilding(building)" localize="rent">
                    </button>
            </div>
        </div>
    </div>

</div>

