{% extends "pxy_dashboard/partials/base.html" %} 
{% load static %} 

{% block title %}Inbox{% endblock title %} 

{% block extra_css %} 

    
        <!-- Quill css -->
        <link href="{% static 'dashboard/vendor/quill/quill.core.css' %}" rel="stylesheet" type="text/css" />
        <link href="{% static 'dashboard/vendor/quill/quill.snow.css' %}" rel="stylesheet" type="text/css" />

{% endblock extra_css %} 


{% block pagetitle %}
{% include "pxy_dashboard/partials/page-title.html" with pagetitle="Email" title="Inbox" %}
{% endblock pagetitle %}

{% block content %} 

<div class="row">

    <!-- Right Sidebar -->
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- Left sidebar -->
                <div class="page-aside-left">
                    <div class="d-grid">
                        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#compose-modal">Compose</button>
                    </div>

                    <div class="email-menu-list mt-3">
                        <a href="javascript: void(0);" class="text-danger fw-bold"><i class="ri-inbox-line me-2"></i>Inbox<span class="badge badge-danger-lighten float-end ms-2">7</span></a>
                        <a href="javascript: void(0);"><i class="ri-star-line me-2"></i>Starred</a>
                        <a href="javascript: void(0);"><i class="ri-time-line me-2"></i>Snoozed</a>
                        <a href="javascript: void(0);"><i class="ri-article-line me-2"></i>Draft<span class="badge badge-info-lighten float-end ms-2">32</span></a>
                        <a href="javascript: void(0);"><i class="ri-mail-send-line me-2"></i>Sent Mail</a>
                        <a href="javascript: void(0);"><i class="ri-delete-bin-line me-2"></i>Trash</a>
                        <a href="javascript: void(0);"><i class="ri-price-tag-3-line me-2"></i>Important</a>
                        <a href="javascript: void(0);"><i class="ri-alert-line me-2"></i>Spam</a>
                    </div>

                    <div class="mt-4">
                        <h6 class="text-uppercase">Labels</h6>
                        <div class="email-menu-list labels-list mt-2">
                            <a href="javascript: void(0);"><i class="ri-checkbox-blank-circle-fill fs-13 text-info me-2"></i>Updates</a>
                            <a href="javascript: void(0);"><i class="ri-checkbox-blank-circle-fill fs-13 text-warning me-2"></i>Friends</a>
                            <a href="javascript: void(0);"><i class="ri-checkbox-blank-circle-fill fs-13 text-success me-2"></i>Family</a>
                            <a href="javascript: void(0);"><i class="ri-checkbox-blank-circle-fill fs-13 text-primary me-2"></i>Social</a>
                            <a href="javascript: void(0);"><i class="ri-checkbox-blank-circle-fill fs-13 text-danger me-2"></i>Important</a>
                            <a href="javascript: void(0);"><i class="ri-checkbox-blank-circle-fill fs-13 text-secondary me-2"></i>Promotions</a>
                        </div>
                    </div>

                    <div class="mt-5">
                        <h4><span class="badge rounded-pill p-1 px-2 badge-secondary-lighten">FREE</span></h4>
                        <h6 class="text-uppercase mt-3">Storage</h6>
                        <div class="progress my-2 progress-sm">
                            <div class="progress-bar progress-lg bg-success" role="progressbar" style="width: 46%" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <p class="text-muted fs-13 mb-0">7.02 GB (46%) of 15 GB used</p>
                    </div>

                </div>
                <!-- End Left sidebar -->

                <div class="page-aside-right">

                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary"><i class="ri-inbox-archive-line fs-16"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="ri-spam-2-line fs-16"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="ri-delete-bin-line fs-16"></i></button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle arrow-none" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-folder-2-line fs-16"></i>
                            <i class="ri-arrow-down-s-line"></i>
                        </button>
                        <div class="dropdown-menu">
                            <span class="dropdown-header">Move to:</span>
                            <a class="dropdown-item" href="javascript: void(0);">Social</a>
                            <a class="dropdown-item" href="javascript: void(0);">Promotions</a>
                            <a class="dropdown-item" href="javascript: void(0);">Updates</a>
                            <a class="dropdown-item" href="javascript: void(0);">Forums</a>
                        </div>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle arrow-none" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-price-tag-3-line fs-16"></i>
                            <i class="ri-arrow-down-s-line"></i>
                        </button>
                        <div class="dropdown-menu">
                            <span class="dropdown-header">Label as:</span>
                            <a class="dropdown-item" href="javascript: void(0);">Updates</a>
                            <a class="dropdown-item" href="javascript: void(0);">Social</a>
                            <a class="dropdown-item" href="javascript: void(0);">Promotions</a>
                            <a class="dropdown-item" href="javascript: void(0);">Forums</a>
                        </div>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-secondary dropdown-toggle arrow-none" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-more-line fs-16"></i> More
                            <i class="ri-arrow-down-s-line"></i>
                        </button>
                        <div class="dropdown-menu">
                            <span class="dropdown-header">More Options :</span>
                            <a class="dropdown-item" href="javascript: void(0);">Mark as Unread</a>
                            <a class="dropdown-item" href="javascript: void(0);">Add to Tasks</a>
                            <a class="dropdown-item" href="javascript: void(0);">Add Star</a>
                            <a class="dropdown-item" href="javascript: void(0);">Mute</a>
                        </div>
                    </div>

                    <div class="mt-3">
                        <ul class="email-list">
                            <li class="unread">
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail1">
                                            <label class="form-check-label" for="mail1"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">Lucas Kriebel (via Twitter)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Lucas Kriebel (@LucasKriebel) has sent
                                        you a direct message on Twitter! &nbsp;&ndash;&nbsp;
                                        <span>@LucasKriebel - Very cool :) Nicklas, You have a new direct message.</span>
                                    </a>
                                    <div class="email-date">11:49 am</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-open-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail2">
                                            <label class="form-check-label" for="mail2"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Randy, me (5)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Last pic over my village &nbsp;&ndash;&nbsp;
                                        <span>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="email-date">5:01 am</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail3">
                                            <label class="form-check-label" for="mail3"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">Andrew Zimmer</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Mochila Beta: Subscription Confirmed
                                        &nbsp;&ndash;&nbsp; <span>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="email-date">Mar 8</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="unread">
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail4">
                                            <label class="form-check-label" for="mail4"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Infinity HR</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Sveriges Hetaste sommarjobb &nbsp;&ndash;&nbsp;
                                        <span>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="email-date">Mar 8</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-open-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail5">
                                            <label class="form-check-label" for="mail5"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Web Support Dennis</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Re: New mail settings &nbsp;&ndash;&nbsp;
                                        <span>Will you answer him asap?</span>
                                    </a>
                                    <div class="email-date">Mar 7</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail6">
                                            <label class="form-check-label" for="mail6"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">me, Peter (2)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Off on Thursday &nbsp;&ndash;&nbsp;
                                        <span>Eff that place, you might as well stay here with us instead! Sent from my iPhone 4 &gt; 4 mar 2014 at 5:55 pm</span>
                                    </a>
                                    <div class="email-date">Mar 4</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail7">
                                            <label class="form-check-label" for="mail7"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Medium</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">This Week's Top Stories &nbsp;&ndash;&nbsp;
                                        <span>Our top pick for you on Medium this week The Man Who Destroyed America’s Ego</span>
                                    </a>
                                    <div class="email-date">Feb 28</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail8">
                                            <label class="form-check-label" for="mail8"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">Death to Stock</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Montly High-Res Photos &nbsp;&ndash;&nbsp;
                                        <span>To create this month's pack, we hosted a party with local musician Jared Mahone here in Columbus, Ohio.</span>
                                    </a>
                                    <div class="email-date">Feb 28</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail9">
                                            <label class="form-check-label" for="mail9"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Revibe</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Weekend on Revibe &nbsp;&ndash;&nbsp;
                                        <span>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="email-date">Feb 27</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail10">
                                            <label class="form-check-label" for="mail10"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Erik, me (5)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Regarding our meeting &nbsp;&ndash;&nbsp;
                                        <span>That's great, see you on Thursday!</span>
                                    </a>
                                    <div class="email-date">Feb 24</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail11">
                                            <label class="form-check-label" for="mail11"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">KanbanFlow</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Task assigned: Clone ARP's website
                                        &nbsp;&ndash;&nbsp; <span>You have been assigned a task by Alex@Work on the board Web.</span>
                                    </a>
                                    <div class="email-date">Feb 24</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail12">
                                            <label class="form-check-label" for="mail12"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Tobias Berggren</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Let's go fishing! &nbsp;&ndash;&nbsp;
                                        <span>Hey, You wanna join me and Fred at the lake tomorrow? It'll be awesome.</span>
                                    </a>
                                    <div class="email-date">Feb 23</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail13">
                                            <label class="form-check-label" for="mail13"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">Charukaw, me (7)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Hey man &nbsp;&ndash;&nbsp; <span
                                           >Nah man sorry i don't. Should i get it?</span>
                                    </a>
                                    <div class="email-date">Feb 23</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="unread">
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail14">
                                            <label class="form-check-label" for="mail14"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">me, Peter (5)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Home again! &nbsp;&ndash;&nbsp; <span
                                           >That's just perfect! See you tomorrow.</span>
                                    </a>
                                    <div class="email-date">Feb 21</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-open-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail15">
                                            <label class="form-check-label" for="mail15"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Stack Exchange</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">1 new items in your Stackexchange inbox
                                        &nbsp;&ndash;&nbsp; <span>The following items were added to your Stack Exchange global inbox since you last checked it.</span>
                                    </a>
                                    <div class="email-date">Feb 21</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail16">
                                            <label class="form-check-label" for="mail16"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line text-warning"></span>
                                    <a href="javascript: void(0);" class="email-title">Google Drive Team</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">You can now use your storage in Google
                                        Drive &nbsp;&ndash;&nbsp; <span>Hey Nicklas Sandell! Thank you for purchasing extra storage space in Google Drive.</span>
                                    </a>
                                    <div class="email-date">Feb 20</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="unread">
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail17">
                                            <label class="form-check-label" for="mail17"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">me, Susanna (11)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Train/Bus &nbsp;&ndash;&nbsp; <span
                                           >Yes ok, great! I'm not stuck in Stockholm anymore, we're making progress.</span>
                                    </a>
                                    <div class="email-date">Feb 19</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-open-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail18">
                                            <label class="form-check-label" for="mail18"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Peter, me (3)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Hello &nbsp;&ndash;&nbsp; <span
                                           >Trip home from Colombo has been arranged, then Jenna will come get me from Stockholm. :)</span>
                                    </a>
                                    <div class="email-date">Jan 28</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail19">
                                            <label class="form-check-label" for="mail19"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">me, Susanna (7)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Since you asked... and i'm
                                        inconceivably bored at the train station &nbsp;&ndash;&nbsp;
                                        <span>Alright thanks. I'll have to re-book that somehow, i'll get back to you.</span>
                                    </a>
                                    <div class="email-date">Jan 25</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li>
                                <div class="email-sender-info">
                                    <div class="checkbox-wrapper-mail">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="mail20">
                                            <label class="form-check-label" for="mail20"></label>
                                        </div>
                                    </div>
                                    <span class="star-toggle ri-star-line"></span>
                                    <a href="javascript: void(0);" class="email-title">Randy, me (5)</a>
                                </div>
                                <div class="email-content">
                                    <a href="javascript: void(0);" class="email-subject">Last pic over my village &nbsp;&ndash;&nbsp;
                                        <span>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="email-date">Jan 22</div>
                                </div>
                                <div class="email-action-icons">
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-archive-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-delete-bin-6-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-mail-unread-line email-action-icons-item"></i></a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="javascript: void(0);"><i class="ri-time-line email-action-icons-item"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- end .mt-4 -->

                    <div class="row">
                        <div class="col-7 mt-1">
                            Showing 1 - 20 of 289
                        </div> <!-- end col-->
                        <div class="col-5">
                            <div class="btn-group float-end">
                                <button type="button" class="btn btn-light btn-sm"><i class="ri-arrow-left-s-line"></i></button>
                                <button type="button" class="btn btn-info btn-sm"><i class="ri-arrow-right-s-line"></i></button>
                            </div>
                        </div> <!-- end col-->
                    </div>
                    <!-- end row-->
                </div> 
                <!-- end inbox-rightbar-->
            </div>
            <!-- end card-body -->
            <div class="clearfix"></div>
        </div> <!-- end card-box -->

    </div> <!-- end Col -->
