<div class="padding">
    <div class="alert alert-danger text-center margin-top" ng-if="!$parent.ctrl.hasEmployeeHrManager" localize="need_hr_manager"></div>

    <h3 localize="working_hours" class="text-center"></h3>

    <rzslider rz-slider-model="slider.minValue" style="margin-top: 30px;"
              rz-slider-high="slider.maxValue"
              rz-slider-options="slider.options"></rzslider>

    <p class="text-center margin-top" localize="day_length" localize-data-length="{{ ctrl.totalHours}}"></p>

    <hr>

    <h3 class="text-center" localize="exhaustion"></h3>

    <div class="flex-super-center">
        <table class="medium" style="width: 50%;">
            <tr>
                <td localize="exhaustion"></td>
                <td>{{ ctrl.exhaustion.base | number: 1 }}%</td>
            </tr>
            <tr>
                <td localize="office_bonus"></td>
                <td>{{ ctrl.exhaustion.werBonus }}%</td>
            </tr>
            <tr class="text-large">
                <td localize="mood_decrease_per_day"></td>
                <td><strong ng-class="{
                'color-red': ctrl.exhaustion.total > 10 }">-{{ ctrl.exhaustion.total | number: 1 }}%</strong></td>
            </tr>
        </table>


    </div>

    <p class="dimmed text-center" style="margin-top: 40px;" localize="schedule_tip"></p>
</div>