@{
  ViewData["Title"] = "Email - Apps";
}

@section VendorStyles {
<link rel="stylesheet" href="~/vendor/libs/quill/typography.css" />
<link rel="stylesheet" href="~/vendor/libs/quill/katex.css" />
<link rel="stylesheet" href="~/vendor/libs/quill/editor.css" />
<link rel="stylesheet" href="~/vendor/libs/select2/select2.css" />
}

@section VendorScripts {
<script src="~/vendor/libs/quill/katex.js"></script>
<script src="~/vendor/libs/quill/quill.js"></script>
<script src="~/vendor/libs/select2/select2.js"></script>
<script src="~/vendor/libs/notiflix/notiflix.js"></script>
}

@section PageStyles {
<link rel="stylesheet" href="~/vendor/css/pages/app-email.css" />
}

@section PageScripts {
<script src="~/js/app-email.js"></script>
}

@* ************** Content ************** *@
<div class="app-email card">
  <div class="row g-0">
    <!-- Email Sidebar -->
    <div class="col app-email-sidebar border-end flex-grow-0" id="app-email-sidebar">
      <div class="btn-compost-wrapper d-grid">
        <button class="btn btn-primary btn-compose" data-bs-toggle="modal" data-bs-target="#emailComposeSidebar" id="emailComposeSidebarLabel">Compose</button>
      </div>
      <!-- Email Filters -->
      <div class="email-filters pt-4 pb-2">
        <!-- Email Filters: Folder -->
        <ul class="email-filter-folders list-unstyled">
          <li class="active d-flex justify-content-between align-items-center mb-1" data-target="inbox">
            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
              <i class="icon-base ti tabler-mail"></i>
              <span class="align-middle ms-2">Inbox</span>
            </a>
            <div class="badge bg-label-primary rounded-pill">21</div>
          </li>
          <li class="d-flex mb-1" data-target="sent">
            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
              <i class="icon-base ti tabler-send"></i>
              <span class="align-middle ms-2">Sent</span>
            </a>
          </li>
          <li class="d-flex justify-content-between align-items-center mb-1" data-target="draft">
            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
              <i class="icon-base ti tabler-edit"></i>
              <span class="align-middle ms-2">Draft</span>
            </a>
            <div class="badge bg-label-warning rounded-pill">2</div>
          </li>
          <li class="d-flex justify-content-between mb-1" data-target="starred">
            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
              <i class="icon-base ti tabler-star"></i>
              <span class="align-middle ms-2">Starred</span>
            </a>
          </li>
          <li class="d-flex justify-content-between align-items-center mb-1" data-target="spam">
            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
              <i class="icon-base ti tabler-alert-octagon"></i>
              <span class="align-middle ms-2">Spam</span>
            </a>
            <div class="badge bg-label-danger rounded-pill">4</div>
          </li>
          <li class="d-flex align-items-center mb-1" data-target="trash">
            <a href="javascript:void(0);" class="d-flex flex-wrap align-items-center">
              <i class="icon-base ti tabler-trash"></i>
              <span class="align-middle ms-2">Trash</span>
            </a>
          </li>
        </ul>
        <!-- Email Filters: Labels -->
        <div class="email-filter-labels pt-4">
          <p class="small mx-6 text-body-secondary text-uppercase">Labels</p>
          <ul class="list-unstyled mb-2">
            <li data-target="work">
              <a href="javascript:void(0);">
                <i class="badge badge-dot bg-success align-middle"></i>
                <span class="align-middle ms-2">Personal</span>
              </a>
            </li>
            <li data-target="company">
              <a href="javascript:void(0);">
                <i class="badge badge-dot bg-primary align-middle"></i>
                <span class="align-middle ms-2">Company</span>
              </a>
            </li>
            <li data-target="important">
              <a href="javascript:void(0);">
                <i class="badge badge-dot bg-warning align-middle"></i>
                <span class="align-middle ms-2">Important</span>
              </a>
            </li>
            <li data-target="private">
              <a href="javascript:void(0);">
                <i class="badge badge-dot bg-danger align-middle"></i>
                <span class="align-middle ms-2">Private</span>
              </a>
            </li>
          </ul>
        </div>
        <!--/ Email Filters -->
      </div>
    </div>
    <!--/ Email Sidebar -->

    <!-- Emails List -->
    <div class="col app-emails-list">
      <div class="card shadow-none border-0 rounded-0">
        <div class="card-body emails-list-header p-3 py-2">
          <!-- Email List: Search -->
          <div class="d-flex justify-content-between align-items-center px-3 mt-2">
            <div class="d-flex align-items-center w-100">
              <i class="icon-base ti tabler-menu-2 icon-lg cursor-pointer d-block d-lg-none me-4 mb-4" data-bs-toggle="sidebar" data-target="#app-email-sidebar" data-overlay></i>
              <div class="mb-4 w-100">
                <div class="input-group input-group-merge shadow-none">
                  <span class="input-group-text border-0 ps-0 py-0" id="email-search">
                    <i class="icon-base ti tabler-search icon-lg"></i>
                  </span>
                  <input type="text" class="form-control email-search-input border-0 py-0" placeholder="Search mail" aria-label="Search mail" aria-describedby="email-search" />
                </div>
              </div>
            </div>
          </div>
          <hr class="mx-n3 emails-list-header-hr mb-2" />
          <!-- Email List: Actions -->
          <div class="d-flex justify-content-between align-items-center ps-1">
            <div class="d-flex align-items-center">
              <div class="form-check mb-0 ms-2">
                <input class="form-check-input" type="checkbox" id="email-select-all" />
                <label class="form-check-label" for="email-select-all"></label>
              </div>
              <div class="btn btn-text-secondary btn-icon rounded-pill me-1"><i class="icon-base ti tabler-trash icon-22px email-list-delete cursor-pointer"></i></div>
              <div class="btn btn-text-secondary btn-icon rounded-pill me-1"><i class="icon-base ti tabler-mail-opened icon-22px email-list-read cursor-pointer"></i></div>
              <div class="dropdown me-1">
                <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownMenuFolderOne" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="icon-base ti tabler-folder icon-22px"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuFolderOne">
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="icon-base ti tabler-info-circle icon-sm me-1"></i>
                    <span class="align-middle">Spam</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="icon-base ti tabler-file icon-sm me-1"></i>
                    <span class="align-middle">Draft</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="icon-base ti tabler-trash icon-sm me-1"></i>
                    <span class="align-middle">Trash</span>
                  </a>
                </div>
              </div>
              <div class="dropdown mx-1">
                <button class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="true" id="dropdownLabelOne">
                  <i class="icon-base ti tabler-tag icon-22px"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownLabelOne">
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="badge badge-dot bg-success me-1"></i>
                    <span class="align-middle">Workshop</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="badge badge-dot bg-primary me-1"></i>
                    <span class="align-middle">Company</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="badge badge-dot bg-warning me-1"></i>
                    <span class="align-middle">Important</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="badge badge-dot bg-danger me-1"></i>
                    <span class="align-middle">Private</span>
                  </a>
                </div>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <span class="btn btn-icon btn-text-secondary rounded-pill me-1">
                <i class="icon-base ti tabler-refresh icon-22px scaleX-n1-rtl cursor-pointer email-refresh"></i>
              </span>
              <div class="dropdown">
                <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="emailsActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="emailsActions">
                  <a class="dropdown-item" href="javascript:void(0)">Mark as read</a>
                  <a class="dropdown-item" href="javascript:void(0)">Mark as unread</a>
                  <a class="dropdown-item" href="javascript:void(0)">Delete</a>
                  <a class="dropdown-item" href="javascript:void(0)">Archive</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <hr class="container-m-nx m-0" />
        <!-- Email List: Items -->
        <div class="email-list pt-0">
          <ul class="list-unstyled m-0">
            <li class="email-list-item email-marked-read d-flex align-items-center" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-1" />
                  <label class="form-check-label" for="email-1"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <img src="~/img/avatars/1.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 text-heading">Chandler Bing</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Focused impactful open issues from the project of GitHub</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="private"></span>
                  <small class="email-list-item-time text-body-secondary">08:40 AM</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item email-marked-read d-flex align-items-center" data-sent="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-2" />
                  <label class="form-check-label" for="email-2"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <img src="~/img/avatars/2.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Ross Geller</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Dessert soufflé tootsie roll soufflé carrot cake halvah jelly.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="important"></span>
                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="private"></span>
                  <small class="email-list-item-time text-body-secondary">10:12 AM</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item email-marked-read d-flex align-items-center" data-draft="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-3" />
                  <label class="form-check-label" for="email-3"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <div class="avatar avatar-sm d-block flex-shrink-0 me-sm-4 me-0">
                  <span class="avatar-initial rounded-circle bg-label-success">BS</span>
                </div>
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Barney Stinson</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Soufflé apple pie caramels soufflé tiramisu bear claw.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-attachment icon-base ti tabler-paperclip icon-md cursor-pointer me-2 float-end float-sm-none"></span>
                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="company"></span>
                  <small class="email-list-item-time text-body-secondary">12:44 AM</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item d-flex align-items-center email-marked-read" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-4" />
                  <label class="form-check-label" for="email-4"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <img src="~/img/avatars/3.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Pheobe Buffay</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Tart croissant jujubes gummies macaroon Icing sweet.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-success d-none d-md-inline-block me-2" data-label="work"></span>
                  <small class="email-list-item-time text-body-secondary">Yesterday</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item email-marked-read d-flex align-items-center" data-spam="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-5" />
                  <label class="form-check-label" for="email-5"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <img src="~/img/avatars/4.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Ted Mosby</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love Pudding cookie chocolate sweet tiramisu jujubes I love danish.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="company"></span>
                  <small class="email-list-item-time text-body-secondary">Yesterday</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item d-flex align-items-center email-marked-read" data-trash="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-6" />
                  <label class="form-check-label" for="email-6"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <div class="avatar avatar-sm d-block flex-shrink-0 me-sm-4 me-0">
                  <span class="avatar-initial rounded-circle bg-label-info">Sk</span>
                </div>
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Stacy Cooper</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love danish. Cupcake I love carrot cake sugar plum I love.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="work"></span>
                  <small class="email-list-item-time text-body-secondary">5 May</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item email-marked-read d-flex align-items-center" data-draft="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-7" />
                  <label class="form-check-label" for="email-7"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <img src="~/img/avatars/5.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Rachel Green</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Chocolate cake pudding chocolate bar ice cream bonbon lollipop.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-warning d-none d-md-inline-block me-2" data-label="company"></span>
                  <small class="email-list-item-time text-body-secondary">15 May</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item email-marked-read d-flex align-items-center" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-8" />
                  <label class="form-check-label" for="email-8"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <img src="~/img/avatars/6.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Grace Shelby</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Icing gummi bears ice cream croissant dessert wafer.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-attachment icon-base ti tabler-paperclip icon-md cursor-pointer me-2 float-end float-sm-none"></span>
                  <span class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2" data-label="private"></span>
                  <small class="email-list-item-time text-body-secondary">20 Apr</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item email-marked-read d-flex align-items-center" data-spam="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-9" />
                  <label class="form-check-label" for="email-9"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <div class="avatar avatar-sm d-block flex-shrink-0 me-sm-4 me-0">
                  <span class="avatar-initial rounded-circle bg-label-danger">JF</span>
                </div>
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Jacob Frye</span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, Chocolate cake pudding chocolate bar ice cream Sweet.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-primary d-none d-md-inline-block me-2" data-label="important"></span>
                  <small class="email-list-item-time text-body-secondary">25 Mar</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="email-list-item email-marked-read d-flex align-items-center" data-trash="true" data-bs-toggle="sidebar" data-target="#app-email-view">
              <div class="d-flex align-items-center w-100">
                <div class="form-check mb-0 ms-2">
                  <input class="email-list-item-input form-check-input" type="checkbox" id="email-10" />
                  <label class="form-check-label" for="email-10"></label>
                </div>
                <span class="ms-sm-3 me-4 d-sm-inline-block d-none"><i class="email-list-item-bookmark icon-base ti tabler-star icon-md cursor-pointer ms-1"></i></span>
                <img src="~/img/avatars/9.png" alt="user-avatar" class="d-block flex-shrink-0 rounded-circle me-sm-2 me-0" height="32" width="32" />
                <div class="email-list-item-content ms-2 ms-sm-0 me-2">
                  <span class="email-list-item-username me-2 h6">Alistair Crowley </span>
                  <span class="email-list-item-subject d-xl-inline-block d-block"> Hey Katy, I love danish. Cupcake I love carrot cake sugar plum I love.</span>
                </div>
                <div class="email-list-item-meta ms-auto d-flex align-items-center">
                  <span class="email-list-item-label badge badge-dot bg-success d-none d-md-inline-block me-2" data-label="company"></span>
                  <small class="email-list-item-time text-body-secondary">25 Feb</small>
                  <ul class="list-inline email-list-item-actions">
                    <li class="list-inline-item email-unread btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-mail icon-md"></i></li>
                    <li class="list-inline-item email-delete btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-trash icon-md"></i></li>
                    <li class="list-inline-item btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-info-circle icon-md"></i></li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
          <ul class="list-unstyled m-0">
            <li class="email-list-empty text-center d-none">No items found.</li>
          </ul>
        </div>
      </div>
      <div class="app-overlay"></div>
    </div>
    <!-- /Emails List -->

    <!-- Email View -->
    <div class="col app-email-view flex-grow-0 bg-lighter" id="app-email-view">
      <div class="card shadow-none border-0 rounded-0 app-email-view-header p-5 pt-md-4 py-2">
        <!-- Email View : Title  bar-->
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center overflow-hidden">
            <span class="ms-sm-2 me-4"><i class="icon-base ti tabler-chevron-left icon-md cursor-pointer scaleX-n1-rtl" data-bs-toggle="sidebar" data-target="#app-email-view"></i></span>
            <h6 class="text-truncate mb-0 me-2 fw-normal">Focused impactful open issues</h6>
            <span class="badge bg-label-warning rounded-pill">Important</span>
          </div>
          <!-- Email View : Action bar-->
          <div class="d-flex align-items-center">
            <span class="btn btn-icon p-0 me-2 text-body-secondary">
              <i class="icon-base ti tabler-chevron-left icon-22px scaleX-n1-rtl"></i>
            </span>
            <span class="btn btn-icon p-0">
              <i class="icon-base ti tabler-chevron-right icon-22px scaleX-n1-rtl"></i>
            </span>
          </div>
        </div>
        <hr class="app-email-view-hr mx-n5 mb-2" />
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center">
            <span class="btn btn-icon btn-text-secondary rounded-pill me-1"><i class="icon-base ti tabler-trash icon-22px cursor-pointer"></i></span>
            <span class="btn btn-icon btn-text-secondary rounded-pill me-1"><i class="icon-base ti tabler-mail icon-22px cursor-pointer" data-bs-toggle="sidebar" data-target="#app-email-view"></i></span>
            <div class="dropdown">
              <button class="btn btn-icon btn-text-secondary rounded-pill p-0 me-1" type="button" id="dropdownMenuFolderTwo" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="icon-base ti tabler-folder icon-22px"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuFolderTwo">
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-alert-octagon me-1"></i>
                  <span class="align-middle">Spam</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-edit me-1"></i>
                  <span class="align-middle">Draft</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-trash me-1"></i>
                  <span class="align-middle">Trash</span>
                </a>
              </div>
            </div>
            <div class="dropdown">
              <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownLabelTwo" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="icon-base ti tabler-tag icon-22px"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownLabelTwo">
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="badge badge-dot bg-success me-1"></i>
                  <span class="align-middle">Workshop</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="badge badge-dot bg-primary me-1"></i>
                  <span class="align-middle">Company</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="badge badge-dot bg-info me-1"></i>
                  <span class="align-middle">Important</span>
                </a>
              </div>
            </div>
          </div>
          <div class="d-flex align-items-center">
            <span class="btn btn-icon btn-text-secondary rounded-pill p-0">
              <i class="icon-base ti tabler-star icon-22px"></i>
            </span>
            <div class="dropdown ms-1">
              <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownMoreOptions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMoreOptions">
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-mail me-1"></i>
                  <span class="align-middle">Mark as unread</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-mail-opened me-1"></i>
                  <span class="align-middle">Mark as read</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-star icon-sm me-1"></i>
                  <span class="align-middle">Add star</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-calendar me-1"></i>
                  <span class="align-middle">Create Event</span>
                </a>
                <a class="dropdown-item" href="javascript:void(0)">
                  <i class="icon-base ti tabler-volume-off me-1"></i>
                  <span class="align-middle">Mute</span>
                </a>
                <a class="dropdown-item d-sm-none d-block" href="javascript:void(0)">
                  <i class="icon-base ti tabler-printer me-1"></i>
                  <span class="align-middle">Print</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr class="m-0" />
      <!-- Email View : Content-->
      <div class="app-email-view-content py-4">
        <p class="email-earlier-msgs text-center cursor-pointer mb-12">1 Earlier Message</p>
        <!-- Email View : Previous mails-->
        <div class="card email-card-prev mx-sm-6 mx-3">
          <div class="card-header d-flex justify-content-between align-items-center flex-wrap border-bottom">
            <div class="d-flex align-items-center mb-sm-0 mb-3">
              <img src="~/img/avatars/2.png" alt="user-avatar" class="flex-shrink-0 rounded-circle me-4" height="38" width="38" />
              <div class="flex-grow-1 ms-1">
                <h6 class="m-0 fw-normal">Ross Geller</h6>
                <small class="text-body">rossGeller&#64;email.com</small>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <p class="mb-0 me-4 text-body-secondary">June 20th 2020, 08:30 AM</p>
              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-paperclip icon-22px cursor-pointer"></i></span>
              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="email-list-item-bookmark icon-base ti tabler-star icon-22px cursor-pointer"></i></span>
              <div class="dropdown">
                <button class="btn btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownEmailOne" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEmailOne">
                  <a class="dropdown-item scroll-to-reply" href="javascript:void(0)">
                    <i class="icon-base ti tabler-corner-up-left me-1"></i>
                    <span class="align-middle">Reply</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="icon-base ti tabler-corner-up-right me-1"></i>
                    <span class="align-middle">Forward</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="icon-base ti tabler-alert-octagon me-1"></i>
                    <span class="align-middle">Report</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body pt-5">
            <p class="fw-medium">Greetings!</p>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',making it look like readable English.</p>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
            <p class="mb-0">Sincerely yours,</p>
            <p class="fw-medium mb-0">Envato Design Team</p>
            <hr />
            <p class="text-body-secondary mb-2">Attachments</p>
            <div class="cursor-pointer">
              <i class="icon-base ti tabler-file"></i>
              <span class="align-middle ms-1">report.xlsx</span>
            </div>
          </div>
        </div>
        <!-- Email View : Last mail-->
        <div class="card email-card-last mx-sm-6 mx-3 mt-4">
          <div class="card-header d-flex justify-content-between align-items-center flex-wrap border-bottom">
            <div class="d-flex align-items-center mb-sm-0 mb-3">
              <img src="~/img/avatars/1.png" alt="user-avatar" class="flex-shrink-0 rounded-circle me-4" height="38" width="38" />
              <div class="flex-grow-1 ms-1">
                <h6 class="m-0 fw-normal">Chandler Bing</h6>
                <small class="text-body">iAmAhoot&#64;email.com</small>
              </div>
            </div>
            <div class="d-flex align-items-center">
              <p class="mb-0 me-4 text-body-secondary">June 20th 2020, 08:10 AM</p>
              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-paperclip icon-22px cursor-pointer"></i></span>
              <span class="btn btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-star icon-22px cursor-pointer"></i></span>
              <div class="dropdown">
                <button class="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow" id="dropdownEmailTwo" data-bs-toggle="dropdown" aria-expanded="true">
                  <i class="icon-base ti tabler-dots-vertical icon-22px"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEmailTwo">
                  <a class="dropdown-item scroll-to-reply" href="javascript:void(0)">
                    <i class="icon-base ti tabler-corner-up-left me-1"></i>
                    <span class="align-middle">Reply</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="icon-base ti tabler-corner-up-right me-1"></i>
                    <span class="align-middle">Forward</span>
                  </a>
                  <a class="dropdown-item" href="javascript:void(0)">
                    <i class="icon-base ti tabler-alert-octagon me-1"></i>
                    <span class="align-middle">Report</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body pt-5">
            <p class="fw-medium">Greetings!</p>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',making it look like readable English.</p>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
            <p class="mb-0">Sincerely yours,</p>
            <p class="fw-medium mb-0">Envato Design Team</p>
            <hr />
            <p class="text-body-secondary mb-2">Attachments</p>
            <div class="cursor-pointer">
              <i class="icon-base ti tabler-file"></i>
              <span class="align-middle ms-1">report.xlsx</span>
            </div>
          </div>
        </div>
        <!-- Email View : Reply mail-->
        <div class="email-reply card mt-4 mx-sm-6 mx-3 mb-4">
          <h6 class="card-header border-0 fw-normal pb-4">Reply to Ross Geller</h6>
          <div class="card-body pt-0 ps-3">
            <div class="d-flex justify-content-start">
              <div class="email-reply-toolbar border-0 w-100 ps-0 pb-4">
                <span class="ql-formats me-0">
                  <button class="ql-bold"></button>
                  <button class="ql-italic"></button>
                  <button class="ql-underline"></button>
                  <button class="ql-list" value="ordered"></button>
                  <button class="ql-list" value="bullet"></button>
                  <button class="ql-link"></button>
                  <button class="ql-image"></button>
                </span>
              </div>
            </div>
            <div class="email-reply-editor"></div>
            <div class="d-flex justify-content-end align-items-center mt-4">
              <div class="cursor-pointer btn btn-text-secondary text-secondary me-4 px-3">
                <i class="icon-base ti tabler-paperclip icon-xs text-heading me-2"></i>
                <span class="align-middle">Attachments</span>
              </div>
              <button class="btn btn-primary">
                <span class="align-middle">Send</span>
                <i class="icon-base ti tabler-send icon-xs ms-2 scaleX-n1-rtl"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Email View -->
  </div>

  <!-- Compose Email -->
  <div class="app-email-compose modal" id="emailComposeSidebar" tabindex="-1" aria-labelledby="emailComposeSidebarLabel" aria-hidden="true">
    <div class="modal-dialog m-0 me-md-6 mb-6 modal-lg">
      <div class="modal-content p-0">
        <div class="modal-header py-3 justify-content-between">
          <h5 class="modal-title text-body fs-5">Compose Mail</h5>
          <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-pill"><i class="icon-base ti tabler-minus icon-20px"></i></button>
            <button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-pill" data-bs-dismiss="modal" aria-label="Close"><i class="icon-base ti tabler-x icon-20px"></i></button>
          </div>
        </div>
        <div class="modal-body flex-grow-1 pb-sm-0 p-5 py-2">
          <form class="email-compose-form">
            <div class="email-compose-to d-flex justify-content-between align-items-center">
              <label class="fw-medium mb-1 text-body-secondary" for="emailContacts">To:</label>
              <div class="select2-primary border-0 shadow-none flex-grow-1 mx-2">
                <select class="select2 select-email-contacts form-select" id="emailContacts" name="emailContacts" multiple>
                  <option data-avatar="1.png" value="Jane Foster">Jane Foster</option>
                  <option data-avatar="3.png" value="Donna Frank">Donna Frank</option>
                  <option data-avatar="5.png" value="Gabrielle Robertson">Gabrielle Robertson</option>
                  <option data-avatar="7.png" value="Lori Spears">Lori Spears</option>
                  <option data-avatar="9.png" value="Sandy Vega">Sandy Vega</option>
                  <option data-avatar="11.png" value="Cheryl May">Cheryl May</option>
                </select>
              </div>
              <div class="email-compose-toggle-wrapper">
                <a class="email-compose-toggle-cc text-body" href="javascript:void(0);">Cc |</a>
                <a class="email-compose-toggle-bcc text-body" href="javascript:void(0);">Bcc</a>
              </div>
            </div>

            <div class="email-compose-cc d-none">
              <hr class="mx-n5 my-0" />
              <div class="d-flex align-items-center">
                <label for="email-cc" class="fw-medium text-body-secondary">Cc:</label>
                <input type="text" class="form-control border-0 shadow-none flex-grow-1 mx-2" id="email-cc" placeholder="someone&#64;email.com" />
              </div>
            </div>
            <div class="email-compose-bcc d-none">
              <hr class="mx-n5 my-0" />
              <div class="d-flex align-items-center">
                <label for="email-bcc" class="fw-medium text-body-secondary">Bcc:</label>
                <input type="text" class="form-control border-0 shadow-none flex-grow-1 mx-2" id="email-bcc" placeholder="someone&#64;email.com" />
              </div>
            </div>
            <hr class="mx-n5 my-0" />
            <div class="email-compose-subject d-flex align-items-center">
              <label for="email-subject" class="fw-medium text-body-secondary">Subject:</label>
              <input type="text" class="form-control border-0 shadow-none flex-grow-1 mx-2" id="email-subject" />
            </div>
            <div class="email-compose-message">
              <hr class="mx-n5 my-0" />
              <div class="d-flex justify-content-end mx-n1">
                <div class="email-editor-toolbar border-0 w-100 px-0">
                  <span class="ql-formats me-0">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                    <button class="ql-link"></button>
                    <button class="ql-image"></button>
                  </span>
                </div>
              </div>
              <hr class="mx-n5 my-0" />
              <div class="email-editor border-0 mx-n5"></div>
            </div>
            <hr class="mx-n5 mt-0 mb-2" />
            <div class="email-compose-actions d-flex justify-content-between align-items-center my-4">
              <div class="d-flex align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-primary dropdown-toggle email-send-btn" data-bs-toggle="dropdown" aria-expanded="false">Send <i class="icon-base ti tabler-send icon-xs scaleX-n1-rtl ms-2"></i></button>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="javascript:void(0);">Schedule send</a></li>
                    <li><a class="dropdown-item" href="javascript:void(0);">Save draft</a></li>
                  </ul>
                </div>
                <label for="attach-file" class="btn btn-sm btn-icon btn-text-secondary rounded-pill ms-4"><i class="icon-base ti tabler-paperclip icon-20px cursor-pointer"></i></label>
                <input type="file" name="file-input" class="d-none" id="attach-file" />
              </div>
              <div class="d-flex align-items-center gap-2">
                <div class="dropdown">
                  <button class="btn btn-sm btn-icon btn-text-secondary rounded-pill p-0" type="button" id="dropdownMoreActions" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="icon-base ti tabler-dots-vertical icon-20px"></i>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMoreActions">
                    <li><button type="button" class="dropdown-item">Add Label</button></li>
                    <li><button type="button" class="dropdown-item">Plain text mode</button></li>
                    <li>
                      <hr class="dropdown-divider" />
                    </li>
                    <li><button type="button" class="dropdown-item">Print</button></li>
                    <li><button type="button" class="dropdown-item">Check Spelling</button></li>
                  </ul>
                </div>
                <button type="reset" class="btn btn-sm btn-icon btn-text-secondary rounded-pill" data-bs-dismiss="modal" aria-label="Close"><i class="icon-base ti tabler-trash icon-20px"></i></button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Compose Email -->
</div>