{% layout "layout" %}
{% block title %}Inbox{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li>Functional Apps</li>
<li class="active"><a href="app-inbox.html">Inbox</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
<script>
	$('table.table-inbox tbody tr').click(function () {
		window.location.href = 'app-inbox-read.html';
	});

	enquire.register("screen and (max-width: 992px)", {
		match : function() {
			//small
			$( ".table-inbox tr" ).each(function( index ) {
			  $(this).find("td.inbox-msg-snip").prepend($(this).find("td.inbox-msg-from div").addClass("inbox-from-name"));
			});
		},  
		unmatch : function() {
			//big
			$( ".table-inbox tr" ).each(function( index ) {
				$(this).find("td.inbox-msg-from").append($(this).find(".inbox-from-name"));
			});
		}
	});
</script>
{% endblock %}

{% block content %} 
	<div class="row">
		<div class="col-md-3">
			{% include app-inbox-leftbar %}
		</div>
		<div class="col-md-9">
            <div class="input-group mb-lg">
				<input type="text" class="form-control" placeholder="Search mail...">
				<span class="input-group-btn">
					<a class="btn btn-primary" href="#"><i class="fa fa-fw fa-search"></i></a>
				</span>
			</div>
			<div class="panel panel-inbox">
				<div class="panel-body">
					<div class="inbox-mail-heading">
						<div class="clearfix">
							<div class="pull-left">
								<div class="btn-group">
						            <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div><i class="caret"></i></a>
						            <ul class="dropdown-menu">
						                <li><a href="#">Select All</a></li>
						                <li><a href="#">Unselect All</a></li>
						                <li><a href="#">Another Action</a></li>
						                <li class="divider"></li>
						                <li><a href="#">Separated Link</a></li>
						            </ul>
						        </div>
						        <div class="btn-group">
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-archive"></i></a>
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-folder"></i></a>
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-trash-o"></i></a>
		                        </div>
						    </div>
						    <div class="pull-right hidden-xs">
						    	<span class="mr10 pull-left" style="margin-top: 9px;"><strong>1 - 20</strong> of <strong>141</strong></span>
						    	<div class="btn-group pull-right">
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-angle-left"></i></a>
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-angle-right"></i></a>
		                        </div>
						    </div>
						</div>
					</div>
					<table class="table table-striped table-hover table-inbox mb0 table-vam">
						<tbody>
							<tr class="unread">
								<td class="inbox-msg-check" width="5%"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm" width="20%"><div>Terrell Tilson</div></td>
								<td class="inbox-msg-snip"><span class="label label-primary" width="58%">Work</span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip" width="5%"></i> </td>
								<td class="inbox-msg-time" width="12%">13:42</td>
							</tr>
							<tr class="unread">
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Tyler Charlebois</div></td>
								<td class="inbox-msg-snip"><span class="label label-info" width="58%">Family</span>Accusantium doloremque laudantium totam rem aperiam</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">1:31</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Carrol Granados</div></td>
								<td class="inbox-msg-snip">Eaque ipsa quae ab illo inventore veritatis et quasi</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip"></i> </td>
								<td class="inbox-msg-time">9/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Sang Roles</div></td>
								<td class="inbox-msg-snip">Voluptas sit aspernatur aut odit aut fugit sed quia consequuntur</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip"></i> </td>
								<td class="inbox-msg-time">9/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Avery Hooper</div></td>
								<td class="inbox-msg-snip">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">8/03/14</td>
							</tr>
							<tr class="unread">
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Alex Murphy</div></td>
								<td class="inbox-msg-snip"><span class="label label-primary" width="58%">Work</span>Consectetur adipisci velit sed quia non numquam eius</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">8/03/14</td>
							</tr>
							<tr class="unread">
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Bernie Maldonado</div></td>
								<td class="inbox-msg-snip">Quis autem vel eum iure reprehenderit qui in ea voluptate</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip"></i> </td>
								<td class="inbox-msg-time">8/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Dominique Slay</div></td>
								<td class="inbox-msg-snip">Vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">7/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Jc Doney</div></td>
								<td class="inbox-msg-snip">Ullam corporis suscipit laboriosam nisi ut</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip"></i> </td>
								<td class="inbox-msg-time">7/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Brock Wulff</div></td>
								<td class="inbox-msg-snip"><span class="label label-danger" width="58%">Important</span>Numquam eius modi tempora incidunt ut labore</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">7/03/14</td>
							</tr>
							<tr class="unread">
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Mohamed Stamand</div></td>
								<td class="inbox-msg-snip">Lorem ipsum dolor sit amet consectetur adipisicing elit</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">6/03/14</td>
							</tr>
							<tr class="unread">
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Justin Selander</div></td>
								<td class="inbox-msg-snip">Nemo enim ipsam voluptatem quia voluptas sit</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">6/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Dwight Malmberg</div></td>
								<td class="inbox-msg-snip">At vero eos et accusamus et iusto odio dignissimos ducimus</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip"></i> </td>
								<td class="inbox-msg-time">6/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Ellis Elswick</div></td>
								<td class="inbox-msg-snip">Qui blanditiis praesentium voluptatum deleniti atque corrupti quos</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">5/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Mckinley Townes</div></td>
								<td class="inbox-msg-snip">Nam libero tempore cum soluta nobis est eligendi</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">4/03/14</td>
							</tr>
							<tr class="unread">
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Garry Quintana</div></td>
								<td class="inbox-msg-snip">Temporibus autem quibusdam et aut officiis debitis aut rerum</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip"></i> </td>
								<td class="inbox-msg-time">4/03/14</td>
							</tr>
							<tr class="unread">
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Hector Croke</div></td>
								<td class="inbox-msg-snip">Et harum quidem rerum facilis est et expedita distinctio</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">4/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Kent Beckmann</div></td>
								<td class="inbox-msg-snip">Similique sunt in culpa qui officia deserunt mollitia</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">3/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Wyatt Choice</div></td>
								<td class="inbox-msg-snip">Saepe eveniet ut et voluptates repudiandae sint et</td>
								<td class="inbox-msg-attach"></td>
								<td class="inbox-msg-time">3/03/14</td>
							</tr>
							<tr>
								<td class="inbox-msg-check"><div class="checkbox-inline icheck"><input type="checkbox" value=""></div> </td>
								<td class="inbox-msg-from hidden-xs hidden-sm"><div>Issac Campos</div></td>
								<td class="inbox-msg-snip">Consequatur aut perferendis doloribus asperiores repellat</td>
								<td class="inbox-msg-attach"><i class="fa fa-paperclip"></i> </td>
								<td class="inbox-msg-time">2/03/14</td>
							</tr>
						</tbody>
					</table>
					<div class="inbox-mail-footer">
						<div class="clearfix">
						    <div class="pull-right">
						    	<span class="mr10 pull-left" style="margin-top: 9px;"><strong>1 - 20</strong> of <strong>141</strong></span>
						    	<div class="btn-group pull-right">
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-angle-left"></i></a>
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-angle-right"></i></a>
		                        </div>
						    </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}