{% extends 'base.html.twig' %}

{% block title %}
  Mailbox
{% endblock %}

{% block body %}
    <div class="app-inner-layout">
        <div class="app-inner-layout__header bg-heavy-rain">
            <div class="app-page-title">
                <div class="page-title-wrapper">
                    <div class="page-title-heading">
                        <div class="page-title-icon">
                            <i class="pe-7s-power icon-gradient bg-mixed-hopes"></i>
                        </div>
                        <div>
                            Mailbox
                            <div class="page-title-subheading">Envoyer un mail à vos collaborateurs !</div>
                        </div>
                    </div>
                    <div class="page-title-actions">
                        
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="app-inner-layout__wrapper">
            <div class="app-inner-layout__content card">
                <div>
                    <div class="app-inner-layout__top-pane">
                        <div class="pane-left">
                            <div class="mobile-app-menu-btn">
                                <button type="button" class="hamburger hamburger--elastic">
                                    <span class="hamburger-box">
                                        <span class="hamburger-inner"></span>
                                    </span>
                                </button>
                            </div>
                            <h4 class="mb-0">Inbox</h4>
                            <div class="btn-group dropdown">
                                <button type="button" data-bs-toggle="dropdown"
                                    aria-haspopup="true" aria-expanded="false" class="btn btn-link">
                                    <i class="fa fa-angle-down"></i>
                                </button>
                                <div tabindex="-1" role="menu" aria-hidden="true"
                                    class="dropdown-menu-xl rm-pointers dropdown-menu">
                                    <div class="dropdown-menu-header">
                                        <div class="dropdown-menu-header-inner bg-night-fade">
                                            <div class="menu-header-image opacity-1" style="background-image: url('images/dropdown-header/city5.jpg');"></div>
                                            <div class="menu-header-content text-dark">
                                                <h5 class="menu-header-title">Settings</h5>
                                                <h6 class="menu-header-subtitle">Manage all of your options</h6>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="grid-menu grid-menu-xl grid-menu-2col">
                                        <div class="g-0 row">
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-license btn-icon-wrapper btn-icon-lg mb-3"></i>
                                                    Primary
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-map btn-icon-wrapper btn-icon-lg mb-3"></i>
                                                    Secondary
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-music-note btn-icon-wrapper btn-icon-lg mb-3"></i>
                                                    Success
                                                </button>
                                            </div>
                                            <div class="col-sm-6">
                                                <button class="btn-icon-vertical btn-square btn-transition btn btn-outline-link">
                                                    <i class="lnr-heart btn-icon-wrapper btn-icon-lg mb-3"></i>
                                                    Info
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="nav flex-column">
                                        <li class="nav-item-divider nav-item"></li>
                                        <li class="nav-item-btn text-center nav-item">
                                            <button class="btn-shadow btn btn-primary btn-sm">Submit</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="pane-right">
                            <div class="input-group">
                                <div class="input-group-text">
                                    <div class="">
                                        <i class="fa fa-search fa-w-16 "></i>
                                    </div>
                                </div>
                                <input placeholder="Search..." type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="bg-white">
                        <div class="table-responsive">
                            <table class="text-nowrap table-lg mb-0 table table-hover">
                                <tbody>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox1" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox1">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/1.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Alina Mcloughlin</div>
                                                        <div class="widget-subheading">Last seen online 15 minutes ago</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">Nullam dictum felis eu pede mollis pretium.</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox2" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox2">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/2.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">John Smith</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">But I must explain to you how all this mistaken idea
                                            of denouncing pleasure ...</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox3" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox3">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/3.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Eliot Huber</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">But I must explain to you how all this mistaken idea
                                            of denouncing pleasure ...</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox4" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox4">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/4.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Ella-Rose Henry</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">Create stunning UIs for your pages with these layout
                                            components...</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox5" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox5">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/5.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Vinnie Wagstaff</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">Etiam sit amet orci eget eros faucibus...</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox6" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox6">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/6.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Alina Mcloughlin</div>
                                                        <div class="widget-subheading">Last seen online 15 minutes ago</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">Nullam dictum felis eu pede mollis pretium.</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            5 mins ago
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox7" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox7">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/7.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Eliot Huber</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">But I must explain to you how all this mistaken idea
                                            of denouncing pleasure ...</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox8" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox8">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/8.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Eliot Huber</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">But I must explain to you how all this mistaken idea
                                            of denouncing pleasure ...</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-center" style="width: 78px;">
                                            <div class="">
                                                <input type="checkbox" id="eCheckbox9" class="form-check-input">
                                                <label class="form-check-label" for="eCheckbox9">&nbsp;</label>
                                            </div>
                                        </td>
                                        <td class="text-start ps-1">
                                            <i class="fa fa-star"></i>
                                        </td>
                                        <td>
                                            <div class="widget-content p-0">
                                                <div class="widget-content-wrapper">
                                                    <div class="widget-content-left me-3">
                                                        <img width="42" class="rounded-circle" src="assets/images/avatars/9.jpg" alt="">
                                                    </div>
                                                    <div class="widget-content-left">
                                                        <div class="widget-heading">Ella-Rose Henry</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-start">Create stunning UIs for your pages with these layout components...</td>
                                        <td>
                                            <i class="fa fa-tags fa-w-20 opacity-4"></i>
                                        </td>
                                        <td class="text-end">
                                            <i class="fa fa-calendar-alt opacity-4 me-2"></i>
                                            7 Dec
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="app-inner-layout__bottom-pane d-block text-center">
                            <nav class="" aria-label="Page navigation example">
                                <ul class="pagination">
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link" aria-label="Previous">
                                            <span aria-hidden="true">«</span>
                                            <span class="visually-hidden">Previous</span>
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">1</a>
                                    </li>
                                    <li class="page-item active">
                                        <a href="javascript:void(0);" class="page-link">2</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">3</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">4</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link">5</a>
                                    </li>
                                    <li class="page-item">
                                        <a href="javascript:void(0);" class="page-link" aria-label="Next">
                                            <span aria-hidden="true">»</span>
                                            <span class="visually-hidden">Next</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app-inner-layout__sidebar card">
                <ul class="nav flex-column">
                    <li class="pt-4 ps-3 pe-3 pb-3 nav-item">
                        <div class="d-grid">
                            <button class="btn-pill btn-shadow btn btn-primary">Write New Email</button>
                        </div>
                    </li>
                    <li class="nav-item-header nav-item">My Account</li>
                    <li class="nav-item">
                        <a href="javascript:void(0);" class="nav-link">
                            <i class="nav-link-icon pe-7s-chat"></i>
                            <span>Inbox</span>
                            <div class="ms-auto badge rounded-pill bg-info">8</div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="javascript:void(0);" class="nav-link">
                            <i class="nav-link-icon pe-7s-wallet"></i>
                            <span>Sent Items</span>
                        </a>
                    </li>
                    
                    <li class="nav-item-divider nav-item"></li>
                    <li class="nav-item">
                        <a href="javascript:void(0);" class="nav-link">
                            <i class="nav-link-icon pe-7s-box2"></i>
                            <span>Trash</span>
                        </a>
                    </li>
                    
                    <li class="nav-item-divider nav-item"></li>
                    <li class="nav-item-header nav-item">Online Friends</li>
                    <li class="text-center p-2 nav-item">
                        <div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-primary badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/1.jpg" alt="">
                                </div>
                            </div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-focus badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/2.jpg" alt="">
                                </div>
                            </div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-warning badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/3.jpg" alt="">
                                </div>
                            </div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-danger badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/4.jpg" alt="">
                                </div>
                            </div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-info badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/5.jpg" alt="">
                                </div>
                            </div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-success badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/7.jpg" alt="">
                                </div>
                            </div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-secondary badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/7.jpg" alt="">
                                </div>
                            </div>
                            <div class="avatar-icon-wrapper">
                                <div class="badge bg-warning badge-dot badge-dot-lg"></div>
                                <div class="avatar-icon">
                                    <img src="/images/avatars/8.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item-btn text-center nav-item">
                        <button class="btn-wide btn-pill btn btn-success btn-sm">Start New Conversation</button>
                    </li>
                
                </ul>
            </div>
        </div>
    </div>
