{{ include('partials/main.html.twig') }}
<head>
{{ include('partials/title-meta.html.twig', {title: 'Email Inbox'}) }}
{{ include('partials/head-css.html.twig') }}
</head>
{{ include('partials/body.html.twig') }}
<!-- Begin page -->
<div id="layout-wrapper">
{{ include('partials/menu.html.twig') }}
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
{{ include('partials/page-title.html.twig', {pagetitle: 'Email', title: 'Email Inbox'}) }}
<div class="row">
<div class="col-12">
<!-- Left sidebar -->
<div class="email-leftbar card">
<button type="button" class="btn btn-danger w-100 waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#composemodal">
Compose
</button>
<div class="mail-list mt-4">
<a href="#" class="active"><i class="mdi mdi-email-outline me-2"></i> Inbox <span class="ms-1 float-end">(18)</span></a>
<a href="#"><i class="mdi mdi-star-outline me-2"></i>Starred</a>
<a href="#"><i class="mdi mdi-diamond-stone me-2"></i>Important</a>
<a href="#"><i class="mdi mdi-file-outline me-2"></i>Draft</a>
<a href="#"><i class="mdi mdi-email-check-outline me-2"></i>Sent Mail</a>
<a href="#"><i class="mdi mdi-trash-can-outline me-2"></i>Trash</a>
</div>
<h6 class="mt-4">Labels</h6>
<div class="mail-list mt-1">
<a href="#"><span class="mdi mdi-arrow-right-drop-circle text-info float-end"></span>Theme Support</a>
<a href="#"><span class="mdi mdi-arrow-right-drop-circle text-warning float-end"></span>Freelance</a>
<a href="#"><span class="mdi mdi-arrow-right-drop-circle text-primary float-end"></span>Social</a>
<a href="#"><span class="mdi mdi-arrow-right-drop-circle text-danger float-end"></span>Friends</a>
<a href="#"><span class="mdi mdi-arrow-right-drop-circle text-success float-end"></span>Family</a>
</div>
<h6 class="mt-4">Chat</h6>
<div class="mt-2">
<a href="javascript: void(0);" class="d-flex align-items-start">
<img class="flex-shrink-0 me-3 rounded-circle" src="/images/users/avatar-2.jpg" alt="Generic placeholder image" height="36">
<div class="flex-grow-1 chat-user-box">
<p class="user-title m-0">Scott Median</p>
<p class="text-muted">Hello</p>
</div>
</a>
<a href="javascript: void(0);" class="d-flex align-items-start">
<img class="flex-shrink-0 me-3 rounded-circle" src="/images/users/avatar-3.jpg" alt="Generic placeholder image" height="36">
<div class="flex-grow-1 chat-user-box">
<p class="user-title m-0">Julian Rosa</p>
<p class="text-muted">What about our next..</p>
</div>
</a>
<a href="javascript: void(0);" class="d-flex align-items-start">
<img class="flex-shrink-0 me-3 rounded-circle" src="/images/users/avatar-4.jpg" alt="Generic placeholder image" height="36">
<div class="flex-grow-1 chat-user-box">
<p class="user-title m-0">David Medina</p>
<p class="text-muted">Yeah everything is fine</p>
</div>
</a>
<a href="javascript: void(0);" class="d-flex align-items-start">
<img class="flex-shrink-0 me-3 rounded-circle" src="/images/users/avatar-6.jpg" alt="Generic placeholder image" height="36">
<div class="flex-grow-1 chat-user-box">
<p class="user-title m-0">Jay Baker</p>
<p class="text-muted">Wow that's great</p>
</div>
</a>
</div>
</div>
<!-- End Left sidebar -->
<!-- Right Sidebar -->
<div class="email-rightbar mb-3">
<div class="card">
<div class="btn-toolbar gap-2 p-3" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary waves-light waves-effect"><i class="fa fa-inbox"></i></button>
<button type="button" class="btn btn-primary waves-light waves-effect"><i class="fa fa-exclamation-circle"></i></button>
<button type="button" class="btn btn-primary waves-light waves-effect"><i class="far fa-trash-alt"></i></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-folder"></i> <i class="mdi mdi-chevron-down ms-1"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Updates</a>
<a class="dropdown-item" href="#">Social</a>
<a class="dropdown-item" href="#">Team Manage</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-tag"></i> <i class="mdi mdi-chevron-down ms-1"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Updates</a>
<a class="dropdown-item" href="#">Social</a>
<a class="dropdown-item" href="#">Team Manage</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
More <i class="mdi mdi-dots-vertical ms-2"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Mark as Unread</a>
<a class="dropdown-item" href="#">Mark as Important</a>
<a class="dropdown-item" href="#">Add to Tasks</a>
<a class="dropdown-item" href="#">Add Star</a>
<a class="dropdown-item" href="#">Mute</a>
</div>
</div>
</div>
<ul class="message-list">
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk19">
<label for="chk19" class="toggle"></label>
</div>
<a href="#" class="title">Peter, me (3)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Hello – <span class="teaser">Trip home from Colombo has been arranged, then Jenna will come get me from Stockholm. :)</span>
</a>
<div class="date">Mar 6</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk20">
<label for="chk20" class="toggle"></label>
</div>
<a href="#" class="title">me, Susanna (7)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject"><span class="bg-warning badge me-2">Freelance</span>Since you asked... and i'm
inconceivably bored at the train station –
<span class="teaser">Alright thanks. I'll have to re-book that somehow, i'll get back to you.</span>
</a>
<div class="date">Mar. 6</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk6">
<label for="chk6" class="toggle"></label>
</div>
<a href="#" class="title">Web Support Dennis</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Re: New mail settings –
<span class="teaser">Will you answer him asap?</span>
</a>
<div class="date">Mar 7</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk7">
<label for="chk7" class="toggle"></label>
</div>
<a href="#" class="title">me, Peter (2)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject"><span class="bg-info badge me-2">Support</span>Off on Thursday -
<span class="teaser">Eff that place, you might as well stay here with us instead! Sent from my iPhone 4 4 mar 2014 at 5:55 pm</span>
</a>
<div class="date">Mar 4</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk8">
<label for="chk8" class="toggle"></label>
</div>
<a href="#" class="title">Medium</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject"><span class="bg-primary badge me-2">Social</span>This Week's Top Stories –
<span class="teaser">Our top pick for you on Medium this week The Man Who Destroyed America’s Ego</span>
</a>
<div class="date">Feb 28</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk9">
<label for="chk9" class="toggle"></label>
</div>
<a href="#" class="title">Death to Stock</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Montly High-Res Photos –
<span class="teaser">To create this month's pack, we hosted a party with local musician Jared Mahone here in Columbus, Ohio.</span>
</a>
<div class="date">Feb 28</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk3">
<label for="chk3" class="toggle"></label>
</div>
<a href="#" class="title">Randy, me (5)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject"><span class="bg-success badge me-2">Family</span>Last pic over my village –
<span class="teaser">Yeah i'd like that! Do you remember the video you showed me of your train ride between Colombo and Kandy? The one with the mountain view? I would love to see that one again!</span>
</a>
<div class="date">5:01 am</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk4">
<label for="chk4" class="toggle"></label>
</div>
<a href="#" class="title">Andrew Zimmer</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Mochila Beta: Subscription Confirmed
– <span class="teaser">You've been confirmed! Welcome to the ruling class of the inbox. For your records, here is a copy of the information you submitted to us...</span>
</a>
<div class="date">Mar 8</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk5">
<label for="chk5" class="toggle"></label>
</div>
<a href="#" class="title">Infinity HR</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Sveriges Hetaste sommarjobb –
<span class="teaser">Hej Nicklas Sandell! Vi vill bjuda in dig till "First tour 2014", ett rekryteringsevent som erbjuder jobb på 16 semesterorter iSverige.</span>
</a>
<div class="date">Mar 8</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk10">
<label for="chk10" class="toggle"></label>
</div>
<a href="#" class="title">Revibe</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject"><span class="bg-danger badge me-2">Friends</span>Weekend on Revibe –
<span class="teaser">Today's Friday and we thought maybe you want some music inspiration for the weekend. Here are some trending tracks and playlists we think you should give a listen!</span>
</a>
<div class="date">Feb 27</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk11">
<label for="chk11" class="toggle"></label>
</div>
<a href="#" class="title">Erik, me (5)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Regarding our meeting –
<span class="teaser">That's great, see you on Thursday!</span>
</a>
<div class="date">Feb 24</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk12">
<label for="chk12" class="toggle"></label>
</div>
<a href="#" class="title">KanbanFlow</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject"><span class="bg-primary badge me-2">Social</span>Task assigned: Clone ARP's website
– <span class="teaser">You have been assigned a task by Alex@Work on the board Web.</span>
</a>
<div class="date">Feb 24</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk13">
<label for="chk13" class="toggle"></label>
</div>
<a href="#" class="title">Tobias Berggren</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Let's go fishing! –
<span class="teaser">Hey, You wanna join me and Fred at the lake tomorrow? It'll be awesome.</span>
</a>
<div class="date">Feb 23</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk14">
<label for="chk14" class="toggle"></label>
</div>
<a href="#" class="title">Charukaw, me (7)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Hey man – <span class="teaser">Nah man sorry i don't. Should i get it?</span>
</a>
<div class="date">Feb 23</div>
</div>
</li>
<li class="unread">
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk15">
<label for="chk15" class="toggle"></label>
</div>
<a href="#" class="title">me, Peter (5)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject"><span class="bg-info badge me-2">Support</span>Home again! – <span class="teaser">That's just perfect! See you tomorrow.</span>
</a>
<div class="date">Feb 21</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk16">
<label for="chk16" class="toggle"></label>
</div>
<a href="#" class="title">Stack Exchange</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">1 new items in your Stackexchange inbox
– <span class="teaser">The following items were added to your Stack Exchange global inbox since you last checked it.</span>
</a>
<div class="date">Feb 21</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk17">
<label for="chk17" class="toggle"></label>
</div>
<a href="#" class="title">Google Drive Team</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">You can now use your storage in Google
Drive – <span class="teaser">Hey Nicklas Sandell! Thank you for purchasing extra storage space in Google Drive.</span>
</a>
<div class="date">Feb 20</div>
</div>
</li>
<li>
<div class="col-mail col-mail-1">
<div class="checkbox-wrapper-mail">
<input type="checkbox" id="chk18">
<label for="chk18" class="toggle"></label>
</div>
<a href="#" class="title">me, Susanna (11)</a><span class="star-toggle far fa-star"></span>
</div>
<div class="col-mail col-mail-2">
<a href="#" class="subject">Train/Bus – <span class="teaser">Yes ok, great! I'm not stuck in Stockholm anymore, we're making progress.</span>
</a>
<div class="date">Feb 19</div>
</div>
</li>
</ul>
</div> <!-- card -->
<div class="row">
<div class="col-7">
Showing 1 - 20 of 1,524
</div>
<div class="col-5">
<div class="btn-group float-end">
<button type="button" class="btn btn-sm btn-success waves-effect"><i class="fa fa-chevron-left"></i></button>
<button type="button" class="btn btn-sm btn-success waves-effect"><i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div> <!-- end Col-9 -->
</div>
</div><!-- End row -->
</div> <!-- container-fluid -->
</div>
<!-- End Page-content -->
<!-- Modal -->
<div class="modal fade" id="composemodal" tabindex="-1" role="dialog" aria-labelledby="composemodalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-size-16" id="composemodalTitle">New Message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>
<div class="mb-3">
<input type="email" class="form-control" placeholder="To">
</div>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Subject">
</div>
<div class="mb-3 email-editor">
<div id="email-editor"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send <i class="fab fa-telegram-plane ms-1"></i></button>
</div>
</div>
</div>
</div>
<!-- end modal -->
{{ include('partials/footer.html.twig') }}
</div>
<!-- end main content-->
</div>
<!-- END layout-wrapper -->
{{ include('partials/right-sidebar.html.twig') }}
{{ include('partials/vendor-scripts.html.twig') }}
<!--ckeditor js-->
<script src="/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<!-- email editor init -->
<script src="/js/pages/email-editor.init.js"></script>
<script src="/js/app.js"></script>
</body>
</html>