<table class="medium" id="recruitment-table" ng-if="settings.activeRecruitment == null">
    <tr>
        <td style="width: 200px;" class="text-bold" localize="employee_type"></td>
        <td style="width: 260px">
            <div dropdown-select="recruitmentCtrl.employeeTypes"
                 dropdown-model="recruitmentCtrl.recruitment.employeeType"
                 dropdown-item-label="title" class="long">
            </div>
        </td>
        <td class="small dimmed" style="width: 330px; height: 100px;">
            <span ng-bind-html="recruitmentCtrl.recruitment.employeeType.description"></span>
            <div
                    class="color-red"
                    localize="unlocked_at_tier"
                    localize-data-tier="recruitmentCtrl.recruitment.employeeType.tier"
                    ng-if="recruitmentCtrl.recruitment.employeeType.unlocked == false"></div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <hr class="big" style="margin: 0;">
        </td>
    </tr>
    <tr>
        <td class="text-bold" localize="level"></td>
        <td>
            <ul>
                <li style="display: block" ng-repeat="level in ['Beginner', 'Intermediate', 'Expert']">
                    <label uib-tooltip="{{ GetLocalized('unlocked_at_tier', { tier: recruitmentCtrl.tiersForEmployeeLevels[level] }) }}"
                           tooltip-enable="recruitmentCtrl.tiersForEmployeeLevels[level] > recruitmentCtrl.currentTier"
                           tooltip-append-to-body="true">
                        <input type="radio"
                               ng-disabled="recruitmentCtrl.tiersForEmployeeLevels[level] > recruitmentCtrl.currentTier"
                               value="{{ level }}" ng-model="recruitmentCtrl.recruitment.level"> <span
                            localize="{{ level | lowercase }}"></span></label>
                </li>
            </ul>
        </td>
        <td class="dimmed small" localize="recruitment_level_description" style="height: 100px;"></td>
    </tr>
    <tr>
        <td colspan="3">
            <hr class="big" style="margin: 0;">
        </td>
    </tr>
    <tr>
        <td class="text-bold" localize="duration"></td>
        <td>
            <ul>
                <li style="display: block">
                    <label><input type="radio"
                                  value="1440" ng-model="recruitmentCtrl.recruitment.totalMinutes"> <span
                            localize="x_days" localize-data-days="1"></span></label>
                </li>
                <li style="display: block">
                    <label><input type="radio"
                                  value="4320" ng-model="recruitmentCtrl.recruitment.totalMinutes"> <span
                            localize="x_days" localize-data-days="3"></span></label>
                </li>
                <li style="display: block">
                    <label><input type="radio"
                                  value="10080" ng-model="recruitmentCtrl.recruitment.totalMinutes"> <span
                            localize="x_days" localize-data-days="7"></span></label>
                </li>
            </ul>
        </td>
        <td class="dimmed small" localize="recruitment_duration_description" style="height: 100px;"></td>
    </tr>
    <tr>
        <td colspan="3">
            <hr class="big" style="margin: 0;">
        </td>
    </tr>
    <tr>
        <td class="text-bold" localize="price"></td>
        <td>{{ recruitmentCtrl.recruitment.price | currency }}</td>
        <td class="small dimmed" localize="recruitment_price_description"  style="height: 70px;"></td>
    </tr>
    <tr>
        <td colspan="3" class="text-center">
            <button class="blue" ng-click="recruitmentCtrl.startRecruiting()" localize="start_recruiting" ng-disabled="!recruitmentCtrl.recruitment.employeeType.unlocked"></button>
        </td>
    </tr>
</table>

<div ng-if="settings.activeRecruitment != null" class="padding" style="margin-top: 100px;">

    <div class="padding text-center" ng-if="settings.paused">
        <div class="inline alert alert-danger text-center animate-forever animated tada" style="display: inline-block;" localize="game_is_paused"></div>
    </div>

    <h3 class="text-center" localize="recruitment_progress_headline" localize-data-type="settings.activeRecruitment.employeeType.title"></h3>
    <div class="flex-super-center">
        <table style="width: 230px;">
            <tr>
                <td class="dimmed">
                    <span localize="time_left"></span>:
                </td>
                <td class="text-bold">
                    <span localize="x_hours" localize-data-hours="{{ recruitmentCtrl.hoursLeft }}"></span>
                     ({{recruitmentCtrl.recruitmentPercentage}}%)
                </td>
            </tr>
        </table>
    </div>
    <div class="padding text-center">
        <button class="big blue" localize="candidates" ng-click="ctrl.tab = 'candidates'"></button>
        <button class="small red" localize="cancel" ng-click="recruitmentCtrl.cancel()"></button>
    </div>
</div>