</div>

</div>
</div>
</div>
<div class="app-drawer-wrapper">
<div class="drawer-nav-btn">
<button type="button" class="hamburger hamburger--elastic is-active">
<span class="hamburger-box">
    <span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="drawer-content-wrapper">
<div class="scrollbar-container">
<h3 class="drawer-heading">Servers Status</h3>
<div class="drawer-section">
    <div class="row">
        <div class="col">
            <div class="progress-box">
                <h4>Server Load 1</h4>
                <div class="circle-progress circle-progress-gradient-xl mx-auto">
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="progress-box">
                <h4>Server Load 2</h4>
                <div class="circle-progress circle-progress-success-xl mx-auto">
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="progress-box">
                <h4>Server Load 3</h4>
                <div class="circle-progress circle-progress-danger-xl mx-auto">
                    <small></small>
                </div>
            </div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="mt-3">
        <h5 class="text-center card-title">Live Statistics</h5>
        <div id="sparkline-carousel-3"></div>
        <div class="row">
            <div class="col">
                <div class="widget-chart p-0">
                    <div class="widget-chart-content">
                        <div class="widget-numbers text-warning fsize-3">43</div>
                        <div class="widget-subheading pt-1">Packages</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="widget-chart p-0">
                    <div class="widget-chart-content">
                        <div class="widget-numbers text-danger fsize-3">65</div>
                        <div class="widget-subheading pt-1">Dropped</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="widget-chart p-0">
                    <div class="widget-chart-content">
                        <div class="widget-numbers text-success fsize-3">18</div>
                        <div class="widget-subheading pt-1">Invalid</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="divider"></div>
        <div class="text-center mt-2 d-block">
            <button class="me-2 border-0 btn-transition btn btn-outline-danger">Escalate Issue</button>
            <button class="border-0 btn-transition btn btn-outline-success">Support Center</button>
        </div>
    </div>
