{% extends 'hexabox/elements/layouts/admin.html' %}
        
{% block additional_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='hexabox/vendor/dropzone/dropzone.min.css')}}">
{% endblock %}
        
{% block content %}
			<div class="container-full">
				<div class="card border-0 mb-0">
					<div class="card-body p-0">
						<div class="row gx-0">

							<!-- Start - Email Sidebar -->
							<div class="col-xxl-2 col-xl-3 col-lg-4 email-left-body">
								<div class="email-left-column ic-scroll" id="email-left">
									<div class="mb-4">
										<a href="/email-compose" class="btn btn-lg btn-dark w-100"><i class="fa-solid fa-plus"></i> Compose Email</a>
									</div>
									<div class="mail-list-group">
										<a href="/email-inbox" class="list-group-item active">
											<i class="fa-regular fa-envelope"></i> Inbox
											<span class="badge badge-purple badge-sm float-end rounded">2</span>
										</a>
										<a href="javascript:void(0);" class="list-group-item">
											<i class="fa-regular fa-paper-plane"></i> Sent
										</a> 	
										<a href="javascript:void(0);" class="list-group-item">
											<i class="fa-regular fa-star"></i> Favorite
										</a>
										<a href="javascript:void(0);" class="list-group-item">
											<i class="fa-regular fa-file"></i> Draft
										</a>
										<a href="javascript:void(0);" class="list-group-item">
											<i class="fa-solid fa-tag"></i> Important
										</a>
										<a href="javascript:void(0);" class="list-group-item">
											<i class="fa-regular fa-clock"></i> Scheduled
										</a>
									</div>
									<div class="mail-list-group">
										<h5 class="mb-3 px-3">Categories</h5>
										<a href="/email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-primary"></i> Work </a>
										<a href="/email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-purple"></i> Private </a>
										<a href="/email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-success"></i> Support </a>
										<a href="/email-inbox" class="list-group-item opacity-75"> <i class="fa fa-circle text-primary text-danger"></i> Social </a>
									</div>
								</div>
							</div>
							<!-- End - Email Sidebar -->

							<!-- Start - Compose Email -->
							<div class="col-xxl-10 col-xl-9 col-lg-8">
								<div class="email-right-column">
									<div class="compose-wrapper" id="compose-content">
										<div class="align-items-center justify-content-between d-flex d-lg-none mb-3">
											<h4 class="mb-0">Email</h4>
											<a href="javascript:void(0);" class="mobile-email-panel btn btn-square btn-primary light btn-sm">
												<i class="fa-solid fa-list-ul"></i>
											</a>
										</div>
										<div class="compose-content">
											<form action="#">
												<div class="row">
													<div class="col-sm-12 mb-3">
														<input type="text" class="form-control" placeholder="To">
													</div>
													<div class="col-sm-12 mb-3">
														<input type="text" class="form-control" placeholder="Subject">
													</div>
													<div class="col-sm-12 mb-3">
														<textarea class="form-control" rows="7" placeholder="Type Message"></textarea>
													</div>
												</div>
											</form>
											<h5 class="mt-2 mb-3"><i class="fa fa-paperclip me-1"></i> Attatchment</h5>
											<form action="#" class="dropzone">
												<div class="fallback">																
													<input name="file" type="file" multiple>
												</div>
											</form>
										</div>
										<div class="mt-4">
											<button class="btn btn-danger light" type="button"><i class="fa fa-times"></i> Discard</button>
											<button class="btn btn-primary ms-2" type="button"><i class="fa fa-paper-plane"></i> Send</button>
										</div>
									</div>
								</div>
							</div>
							<!-- End - Compose Email -->

						</div>
					</div>
				</div>
            </div>
{% endblock %}
{% block additional_js %}
<script src="{{ url_for('static', filename='hexabox/vendor/dropzone/dropzone.min.js')}}"></script>
{% endblock %}