<div class="metio-new-task">
	<div class="alert alert-success" ng-if="task.id">
		<i class="fa fa-check-circle"></i> You have successfully booked in a new task <a href="{!! URL::to('tasks') !!}/{[{ task | taskUrl }]}">#{[{ task.id }]}</a>.
	</div>

	<div class="media">
		<a class="pull-left" href="#">
			<img src="{!! Auth::user()->profile_photo_url !!}" alt="profile photo" style="width: 80px; height: 80px;">
		</a>
		<div class="media-body">
			<h4 class="media-heading">Hi <strong>{!! trim(Auth::user()->first_name) !!}</strong></h4>
			<p>now you can book jobs straight from your dashboard: <span class="pull-right muted" uib-popover-html="learn.content" popover-title="{[{ ::learn.title }]}" popover-append-to-body="true"><i class="fa fa-info-circle"></i> Learn more</span></p>
			<textarea id="new-task" name="new-task" mentio msd-elastic="\n" ng-model="newTaskTextarea" mentio-id="'new-task'" class="form-control" placeholder="Start typing your job details. You can also use the following characters @,#,$,!,^. Click learn more to find out more details..."></textarea>

			<div class="row-fluid">
				<div class="span8">

					<div ng-show="newTaskTextarea && newTaskTextarea.length > 0">
						<span class="label label-info">{[{ tags.staff.name }]}</span>
						<span class="label label-success">{[{ tags.task.name }]}</span>
						<span class="label label-warning">{[{ tags.client.name }]}</span>
						<span class="label label-inverse">{[{ tags.date.name }]}</span>
						<span class="label label-important">{[{ tags.time }]}</span>
					</div>

				</div>
				<div class="span4">

					<span class="btn btn-primary pull-right" ng-show="newTaskTextarea && newTaskTextarea.length > 0" ng-click="save()">Create</span>

				</div>
			</div>
		</div>
	</div>

	<mentio-menu
		mentio-for="'new-task'"
		mentio-trigger-char="'@'"
		mentio-items="users"
		mentio-template-url="templates/mentio-users.html"
		mentio-search="searchUsers(term)"
		mentio-select="getUserRaw(item)"></mentio-menu>

	<mentio-menu
		mentio-for="'new-task'"
		mentio-trigger-char="'#'"
		mentio-items="customers"
		mentio-template-url="templates/mentio-customers.html"
		mentio-search="searchCustomers(term)"
		mentio-select="getCustomerRaw(item)"></mentio-menu>

	<mentio-menu
		mentio-for="'new-task'"
		mentio-trigger-char="'^'"
		mentio-items="taskTypes"
		mentio-template-url="templates/mentio-task-types.html"
		mentio-search="searchTaskTypes(term)"
		mentio-select="getTaskTypeRaw(item)"></mentio-menu>

	<mentio-menu
		mentio-for="'new-task'"
		mentio-trigger-char="'!'"
		mentio-items="times"
		mentio-template-url="templates/mentio-task-times.html"
		mentio-search="searchTaskTimes(term)"
		mentio-select="getTaskTimesRaw(item)"></mentio-menu>

	<mentio-menu
		mentio-for="'new-task'"
		mentio-trigger-char="'$'"
		mentio-items="dates"
		mentio-template-url="templates/mentio-task-dates.html"
		mentio-search="searchTaskDates(term)"
		mentio-select="getTaskDatesRaw(item)"></mentio-menu>


	<script type="text/ng-template" id="templates/mentio-users.html">
		<ul class="list-group user-search">
			<li mentio-menu-item="user" ng-repeat="user in items" class="list-group-item">
				<span class="">
					<img ng-src="{[{ user.profile_photo_url }]}" style="width: 30px;" alt="profile photo" title="{[{ user.name }]}"> &nbsp;&nbsp;
				</span>
				<span class="text-primary" ng-bind-html="user.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
			</li>
		</ul>
	</script>
	<script type="text/ng-template" id="templates/mentio-customers.html">
		<ul class="list-group user-search">
			<li mentio-menu-item="customer" ng-repeat="customer in items" class="list-group-item">
				<span class="text-primary" ng-bind-html="customer.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
				<span class="muted" ng-if="customer.type == 'client'">Business</span>
				<span class="label label-important" ng-if="customer.contract" ng-bind="customer.contract.name"></span>
			</li>
		</ul>
	</script>
	<script type="text/ng-template" id="templates/mentio-task-types.html">
		<ul class="list-group">
			<li mentio-menu-item="type" ng-repeat="type in items" class="list-group-item">
				<span class="text-primary" ng-bind-html="type.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
			</li>
		</ul>
	</script>
	<script type="text/ng-template" id="templates/mentio-task-times.html">
		<ul class="list-group">
			<li mentio-menu-item="time" ng-repeat="time in items" class="list-group-item">
				<span class="text-primary" ng-bind-html="time | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
			</li>
		</ul>
	</script>
	<script type="text/ng-template" id="templates/mentio-task-dates.html">
		<ul class="list-group">
			<li mentio-menu-item="date" ng-repeat="date in items" class="list-group-item">
				<span class="text-primary" ng-bind-html="date.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
			</li>
		</ul>
	</script>

</div>