</div>
<h3 class="drawer-heading">File Transfers</h3>
<div class="drawer-section p-0">
    <div class="files-box">
        <ul class="list-group list-group-flush">
            <li class="pt-2 pb-2 pe-2 list-group-item">
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left opacity-6 fsize-2 me-3 text-primary center-elem">
                            <i class="fa fa-file-alt"></i>
                        </div>
                        <div class="widget-content-left">
                            <div class="widget-heading fw-normal">TPSReport.docx</div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <button class="btn-icon btn-icon-only btn btn-link btn-sm">
                                <i class="fa fa-cloud-download-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="pt-2 pb-2 pe-2 list-group-item">
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left opacity-6 fsize-2 me-3 text-warning center-elem">
                            <i class="fa fa-file-archive"></i>
                        </div>
                        <div class="widget-content-left">
                            <div class="widget-heading fw-normal">Latest_photos.zip</div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <button class="btn-icon btn-icon-only btn btn-link btn-sm">
                                <i class="fa fa-cloud-download-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="pt-2 pb-2 pe-2 list-group-item">
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left opacity-6 fsize-2 me-3 text-danger center-elem">
                            <i class="fa fa-file-pdf"></i>
                        </div>
                        <div class="widget-content-left">
                            <div class="widget-heading fw-normal">Annual Revenue.pdf</div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <button class="btn-icon btn-icon-only btn btn-link btn-sm">
                                <i class="fa fa-cloud-download-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="pt-2 pb-2 pe-2 list-group-item">
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left opacity-6 fsize-2 me-3 text-success center-elem">
                            <i class="fa fa-file-excel"></i>
                        </div>
                        <div class="widget-content-left">
                            <div class="widget-heading fw-normal">Analytics_GrowthReport.xls</div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <button class="btn-icon btn-icon-only btn btn-link btn-sm">
                                <i class="fa fa-cloud-download-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<h3 class="drawer-heading">Tasks in Progress</h3>
