@extends('layouts.master-worker')

@section('title')
  Travel | @parent
@stop

@section('styles')

  {{ HTML::style('css/shared/jquery.circliful.css') }}
  {{ HTML::style('css/worker/travel.css') }}
@stop

@section('content')
	<div class="content-top-photo">
		<img src="/img/worker/travel.png">
	</div>
	<div class="container content-area-white">
		<div class="alert alert-warning" role="alert"><b>Notice:</b> Itinerary subject to change to meet operational requirements. Check emails prior to travel to ensure you are referring to the most current version.</div>
		<div id="travel-list">
			<div class="travel-row travel-header">
				<div class="col-md-3 col-sm-3 col-xs-6">Date</div>
				<div class="col-md-2 col-sm-2 col-xs-6">Journey</div>
				<div class="col-md-2 col-sm-2 col-xs-6">Departing</div>
				<div class="col-md-2 col-sm-2 col-xs-6">Arriving</div>
				<div class="col-md-3 col-sm-3 col-xs-6">Status</div>
			</div>
			<div id="travel-wrapper">
				<h3>Loading...</h3>
			</div>
		</div>
	</div>
@stop

@section('scripts')
	{{ HTML::script('js/shared/mustache-2.0.js') }}
	{{ HTML::script('js/worker/travel.js') }}

	<script id="workerTravelTemplate" type="x-tmpl-mustache">
		<div class="alert alert-warning" role="alert"><b>Notice:</b> Itinerary subject to change to meet operational requirements. Check emails prior to travel to ensure you are referring to the most current version.</div>
		<div id="travel-list">
			<div class="travel-row travel-header">
				<div class="col-md-3 col-sm-3 col-xs-6">Date</div>
				<div class="col-md-2 col-sm-2 col-xs-6">Journey</div>
				<div class="col-md-2 col-sm-2 col-xs-6">Departing</div>
				<div class="col-md-2 col-sm-2 col-xs-6">Arriving</div>
				<div class="col-md-3 col-sm-3 col-xs-6">Status</div>
			</div>
			<div class="travel-row highlight">
				<div class="col-md-3 col-sm-3 col-xs-6 travel-list-date">
					Thursday 31/07/2014
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					<i class="fa fa-plane"></i>&nbsp;&nbsp;&nbsp;QQ2136
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					BNE 12:00
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					WLE 14:00
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6">
					Confirmed <small>(ZEL 1372265)</small>
				</div>
			</div>
			<div class="travel-row">
				<div class="col-md-3 col-sm-3 col-xs-6 travel-list-date">
					Friday 01/08/2014
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					<i class="fa fa-bus"></i>&nbsp;&nbsp;&nbsp;QQ2136
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					BNE 12:00
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					WLE 14:00
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6">
					Confirmed <small>(ZEL 1372265)</small>
				</div>
			</div>
			<div class="travel-row">
				<div class="col-md-3 col-sm-3 col-xs-6 travel-list-date">
					Saturday 02/08/2014
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					<i class="fa fa-plane"></i>&nbsp;&nbsp;&nbsp;Drive Out
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					DRV 05:00
				</div>
				<div class="col-md-2 col-sm-2 col-xs-6">
					DRV 07:00
				</div>
				<div class="col-md-3 col-sm-3 col-xs-6">
					Confirmed <small>(ZEL 1372265)</small>
				</div>
			</div>
		</div>
	</script>
@stop