<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">

	<!-- sidebar: style can be found in sidebar.less -->
	<section class="sidebar">

		<!-- Sidebar user panel (optional) -->
		@if (! Auth::guest())
			<div class="user-panel">
				<div class="pull-left image">
					<img src="{{ Gravatar::get($user->email) }}" class="img-circle" alt="User Image" />
				</div>
				<div class="pull-left info">
					<p>{{ Auth::user()->name }}</p>
					<!-- Status -->
					<a href="#"><i class="fa fa-circle text-success"></i> {{ trans('message.online') }}</a>
				</div>
			</div>
		@endif

		<!-- search form (Optional) -->
		<form action="#" method="get" class="sidebar-form">
			<div class="input-group">
				<input type="text" name="q" class="form-control" autocomplete="off" placeholder="{{ trans('message.search') }}..."/>
				<span class="input-group-btn">
					<button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
				</span>
			</div>
		</form>
		<!-- /.search form -->

		<!-- Sidebar Menu -->
		<ul class="sidebar-menu">
			<li class="header">Menu</li>
			<!-- Optionally, you can add icons to the links -->
			<li class="active"><a href="{{ url('home',['date'=>(isset($ido) ? $ido->id : NULL)]) }}"><i class='fa fa-link'></i> <span>{{ trans('message.home') }}</span></a></li>
		</ul><!-- /.sidebar-menu -->
	</section>
	<!-- /.sidebar -->
</aside>

@section('page-scripts')
	@js('/site/js/bootstrap3-typeahead.min.js')

	<script type="text/javascript">
		$(document).ready(function() {
			$("input[name=q]").typeahead({
				delay: 300,
				minLength: 2,
				fitToElement: false,
				appendTo: "#search_results",
				source: function (query,process) {
					search('{{ url("search",['date'=>isset($ido) ? $ido->id : NULL]) }}',query,process);
				},

				matcher: function () { return true; },

				updater: function (item) {
					window.parent.location.href = '{{ url("/") }}'+users[item];
				},
			});
		});

		var c=0;
		var search = _.debounce(function(url,query,process,icon){
			$.ajax({
				url : url,
				type : 'GET',
				data : 'term=' + query,
				dataType : 'JSON',
				async : false,
				cache : false,
				beforeSend : function() {
					if (c++ == 0) {
						if (icon)
							$('i[name='+icon+']').addClass("fa-spin");
						else
							$('i[name=searching]').removeClass("hidden");
					}
				},
				success : function(data) {
					// if json is null, means no match, won't do again.
					if(data==null || (data.length===0)) return;

					users = {};
					userLabels = [];
					_.each(data,function(item,ix,list) {
						if (_.includes(users,item.label))
							item.label = item.label + ' #' + item.value;

						userLabels.push(item.label);
						users[item.label] = item.value;
					});

					process(userLabels);
				},
				complete : function() {
					if (--c == 0) {
						if (icon)
							$('i[name='+icon+']').removeClass("fa-spin");
						else
							$('i[name=searching]').addClass("hidden");
					}
				}
			})
		}, 500);
	</script>
@append