<div class="drawer-section p-0">
    <div class="todo-box">
        <ul class="todo-list-wrapper list-group list-group-flush">
            <li class="list-group-item">
                <div class="todo-indicator bg-warning"></div>
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left me-2">
                            <div class="custom-checkbox custom-control form-check">
                                <input type="checkbox" id="exampleCustomCheckbox1266" class="form-check-input">
                                <label class="form-label form-check-label" for="exampleCustomCheckbox1266">&nbsp;</label>
                            </div>
                        </div>
                        <div class="widget-content-left">
                            <div class="widget-heading">Wash the car
                                <div class="badge bg-danger ms-2">Rejected</div>
                            </div>
                            <div class="widget-subheading"><i>Written by Bob</i></div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <button class="border-0 btn-transition btn btn-outline-success">
                                <i class="fa fa-check"></i>
                            </button>
                            <button class="border-0 btn-transition btn btn-outline-danger">
                                <i class="fa fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="list-group-item">
                <div class="todo-indicator bg-focus"></div>
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left me-2">
                            <div class="custom-checkbox custom-control form-check">
                                <input type="checkbox" id="exampleCustomCheckbox1666" class="form-check-input">
                                <label class="form-label form-check-label" for="exampleCustomCheckbox1666">&nbsp;</label>
                            </div>
                        </div>
                        <div class="widget-content-left">
                            <div class="widget-heading">Task with hover dropdown menu</div>
                            <div class="widget-subheading">
                                <div>By Johnny
                                    <div class="badge rounded-pill bg-info ms-2">NEW</div>
                                </div>
                            </div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <div class="d-inline-block dropdown">
                                <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="border-0 btn-transition btn btn-link">
                                    <i class="fa fa-ellipsis-h"></i>
                                </button>
                                <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                    <h6 tabindex="-1" class="dropdown-header">Header</h6>
                                    <button type="button" disabled="" tabindex="-1" class="disabled dropdown-item">Action</button>
                                    <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                    <div tabindex="-1" class="dropdown-divider"></div>
                                    <button type="button" tabindex="0" class="dropdown-item">Another Action</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="list-group-item">
                <div class="todo-indicator bg-primary"></div>
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left me-2">
                            <div class="custom-checkbox custom-control form-check">
                                <input type="checkbox" id="exampleCustomCheckbox4777" class="form-check-input">
                                <label class="form-label form-check-label" for="exampleCustomCheckbox4777">&nbsp;</label>
                            </div>
                        </div>
                        <div class="widget-content-left flex2">
                            <div class="widget-heading">Badge on the right task</div>
                            <div class="widget-subheading">This task has show on hover actions!</div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <button class="border-0 btn-transition btn btn-outline-success">
                                <i class="fa fa-check"></i>
                            </button>
                        </div>
                        <div class="widget-content-right ms-3">
                            <div class="badge rounded-pill bg-success">Latest Task</div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="list-group-item">
                <div class="todo-indicator bg-info"></div>
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left me-2">
                            <div class="custom-checkbox custom-control form-check">
                                <input type="checkbox" id="exampleCustomCheckbox2444" class="form-check-input">
                                <label class="form-label form-check-label" for="exampleCustomCheckbox2444">&nbsp;</label>
                            </div>
                        </div>
                        <div class="widget-content-left me-3">
                            <div class="widget-content-left">
                                <img width="42" class="rounded" src="assets/images/avatars/1.jpg" alt="" />
                            </div>
                        </div>
                        <div class="widget-content-left">
                            <div class="widget-heading">Go grocery shopping</div>
                            <div class="widget-subheading">A short description ...</div>
                        </div>
                        <div class="widget-content-right widget-content-actions">
                            <button class="border-0 btn-transition btn btn-sm btn-outline-success">
                                <i class="fa fa-check"></i>
                            </button>
                            <button class="border-0 btn-transition btn btn-sm btn-outline-danger">
                                <i class="fa fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="list-group-item">
                <div class="todo-indicator bg-success"></div>
                <div class="widget-content p-0">
                    <div class="widget-content-wrapper">
                        <div class="widget-content-left me-2">
                            <div class="custom-checkbox custom-control form-check">
                                <input type="checkbox" id="exampleCustomCheckbox3222" class="form-check-input">
                                <label class="form-label form-check-label" for="exampleCustomCheckbox3222">&nbsp;</label>
                            </div>
                        </div>
                        <div class="widget-content-left flex2">
                            <div class="widget-heading">Development Task</div>
                            <div class="widget-subheading">Finish React ToDo List App</div>
                        </div>
                        <div class="widget-content-right">
                            <div class="badge bg-warning me-2">69</div>
                        </div>
                        <div class="widget-content-right">
                            <button class="border-0 btn-transition btn btn-outline-success">
                                <i class="fa fa-check"></i>
                            </button>
                            <button class="border-0 btn-transition btn btn-outline-danger">
                                <i class="fa fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<h3 class="drawer-heading">Urgent Notifications</h3>