</div><!-- End row -->


  <!-- Compose Modal -->
  <div id="compose-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="compose-header-modalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header modal-colored-header bg-primary">
                <h4 class="modal-title" id="compose-header-modalLabel">New Message</h4>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="p-1">
                <div class="modal-body px-3 pt-3 pb-0">
                    <form>
                        <div class="mb-2">
                            <label for="msgto" class="form-label">To</label>
                            <input type="text" id="msgto" class="form-control" placeholder="Example@email.com">
                        </div>
                        <div class="mb-2">
                            <label for="mailsubject" class="form-label">Subject</label>
                            <input type="text" id="mailsubject" class="form-control" placeholder="Your subject">
                        </div>
                        <div class="write-mdg-box mb-3">
                            <label class="form-label">Message</label>
                            <div id="snow-editor" style="height: 200px;">
                                <h3>This is a simple editable area.</h3>
                                <p>
                                    End of simple area
                                </p>
                            </div><!-- end Snow-editor-->
                        </div>
                    </form>
                </div>
                <div class="px-3 pb-3">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal"><i class="ri-send-plane-2-line me-1"></i> Send Message</button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{% endblock content %} 

{% block extra_js %} 

 <!-- Quill Editor js -->
 <script src="{% static 'dashboard/vendor/quill/quill.min.js' %}"></script>

 <!-- Page init js -->
 <script src="{% static 'dashboard/js/pages/demo.inbox.js' %}"></script>

 <!-- App js -->
 <script src="{% static 'dashboard/js/app.min.js' %}"></script>

{% endblock extra_js %}

