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

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

{% block styles %}
{{ "plugins/form-tokenfield/bootstrap-tokenfield.css" | asset_url | stylesheet_tag }}       <!-- Tokenfield -->
{{ "plugins/summernote/dist/summernote.css" | asset_url | stylesheet_tag }} 				<!-- Summernote -->
{% endblock %}

{% block scripts %}
{{ "plugins/form-tokenfield/bootstrap-tokenfield.min.js" | asset_url | script_tag }}     	<!-- Tokenfield -->
{{ "plugins/summernote/dist/summernote.js" | asset_url | script_tag }}  					<!-- Summernote -->

{{ "demo/demo-app-inbox-compose.js" | asset_url | script_tag }}
{% endblock %}

{% block content %} 
	<div class="row">
		<div class="col-md-3">
			{% include app-inbox-leftbar %}
		</div>
		<div class="col-md-9">
			<div class="panel panel-inbox">
				<div class="panel-body">
					<div class="inbox-mail-heading">
						<div class="clearfix">
							<div class="pull-left">
								<a href="app-inbox" class="btn btn-default"><i class="fa fa-fw fa-level-up fa-rotate-270"></i></a>
						        <div class="btn-group">
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-save"></i></a>
		                            <a href="#" class="btn btn-default"><i class="fa fa-fw fa-trash-o"></i></a>
		                        </div>
						    </div>
						    <div class="pull-right">
						    	<a href="#" class="btn btn-success"><i class="fa fa-paper-plane mr5"></i><span class="hidden-xs">Send</span></a>
						    </div>
						</div>
					</div>
					<form action="" role="form" id="inbox-compose-form" class="form-horizontal p-lg">
						<div class="form-group mb">
							<div class="col-md-12">
								<div class="input-icon right">
									<a href="#" class="icon show-next-formgroup">CC</a>
									<input type="text" class="form-control tokenfield-email" value="" placeholder="To">
								</div>
							</div>
						</div>
						<div class="form-group mb" style="display: none;">
							<div class="col-md-12">
								<div class="input-icon right">
									<a href="#" class="icon show-next-formgroup">BCC</a>
									<input type="text" class="form-control tokenfield-email" value="">
								</div>
							</div>
						</div>
						<div class="form-group mb" style="display:none;">
							<div class="col-md-12"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group mb">
							<div class="col-md-12"><input type="text" class="form-control" placeholder="Subject for email"></div>
						</div>
						<div class="form-group mb-n">
							<div class="col-xs-12">
								<div class="composer">
					                <h3>Default Editor</h3>
					                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, nobis laboriosam repellat ipsum deserunt voluptate eos praesentium atque eligendi libero. Nam, id, eligendi natus facilis ullam pariatur numquam amet illum repudiandae ex porro labore in perferendis vero nobis iure ratione? Repudiandae, vel, quo, dolores velit vero debitis sed non odio culpa quasi excepturi tempore saepe atque quod repellendus aliquam eum neque dolorem beatae veniam quis id deserunt dignissimos voluptatum incidunt necessitatibus inventore reprehenderit consequatur esse perferendis ipsum earum pariatur et eaque sequi a harum sit similique itaque dicta expedita unde. Animi, quo, facilis laudantium quas commodi aut harum reprehenderit explicabo.</p>
				                </div>
							</div>
						</div>
					</form>
					<div class="inbox-mail-footer">
						<div class="clearfix">
						    <div class="pull-right">
						    	<a href="#" class="btn btn-success"><i class="fa fa-paper-plane mr5"></i><span class="hidden-xs">Send</span></a>
						    </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}