<div class="drawer-section">
    <div class="notifications-box">
        <div class="vertical-time-simple vertical-without-time vertical-timeline vertical-timeline--one-column">
            <div class="vertical-timeline-item dot-danger vertical-timeline-element">
                <div>
                    <span class="vertical-timeline-element-icon bounce-in"></span>
                    <div class="vertical-timeline-element-content bounce-in">
                        <h4 class="timeline-title">All Hands Meeting</h4>
                        <span class="vertical-timeline-element-date"></span>
                    </div>
                </div>
            </div>
            <div class="vertical-timeline-item dot-warning vertical-timeline-element">
                <div>
                    <span class="vertical-timeline-element-icon bounce-in"></span>
                    <div class="vertical-timeline-element-content bounce-in">
                        <p>Yet another one, at
                            <span class="text-success">15:00 PM</span>
                        </p>
                        <span class="vertical-timeline-element-date"></span>
                    </div>
                </div>
            </div>
            <div class="vertical-timeline-item dot-success vertical-timeline-element">
                <div>
                    <span class="vertical-timeline-element-icon bounce-in"></span>
                    <div class="vertical-timeline-element-content bounce-in">
                        <h4 class="timeline-title">
                            Build the production release
                            <div class="badge bg-danger ms-2">NEW</div>
                        </h4>
                        <span class="vertical-timeline-element-date"></span>
                    </div>
                </div>
            </div>
            <div class="vertical-timeline-item dot-primary vertical-timeline-element">
                <div>
                    <span class="vertical-timeline-element-icon bounce-in"></span>
                    <div class="vertical-timeline-element-content bounce-in">
                        <h4 class="timeline-title">
                            Something not important
                            <div class="avatar-wrapper mt-2 avatar-wrapper-overlap">
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/1.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/2.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/3.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/4.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/5.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/7.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/7.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm">
                                    <div class="avatar-icon">
                                        <img src="/images/avatars/8.jpg" alt="">
                                    </div>
                                </div>
                                <div class="avatar-icon-wrapper avatar-icon-sm avatar-icon-add">
                                    <div class="avatar-icon">
                                        <i>+</i>
                                    </div>
                                </div>
                            </div>
                        </h4>
                        <span class="vertical-timeline-element-date"></span>
                    </div>
                </div>
            </div>
            <div class="vertical-timeline-item dot-info vertical-timeline-element">
                <div>
                    <span class="vertical-timeline-element-icon bounce-in"></span>
                    <div class="vertical-timeline-element-content bounce-in">
                        <h4 class="timeline-title">This dot has an info state</h4>
                        <span class="vertical-timeline-element-date"></span>
                    </div>
                </div>
            </div>
            <div class="vertical-timeline-item dot-dark vertical-timeline-element">
                <div>
                    <span class="vertical-timeline-element-icon is-hidden"></span>
                    <div class="vertical-timeline-element-content is-hidden">
                        <h4 class="timeline-title">This dot has a dark state</h4>
                        <span class="vertical-timeline-element-date"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}