@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}


<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords"
          content="wrappixel, admin dashboard, html css dashboard, web dashboard, bootstrap 5 admin, bootstrap 5, css3 dashboard, bootstrap 5 dashboard, Matrix lite admin bootstrap 5 dashboard, frontend, responsive bootstrap 5 admin template, Matrix admin lite design, Matrix admin lite dashboard bootstrap 5 dashboard template" />
    <meta name="description"
          content="Matrix Admin Lite Free Version is powerful and clean admin dashboard template, inpired from Bootstrap Framework" />
    <meta name="robots" content="noindex,nofollow" />
    <title>Matrix Admin Lite Free Versions Template by WrapPixel</title>
    <!-- Favicon icon -->
    <link rel="icon"
          type="image/png"
          sizes="16x16"
          href="/assets/images/favicon.png" />
    <!-- Custom CSS -->
    <link href="/assets/libs/fullcalendar/dist/fullcalendar.min.css"
          rel="stylesheet" />
    <link href="/assets/extra-libs/calendar/calendar.css" rel="stylesheet" />
    <link href="/dist/css/style.min.css" rel="stylesheet" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper"
         data-layout="vertical"
         data-navbarbg="skin5"
         data-sidebartype="full"
         data-sidebar-position="absolute"
         data-header-position="absolute"
         data-boxed-layout="full">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <header class="topbar" data-navbarbg="skin5">
            <nav class="navbar top-navbar navbar-expand-md navbar-dark">
                <div class="navbar-header" data-logobg="skin5">
                    <!-- ============================================================== -->
                    <!-- Logo -->
                    <!-- ============================================================== -->
                    <a class="navbar-brand" href="index.html">
                        <!-- Logo icon -->
                        <b class="logo-icon ps-2">
                            <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                            <!-- Dark Logo icon -->
                            <img src="/assets/images/logo-icon.png"
                                 alt="homepage"
                                 class="light-logo"
                                 width="25" />
                        </b>
                        <!--End Logo icon -->
                        <!-- Logo text -->
                        <span class="logo-text ms-2">
                            <!-- dark Logo text -->
                            <img src="/assets/images/logo-text.png"
                                 alt="homepage"
                                 class="light-logo" />
                        </span>
                        <!-- Logo icon -->
                        <!-- <b class="logo-icon"> -->
                        <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
                        <!-- Dark Logo icon -->
                        <!-- <img src="/assets/images/logo-text.png" alt="homepage" class="light-logo" /> -->
                        <!-- </b> -->
                        <!--End Logo icon -->
                    </a>
                    <!-- ============================================================== -->
                    <!-- End Logo -->
                    <!-- ============================================================== -->
                    <!-- ============================================================== -->
                    <!-- Toggle which is visible on mobile only -->
                    <!-- ============================================================== -->
                    <a class="nav-toggler waves-effect waves-light d-block d-md-none"
                       href="javascript:void(0)">
                        <i class="ti-menu ti-close"></i>
                    </a>
                </div>
                <!-- ============================================================== -->
                <!-- End Logo -->
                <!-- ============================================================== -->
                <div class="navbar-collapse collapse"
                     id="navbarSupportedContent"
                     data-navbarbg="skin5">
                    <!-- ============================================================== -->
                    <!-- toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav float-start me-auto">
                        <li class="nav-item d-none d-lg-block">
                            <a class="nav-link sidebartoggler waves-effect waves-light"
                               href="javascript:void(0)"
                               data-sidebartype="mini-sidebar">
                                <i class="mdi mdi-menu font-24"></i>
                            </a>
                        </li>
                        <!-- ============================================================== -->
                        <!-- create new -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle"
                               href="#"
                               id="navbarDropdown"
                               role="button"
                               data-bs-toggle="dropdown"
                               aria-expanded="false">
                                <span class="d-none d-md-block">
                                    Create New <i class="fa fa-angle-down"></i>
                                </span>
                                <span class="d-block d-md-none">
                                    <i class="fa fa-plus"></i>
                                </span>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><hr class="dropdown-divider" /></li>
                                <li>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </li>
                            </ul>
                        </li>
                        <!-- ============================================================== -->
                        <!-- Search -->
                        <!-- ============================================================== -->
                        <li class="nav-item search-box">
                            <a class="nav-link waves-effect waves-dark"
                               href="javascript:void(0)">
                                <i class="mdi mdi-magnify fs-4"></i>
                            </a>
                            <form class="app-search position-absolute">
                                <input type="text"
                                       class="form-control"
                                       placeholder="Search &amp; enter" />
                                <a class="srh-btn"><i class="mdi mdi-window-close"></i></a>
                            </form>
                        </li>
                    </ul>
                    <!-- ============================================================== -->
                    <!-- Right side toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav float-end">
                        <!-- ============================================================== -->
                        <!-- Comment -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle"
                               href="#"
                               id="navbarDropdown"
                               role="button"
                               data-bs-toggle="dropdown"
                               aria-expanded="false">
                                <i class="mdi mdi-bell font-24"></i>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><hr class="dropdown-divider" /></li>
                                <li>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </li>
                            </ul>
                        </li>
                        <!-- ============================================================== -->
                        <!-- End Comment -->
                        <!-- ============================================================== -->
                        <!-- ============================================================== -->
                        <!-- Messages -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle waves-effect waves-dark"
                               href="#"
                               id="2"
                               role="button"
                               data-bs-toggle="dropdown"
                               aria-expanded="false">
                                <i class="font-24 mdi mdi-comment-processing"></i>
                            </a>
                            <ul class="
                    dropdown-menu dropdown-menu-end
                    mailbox
                    animated
                    bounceInDown
                  "
                                aria-labelledby="2">
                                <ul class="list-style-none">
                                    <li>
                                        <div class="">
                                            <!-- Message -->
                                            <a href="javascript:void(0)" class="link border-top">
                                                <div class="d-flex no-block align-items-center p-10">
                                                    <span class="
                                btn btn-success btn-circle
                                d-flex
                                align-items-center
                                justify-content-center
                              ">
                                                        <i class="mdi mdi-calendar text-white fs-4"></i>
                                                    </span>
                                                    <div class="ms-2">
                                                        <h5 class="mb-0">Event today</h5>
                                                        <span class="mail-desc">Just a reminder that event</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="javascript:void(0)" class="link border-top">
                                                <div class="d-flex no-block align-items-center p-10">
                                                    <span class="
                                btn btn-info btn-circle
                                d-flex
                                align-items-center
                                justify-content-center
                              ">
                                                        <i class="mdi mdi-settings fs-4"></i>
                                                    </span>
                                                    <div class="ms-2">
                                                        <h5 class="mb-0">Settings</h5>
                                                        <span class="mail-desc">You can customize this template</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="javascript:void(0)" class="link border-top">
                                                <div class="d-flex no-block align-items-center p-10">
                                                    <span class="
                                btn btn-primary btn-circle
                                d-flex
                                align-items-center
                                justify-content-center
                              ">
                                                        <i class="mdi mdi-account fs-4"></i>
                                                    </span>
                                                    <div class="ms-2">
                                                        <h5 class="mb-0">Pavan kumar</h5>
                                                        <span class="mail-desc">Just see the my admin!</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="javascript:void(0)" class="link border-top">
                                                <div class="d-flex no-block align-items-center p-10">
                                                    <span class="
                                btn btn-danger btn-circle
                                d-flex
                                align-items-center
                                justify-content-center
                              ">
                                                        <i class="mdi mdi-link fs-4"></i>
                                                    </span>
                                                    <div class="ms-2">
                                                        <h5 class="mb-0">Luanch Admin</h5>
                                                        <span class="mail-desc">Just see the my new admin!</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </ul>
                        </li>
                        <!-- ============================================================== -->
                        <!-- End Messages -->
                        <!-- ============================================================== -->
                        <!-- ============================================================== -->
                        <!-- User profile and search -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="
                    nav-link
                    dropdown-toggle
                    text-muted
                    waves-effect waves-dark
                    pro-pic
                  "
                               href="#"
                               id="navbarDropdown"
                               role="button"
                               data-bs-toggle="dropdown"
                               aria-expanded="false">
                                <img src="/assets/images/users/1.jpg"
                                     alt="user"
                                     class="rounded-circle"
                                     width="31" />
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end user-dd animated"
                                aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="javascript:void(0)"><i class="mdi mdi-account me-1 ms-1"></i> My Profile</a>
                                <a class="dropdown-item" href="javascript:void(0)"><i class="mdi mdi-wallet me-1 ms-1"></i> My Balance</a>
                                <a class="dropdown-item" href="javascript:void(0)"><i class="mdi mdi-email me-1 ms-1"></i> Inbox</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:void(0)">
                                    <i class="mdi mdi-settings me-1 ms-1"></i> Account
                                    Setting
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="javascript:void(0)"><i class="fa fa-power-off me-1 ms-1"></i> Logout</a>
                                <div class="dropdown-divider"></div>
                                <div class="ps-4 p-10">
                                    <a href="javascript:void(0)"
                                       class="btn btn-sm btn-success btn-rounded text-white">View Profile</a>
                                </div>
                            </ul>
                        </li>
                        <!-- ============================================================== -->
                        <!-- User profile and search -->
                        <!-- ============================================================== -->
                    </ul>
                </div>
            </nav>
        </header>
        <!-- ============================================================== -->
        <!-- End Topbar header -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <aside class="left-sidebar" data-sidebarbg="skin5">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav" class="pt-4">
                        <li class="sidebar-item">
                            <a class="sidebar-link waves-effect waves-dark sidebar-link"
                               href="index.html"
                               aria-expanded="false">
                                <i class="mdi mdi-view-dashboard"></i><span class="hide-menu">Dashboard</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link waves-effect waves-dark sidebar-link"
                               href="charts.html"
                               aria-expanded="false">
                                <i class="mdi mdi-chart-bar"></i><span class="hide-menu">Charts</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link waves-effect waves-dark sidebar-link"
                               href="widgets.html"
                               aria-expanded="false">
                                <i class="mdi mdi-chart-bubble"></i><span class="hide-menu">Widgets</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link waves-effect waves-dark sidebar-link"
                               href="tables.html"
                               aria-expanded="false">
                                <i class="mdi mdi-border-inside"></i><span class="hide-menu">Tables</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link waves-effect waves-dark sidebar-link"
                               href="grid.html"
                               aria-expanded="false">
                                <i class="mdi mdi-blur-linear"></i><span class="hide-menu">Full Width</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link has-arrow waves-effect waves-dark"
                               href="javascript:void(0)"
                               aria-expanded="false">
                                <i class="mdi mdi-receipt"></i><span class="hide-menu">Forms </span>
                            </a>
                            <ul aria-expanded="false" class="collapse first-level">
                                <li class="sidebar-item">
                                    <a href="form-basic.html" class="sidebar-link">
                                        <i class="mdi mdi-note-outline"></i><span class="hide-menu"> Form Basic </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="form-wizard.html" class="sidebar-link">
                                        <i class="mdi mdi-note-plus"></i><span class="hide-menu"> Form Wizard </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link waves-effect waves-dark sidebar-link"
                               href="pages-buttons.html"
                               aria-expanded="false">
                                <i class="mdi mdi-relative-scale"></i><span class="hide-menu">Buttons</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link has-arrow waves-effect waves-dark"
                               href="javascript:void(0)"
                               aria-expanded="false">
                                <i class="mdi mdi-face"></i><span class="hide-menu">Icons </span>
                            </a>
                            <ul aria-expanded="false" class="collapse first-level">
                                <li class="sidebar-item">
                                    <a href="icon-material.html" class="sidebar-link">
                                        <i class="mdi mdi-emoticon"></i><span class="hide-menu"> Material Icons </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="icon-fontawesome.html" class="sidebar-link">
                                        <i class="mdi mdi-emoticon-cool"></i><span class="hide-menu"> Font Awesome Icons </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link waves-effect waves-dark sidebar-link"
                               href="pages-elements.html"
                               aria-expanded="false">
                                <i class="mdi mdi-pencil"></i><span class="hide-menu">Elements</span>
                            </a>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link has-arrow waves-effect waves-dark"
                               href="javascript:void(0)"
                               aria-expanded="false">
                                <i class="mdi mdi-move-resize-variant"></i><span class="hide-menu">Addons </span>
                            </a>
                            <ul aria-expanded="false" class="collapse first-level">
                                <li class="sidebar-item">
                                    <a href="index2.html" class="sidebar-link">
                                        <i class="mdi mdi-view-dashboard"></i><span class="hide-menu"> Dashboard-2 </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="pages-gallery.html" class="sidebar-link">
                                        <i class="mdi mdi-multiplication-box"></i><span class="hide-menu"> Gallery </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="pages-calendar.html" class="sidebar-link">
                                        <i class="mdi mdi-calendar-check"></i><span class="hide-menu"> Calendar </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="pages-invoice.html" class="sidebar-link">
                                        <i class="mdi mdi-bulletin-board"></i><span class="hide-menu"> Invoice </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="pages-chat.html" class="sidebar-link">
                                        <i class="mdi mdi-message-outline"></i><span class="hide-menu"> Chat Option </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link has-arrow waves-effect waves-dark"
                               href="javascript:void(0)"
                               aria-expanded="false">
                                <i class="mdi mdi-account-key"></i><span class="hide-menu">Authentication </span>
                            </a>
                            <ul aria-expanded="false" class="collapse first-level">
                                <li class="sidebar-item">
                                    <a href="authentication-login.html" class="sidebar-link">
                                        <i class="mdi mdi-all-inclusive"></i><span class="hide-menu"> Login </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="authentication-register.html" class="sidebar-link">
                                        <i class="mdi mdi-all-inclusive"></i><span class="hide-menu"> Register </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-item">
                            <a class="sidebar-link has-arrow waves-effect waves-dark"
                               href="javascript:void(0)"
                               aria-expanded="false">
                                <i class="mdi mdi-alert"></i><span class="hide-menu">Errors </span>
                            </a>
                            <ul aria-expanded="false" class="collapse first-level">
                                <li class="sidebar-item">
                                    <a href="error-403.html" class="sidebar-link">
                                        <i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 403 </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="error-404.html" class="sidebar-link">
                                        <i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 404 </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="error-405.html" class="sidebar-link">
                                        <i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 405 </span>
                                    </a>
                                </li>
                                <li class="sidebar-item">
                                    <a href="error-500.html" class="sidebar-link">
                                        <i class="mdi mdi-alert-octagon"></i><span class="hide-menu"> Error 500 </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-item p-3">
                            <a href="https://github.com/wrappixel/matrix-admin-bt5"
                               target="_blank"
                               class="
                    w-100
                    btn btn-cyan
                    d-flex
                    align-items-center
                    text-white
                  ">
                                <i class="mdi mdi-cloud-download font-20 me-2"></i>Download
                                Free
                            </a>
                        </li>
                    </ul>
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </aside>
        <!-- ============================================================== -->
        <!-- End Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-12 d-flex no-block align-items-center">
                        <h4 class="page-title">Dashboard-2</h4>
                        <div class="ms-auto text-end">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">
                                        Library
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- End Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <div class="row">
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                        <div class="card card-hover">
                            <div class="box bg-cyan text-center">
                                <h1 class="font-light text-white">
                                    <i class="mdi mdi-view-dashboard"></i>
                                </h1>
                                <h6 class="text-white">Dashboard</h6>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                        <div class="card card-hover">
                            <div class="box bg-success text-center">
                                <h1 class="font-light text-white">
                                    <i class="mdi mdi-chart-areaspline"></i>
                                </h1>
                                <h6 class="text-white">Charts</h6>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                        <div class="card card-hover">
                            <div class="box bg-warning text-center">
                                <h1 class="font-light text-white">
                                    <i class="mdi mdi-collage"></i>
                                </h1>
                                <h6 class="text-white">Widgets</h6>
                            </div>
                        </div>
                    </div>
                    <!-- Column -->
                    <div class="col-md-6 col-lg-3">
                        <div class="card card-hover">
                            <div class="box bg-danger text-center">
                                <h1 class="font-light text-white">
                                    <i class="mdi mdi-border-outside"></i>
                                </h1>
                                <h6 class="text-white">Tables</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Latest Posts</h4>
                            </div>
                            <div class="comment-widgets scrollable">
                                <!-- Comment Row -->
                                <div class="d-flex flex-row comment-row mt-0">
                                    <div class="p-2">
                                        <img src="/assets/images/users/1.jpg"
                                             alt="user"
                                             width="50"
                                             class="rounded-circle" />
                                    </div>
                                    <div class="comment-text w-100">
                                        <h6 class="font-medium">James Anderson</h6>
                                        <span class="mb-3 d-block">
                                            Lorem Ipsum is simply dummy text of the printing and
                                            type setting industry.
                                        </span>
                                        <div class="comment-footer">
                                            <span class="text-muted float-end">April 14, 2021</span>
                                            <button type="button"
                                                    class="btn btn-cyan btn-sm text-white">
                                                Edit
                                            </button>
                                            <button type="button"
                                                    class="btn btn-success btn-sm text-white">
                                                Publish
                                            </button>
                                            <button type="button"
                                                    class="btn btn-danger btn-sm text-white">
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Comment Row -->
                                <div class="d-flex flex-row comment-row">
                                    <div class="p-2">
                                        <img src="/assets/images/users/4.jpg"
                                             alt="user"
                                             width="50"
                                             class="rounded-circle" />
                                    </div>
                                    <div class="comment-text active w-100">
                                        <h6 class="font-medium">Michael Jorden</h6>
                                        <span class="mb-3 d-block">
                                            Lorem Ipsum is simply dummy text of the printing and
                                            type setting industry.
                                        </span>
                                        <div class="comment-footer">
                                            <span class="text-muted float-end">May 10, 2021</span>
                                            <button type="button"
                                                    class="btn btn-cyan btn-sm text-white">
                                                Edit
                                            </button>
                                            <button type="button"
                                                    class="btn btn-success btn-sm text-white">
                                                Publish
                                            </button>
                                            <button type="button"
                                                    class="btn btn-danger btn-sm text-white">
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!-- Comment Row -->
                                <div class="d-flex flex-row comment-row">
                                    <div class="p-2">
                                        <img src="/assets/images/users/5.jpg"
                                             alt="user"
                                             width="50"
                                             class="rounded-circle" />
                                    </div>
                                    <div class="comment-text w-100">
                                        <h6 class="font-medium">Johnathan Doeting</h6>
                                        <span class="mb-3 d-block">
                                            Lorem Ipsum is simply dummy text of the printing and
                                            type setting industry.
                                        </span>
                                        <div class="comment-footer">
                                            <span class="text-muted float-end">August 1, 2021</span>
                                            <button type="button"
                                                    class="btn btn-cyan btn-sm text-white">
                                                Edit
                                            </button>
                                            <button type="button"
                                                    class="btn btn-success btn-sm text-white">
                                                Publish
                                            </button>
                                            <button type="button"
                                                    class="btn btn-danger btn-sm text-white">
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Card -->
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">To Do List</h4>
                                <div class="todo-widget scrollable" style="height: 450px">
                                    <ul class="list-task todo-list list-group mb-0"
                                        data-role="tasklist">
                                        <li class="list-group-item todo-item" data-role="task">
                                            <div class="form-check">
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       id="customCheck" />
                                                <label class="form-check-label mb-0 w-100 todo-label"
                                                       for="customCheck">
                                                    <span class="todo-desc fw-normal">
                                                        Lorem Ipsum is simply dummy text of the printing
                                                        and typesetting industry.
                                                    </span>
                                                    <span class="badge rounded-pill bg-danger float-end">Today</span>
                                                </label>
                                            </div>
                                            <ul class="list-style-none assignedto">
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/1.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Steave" />
                                                </li>
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/2.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Jessica" />
                                                </li>
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/3.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Priyanka" />
                                                </li>
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/4.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Selina" />
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="list-group-item todo-item" data-role="task">
                                            <div class="form-check">
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       id="customCheck1" />
                                                <label class="form-check-label mb-0 w-100 todo-label"
                                                       for="customCheck1">
                                                    <span class="todo-desc fw-normal">
                                                        Lorem Ipsum is simply dummy text of the
                                                        printing
                                                    </span><span class="badge rounded-pill bg-primary float-end">
                                                        1 week
                                                    </span>
                                                </label>
                                            </div>
                                            <div class="item-date">26 jun 2021</div>
                                        </li>
                                        <li class="list-group-item todo-item" data-role="task">
                                            <div class="form-check">
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       id="customCheck2" />
                                                <label class="form-check-label mb-0 w-100 todo-label"
                                                       for="customCheck2">
                                                    <span class="todo-desc fw-normal">Give Purchase report to</span>
                                                    <span class="badge rounded-pill bg-info float-end">Yesterday</span>
                                                </label>
                                            </div>
                                            <ul class="list-style-none assignedto">
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/3.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Priyanka" />
                                                </li>
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/4.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Selina" />
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="list-group-item todo-item" data-role="task">
                                            <div class="form-check">
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       id="customCheck3" />
                                                <label class="form-check-label mb-0 w-100 todo-label"
                                                       for="customCheck3">
                                                    <span class="todo-desc fw-normal">
                                                        Lorem Ipsum is simply dummy text of the printing
                                                    </span>
                                                    <span class="badge rounded-pill bg-warning float-end">2 weeks</span>
                                                </label>
                                            </div>
                                            <div class="item-date">26 jun 2021</div>
                                        </li>
                                        <li class="list-group-item todo-item" data-role="task">
                                            <div class="form-check">
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       id="customCheck4" />
                                                <label class="form-check-label mb-0 w-100 todo-label"
                                                       for="customCheck4">
                                                    <span class="todo-desc fw-normal">Give Purchase report to</span>
                                                    <span class="badge rounded-pill bg-info float-end">Yesterday</span>
                                                </label>
                                            </div>
                                            <ul class="list-style-none assignedto">
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/3.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Priyanka" />
                                                </li>
                                                <li class="assignee">
                                                    <img class="rounded-circle"
                                                         width="40"
                                                         src="/assets/images/users/4.jpg"
                                                         alt="user"
                                                         data-toggle="tooltip"
                                                         data-placement="top"
                                                         title=""
                                                         data-original-title="Selina" />
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <!-- card -->
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-0">Progress Box</h4>
                                <div class="mt-3">
                                    <div class="d-flex no-block align-items-center">
                                        <span>81% Clicks</span>
                                        <div class="ms-auto">
                                            <span>125</span>
                                        </div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped"
                                             role="progressbar"
                                             style="width: 81%"
                                             aria-valuenow="10"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex no-block align-items-center mt-4">
                                        <span>72% Uniquie Clicks</span>
                                        <div class="ms-auto">
                                            <span>120</span>
                                        </div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-success"
                                             role="progressbar"
                                             style="width: 72%"
                                             aria-valuenow="25"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex no-block align-items-center mt-4">
                                        <span>53% Impressions</span>
                                        <div class="ms-auto">
                                            <span>785</span>
                                        </div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-info"
                                             role="progressbar"
                                             style="width: 53%"
                                             aria-valuenow="50"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex no-block align-items-center mt-4">
                                        <span>3% Online Users</span>
                                        <div class="ms-auto">
                                            <span>8</span>
                                        </div>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-danger"
                                             role="progressbar"
                                             style="width: 3%"
                                             aria-valuenow="75"
                                             aria-valuemin="0"
                                             aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- card new -->
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-0">News Updates</h4>
                            </div>
                            <ul class="list-style-none">
                                <li class="d-flex no-block card-body">
                                    <i class="mdi mdi-check-circle fs-4 w-30px mt-1"></i>
                                    <div>
                                        <a href="#" class="mb-0 font-medium p-0">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing
                                            elit.
                                        </a>
                                        <span class="text-muted">dolor sit amet, consectetur adipiscing</span>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="tetx-right">
                                            <h5 class="text-muted mb-0">20</h5>
                                            <span class="text-muted font-16">Jan</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="d-flex no-block card-body border-top">
                                    <i class="mdi mdi-gift fs-4 w-30px mt-1"></i>
                                    <div>
                                        <a href="#" class="mb-0 font-medium p-0">Congratulation Maruti, Happy Birthday</a>
                                        <span class="text-muted">many many happy returns of the day</span>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="tetx-right">
                                            <h5 class="text-muted mb-0">11</h5>
                                            <span class="text-muted font-16">Jan</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="d-flex no-block card-body border-top">
                                    <i class="mdi mdi-plus fs-4 w-30px mt-1"></i>
                                    <div>
                                        <a href="#" class="mb-0 font-medium p-0">Maruti is a Responsive Admin theme</a>
                                        <span class="text-muted">But already everything was solved. It will .</span>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="tetx-right">
                                            <h5 class="text-muted mb-0">19</h5>
                                            <span class="text-muted font-16">Jan</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="d-flex no-block card-body border-top">
                                    <i class="mdi mdi-leaf fs-4 w-30px mt-1"></i>
                                    <div>
                                        <a href="#" class="mb-0 font-medium p-0">Envato approved Maruti Admin template</a>
                                        <span class="text-muted">i am very happy to approved by TF</span>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="tetx-right">
                                            <h5 class="text-muted mb-0">20</h5>
                                            <span class="text-muted font-16">Jan</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="d-flex no-block card-body border-top">
                                    <i class="mdi mdi-comment-question-outline fs-4 w-30px mt-1"></i>
                                    <div>
                                        <a href="#" class="mb-0 font-medium p-0">
                                            I am alwayse here if you have any question
                                        </a>
                                        <span class="text-muted">we glad that you choose our template</span>
                                    </div>
                                    <div class="ms-auto">
                                        <div class="tetx-right">
                                            <h5 class="text-muted mb-0">15</h5>
                                            <span class="text-muted font-16">Jan</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <h5 class="card-title">Calender</h5>
                        <div class="card">
                            <div class="">
                                <div class="row">
                                    <div class="col-lg-3 border-right pe-0">
                                        <div class="card-body border-bottom">
                                            <h4 class="card-title mt-2">Drag & Drop Event</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div id="calendar-events" class="">
                                                        <div class="calendar-events mb-3"
                                                             data-class="bg-info">
                                                            <i class="fa fa-circle text-info me-2"></i>Event
                                                            One
                                                        </div>
                                                        <div class="calendar-events mb-3"
                                                             data-class="bg-success">
                                                            <i class="fa fa-circle text-success me-2"></i>
                                                            Event Two
                                                        </div>
                                                        <div class="calendar-events mb-3"
                                                             data-class="bg-danger">
                                                            <i class="fa fa-circle text-danger me-2"></i>Event Three
                                                        </div>
                                                        <div class="calendar-events mb-3"
                                                             data-class="bg-warning">
                                                            <i class="fa fa-circle text-warning me-2"></i>Event Four
                                                        </div>
                                                    </div>
                                                    <!-- checkbox -->
                                                    <div class="form-check">
                                                        <input type="checkbox"
                                                               class="form-check-input"
                                                               id="drop-remove" />
                                                        <label class="form-check-label" for="drop-remove">Remove after drop</label>
                                                    </div>
                                                    <a href="javascript:void(0)"
                                                       data-toggle="modal"
                                                       data-target="#add-new-event"
                                                       class="
                                d-flex
                                align-items-center
                                justify-content-center
                                btn
                                mt-3
                                btn-info
                                d-block
                                waves-effect waves-light
                              ">
                                                        <i class="mdi mdi-plus fs-4 me-1"></i> Add New
                                                        Event
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="card-body b-l calender-sidebar">
                                            <div id="calendar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- BEGIN MODAL -->
                <div class="modal none-border" id="my-event">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title"><strong>Add Event</strong></h4>
                                <button type="button"
                                        class="close"
                                        data-dismiss="modal"
                                        aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body"></div>
                            <div class="modal-footer">
                                <button type="button"
                                        class="btn btn-secondary waves-effect"
                                        data-dismiss="modal">
                                    Close
                                </button>
                                <button type="button"
                                        class="btn btn-success save-event waves-effect waves-light">
                                    Create event
                                </button>
                                <button type="button"
                                        class="btn btn-danger delete-event waves-effect waves-light"
                                        data-dismiss="modal">
                                    Delete
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal Add Category -->
                <div class="modal fade none-border" id="add-new-event">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title"><strong>Add</strong> a category</h4>
                                <button type="button"
                                        class="close"
                                        data-dismiss="modal"
                                        aria-hidden="true">
                                    &times;
                                </button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="control-label">Category Name</label>
                                            <input class="form-control form-white"
                                                   placeholder="Enter name"
                                                   type="text"
                                                   name="category-name" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="control-label">Choose Category Color</label>
                                            <select class="form-select shadow-none form-white"
                                                    data-placeholder="Choose a color."
                                                    name="category-color">
                                                <option value="success">Success</option>
                                                <option value="danger">Danger</option>
                                                <option value="info">Info</option>
                                                <option value="primary">Primary</option>
                                                <option value="warning">Warning</option>
                                                <option value="inverse">Inverse</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button"
                                        class="
                      btn btn-danger
                      waves-effect waves-light
                      save-category
                    "
                                        data-dismiss="modal">
                                    Save
                                </button>
                                <button type="button"
                                        class="btn btn-secondary waves-effect"
                                        data-dismiss="modal">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END MODAL -->
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Right sidebar -->
                <!-- ============================================================== -->
                <!-- .right-sidebar -->
                <!-- ============================================================== -->
                <!-- End Right sidebar -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->
            <footer class="footer text-center">
                All Rights Reserved by Matrix-admin. Designed and Developed by
                <a href="https://www.wrappixel.com">WrapPixel</a>.
            </footer>
            <!-- ============================================================== -->
            <!-- End footer -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Wrapper -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="/dist/js/jquery.ui.touch-punch-improved.js"></script>
    <script src="/dist/js/jquery-ui.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="/dist/js/custom.min.js"></script>
    <!-- this page js -->
    <script src="/assets/libs/moment/min/moment.min.js"></script>
    <script src="/assets/libs/fullcalendar/dist/fullcalendar.min.js"></script>
    <script src="/dist/js/pages/calendar/cal-init.js"></script>
</body>
</html>
