@section('header')
	@include('common.header')
@stop

@section('js')
	@parent

	<!-- AngularJS Templates (Vue.js should ignore these) -->
	<div style="display: none;" v-pre>
		<script type="text/ng-template" id="hr/modals/request_change.html">
			@include('hr::templates.change_request_modal')
		</script>
		<script type="text/ng-template" id="hr/modals/new_record_request.html">
			@include('hr::templates.new_record_request')
		</script>
		<script type="text/ng-template" id="hr/modals/holiday_request.html">
			@include('hr::templates.holiday_request')
		</script>
		<script type="text/ng-template" id="hr/modals/generate_individual_timesheet.html">
			@include('hr::templates.generate_individual_timesheet')
		</script>
	</div>
@stop

@section('content')

	<div class="row task-beta" ng-init="user_details = {{ $user_details }}">
		<div class="col-sm-7" ng-controller="ClockingLogsCtrl" ng-cloak>
			@include('hr::templates.clocking-logs')
		</div>

		<!-- <div class="col-sm-5">
			<script type="module">
				import holidayRequests from '/v2/js/vue/embedded/HolidayRequests.js'
				</script>
			<div id="HolidayRequests2"></div>
			<script type="module">
				import Sickness from '/v2/js/vue/embedded/Sickness.js'
				</script>
			<div id="Sickness"></div>
		</div> -->
		<div class="col-sm-5">
			<div class="widget widget-classic" ng-controller="HolidayRequestsCtrl" ng-cloak>
				<div class="widget-content">

					<div class="headline">
						<h4><i class="fa fa-plane"></i> Holiday Requests</h4>
					</div>

					<!-- Moved to top: Request button and days left -->
					<div class="holiday-summary" style="margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 4px;">
						<div class="row">
							<div class="col-sm-8">
								<small><strong>You have <em>{[{ user_details.paid_holiday_days_left }]}</em> days of paid holiday left.</strong></small>
							</div>
							<div class="col-sm-4 text-right">
								<button class="btn btn-primary btn-sm" ng-click="requestHoliday()">Request a holiday</button>
							</div>
						</div>
					</div>

					<p ng-show="requests.length == 0"><small>You don't have any holiday requests. <a href="#" ng-click="requestHoliday()" data-eat-click>Request a holiday</a></small></p>

					<div ng-show="requests.length > 0">
						<table class="table table-condensed">
							<thead class="table-header">
								<th>Description</th>
								<th>From</th>
								<th>To</th>
								<th class="centered">Days</th>
								<th class="centered">Paid</th>
								<th>Status</th>
							</thead>
							<tbody>
								<tr ng-repeat="request in requests">
									<td>{[{ request.description }]}</td>
									<td>{[{ request.start_date | moment:"DD/MM/YYYY" }]}</td>
									<td>{[{ request.end_date | moment:"DD/MM/YYYY" }]}</td>
									<td class="centered">{[{ request.total_days }]}</td>
									<td class="centered"><i class="fa fa-check" ng-show="request.paid == '1'"></i></td>
									<td><span class="label" ng-class="getStatusClass(request)">{[{ request.status }]}</span></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

@stop