<!DOCTYPE html>
<html lang="en" dir="ltr" data-startbar="light" data-bs-theme="light">

<head>
    <meta charset="utf-8" />
            <title>Dashboard | The Perfect Vape</title>
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
            <meta content="" name="author" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <!-- App favicon -->
            <link rel="shortcut icon" href="assets/images/favicon.ico">
     <!-- App css -->
     <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
     <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <!-- Top Bar Start -->
    <div class="topbar d-print-none">
        <div class="container-fluid">
            <nav class="topbar-custom d-flex justify-content-between" id="topbar-custom">    
        

                <ul class="topbar-item list-unstyled d-inline-flex align-items-center mb-0">                        
                    <li>
                        <button class="nav-link mobile-menu-btn nav-icon" id="togglemenu">
                            <i class="iconoir-menu"></i>
                        </button>
                    </li> 
                    <li class="mx-2 welcome-text">
                        <h5 class="mb-0 fw-semibold text-truncate">Welcome to The Perfect Vape!</h5>
                        <!-- <h6 class="mb-0 fw-normal text-muted text-truncate fs-14">Here's your overview this week.</h6> -->
                    </li>                   
                </ul>
                <ul class="topbar-item list-unstyled d-inline-flex align-items-center mb-0">
                    <li class="hide-phone app-search">
                        <form role="search" action="#" method="get">
                            <input type="search" name="search" class="form-control top-search mb-0"
                                placeholder="Search here...">
                            <button type="submit"><i class="iconoir-search"></i></button>
                        </form>
                    </li>     
                    <li class="topbar-item">
                        <a class="nav-link nav-icon" href="javascript:void(0);" id="light-dark-mode">
                            <i class="iconoir-half-moon dark-mode"></i>
                            <i class="iconoir-sun-light light-mode"></i>
                        </a>                    
                    </li>
    
                   
    
                    <li class="dropdown topbar-item">
                        <a class="nav-link dropdown-toggle arrow-none nav-icon" data-bs-toggle="dropdown" href="#"
                            role="button" aria-haspopup="false" aria-expanded="false" data-bs-offset="0,19">
                            <img src="assets/images/users/avatar-1.jpg" alt="" class="thumb-md rounded-circle">
                        </a>
                        <div class="dropdown-menu dropdown-menu-end py-0">
                            <div class="d-flex align-items-center dropdown-item py-2 bg-secondary-subtle">
                                <div class="flex-shrink-0">
                                    <img src="assets/images/users/avatar-1.jpg" alt="" class="thumb-md rounded-circle">
                                </div>
                                <div class="flex-grow-1 ms-2 text-truncate align-self-center">
                                    <h6 class="my-0 fw-medium text-dark fs-13">William Martin</h6>
                                    <small class="text-muted mb-0">Front End Developer</small>
                                </div>
                                <!--end media-body-->
                            </div>
                            <div class="dropdown-divider mt-0"></div>
                            <small class="text-muted px-2 pb-1 d-block">Account</small>
                            <a class="dropdown-item" href="pages-profile.html"><i
                                    class="las la-user fs-18 me-1 align-text-bottom"></i> Profile</a>
                            <a class="dropdown-item" href="pages-faq.html"><i
                                    class="las la-wallet fs-18 me-1 align-text-bottom"></i> Earning</a>
                            <small class="text-muted px-2 py-1 d-block">Settings</small>                        
                            <a class="dropdown-item" href="pages-profile.html"><i
                                    class="las la-cog fs-18 me-1 align-text-bottom"></i>Account Settings</a>
                            <a class="dropdown-item" href="pages-profile.html"><i
                                    class="las la-lock fs-18 me-1 align-text-bottom"></i> Security</a>
                            <a class="dropdown-item" href="pages-faq.html"><i
                                    class="las la-question-circle fs-18 me-1 align-text-bottom"></i> Help Center</a>
                            <div class="dropdown-divider mb-0"></div>
                            <a class="dropdown-item text-danger" href="auth-login.html"><i
                                    class="las la-power-off fs-18 me-1 align-text-bottom"></i> Logout</a>
                        </div>
                    </li>
                </ul>
                <!--end topbar-nav-->
            </nav>
            <!-- end navbar-->
        </div>
    </div>
    <!-- Top Bar End -->

    <!-- leftbar-tab-menu -->
    <div class="startbar d-print-none">
        <!--start brand-->
        <div class="brand">
            <a href="index.php" class="logo">
                <span>
                    <img src="assets/images/logo-sm.png" alt="logo-small" class="logo-sm">
                </span>
                <span class="">
                    <img src="assets/images/logo-light.png" alt="logo-large" class="logo-lg logo-light">
                    <img src="assets/images/logo-dark.png" alt="logo-large" class="logo-lg logo-dark">
                </span>
            </a>
        </div>
        <!--end brand-->
        <!--start startbar-menu-->
        <div class="startbar-menu">
            <div class="startbar-collapse" id="startbarCollapse" data-simplebar>
                <div class="d-flex align-items-start flex-column w-100">
                    <!-- Navigation -->
                    <ul class="navbar-nav mb-auto w-100">
                        <li class="menu-label mt-2">
                            <span>Navigation</span>
                        </li>

                        <!--start nav-item-->
                        <li class="nav-item">
                            <a class="nav-link" href="index.php">
                                <i class="iconoir-report-columns menu-icon"></i>
                                <span>Dashboard</span>
                                <span class="badge text-bg-warning ms-auto">10</span>
                            </a>
                        </li>
                        <!--end nav-item-->

                        <!--start nav-item-->
                        <li class="nav-item">
                            <a class="nav-link" href="products.php">
                                <i class="iconoir-cart-alt menu-icon"></i>                                        
                                <span>Products</span>
                                <span class="badge text-bg-warning ms-auto">08</span>
                            </a>
                        </li>
                        <!--end nav-item-->

                        <!--start nav-item-->
                        <li class="nav-item">
                            <a class="nav-link" href="collections.php">
                                <i class="iconoir-view-grid menu-icon"></i>
                                <span>Collections</span>
                            </a>
                        </li>
                        <!--end nav-item-->

                        <!--start nav-item-->
                        <li class="nav-item">
                            <a class="nav-link" href="customers.php">
                                <i class="iconoir-people-tag menu-icon"></i>
                                <span>Customers</span>
                                <span class="badge text-bg-warning ms-auto">08</span>
                            </a>
                        </li>
                        <!--end nav-item-->

                        <!--start nav-item-->
                        <li class="nav-item">
                            <a class="nav-link" href="orders.php">
                                <i class="iconoir-shopping-bag menu-icon"></i>
                                <span>Orders</span>
                                <span class="badge text-bg-warning ms-auto">08</span>
                            </a>
                        </li>
                        <!--end nav-item-->

                        <!--start nav-item-->
                        <li class="nav-item">
                            <a class="nav-link" href="refunds.php">
                                <i class="iconoir-refresh menu-icon"></i>
                                <span>Refunds</span>
                                <span class="badge text-bg-warning ms-auto">08</span>
                            </a>
                        </li>
                        <!--end nav-item-->

                        <!--start nav-item-->
                        <li class="nav-item">
                            <a class="nav-link" href="blogs.php">
                                <i class="iconoir-page-star menu-icon"></i>
                                <span>Blogs</span>
                                <span class="badge text-bg-warning ms-auto">08</span>
                            </a>
                        </li>
                        <!--end nav-item-->

                    </ul>
                    <!--end navbar-nav--->
                    <div class="update-msg text-center"> 
                        <div
                            class="d-flex justify-content-center align-items-center thumb-lg update-icon-box  rounded-circle mx-auto">
                            <img src="assets/images/extra/party.gif" alt="" class="d-inline-block me-1" height="30">
                        </div>                   
                        <h5 class="mt-3">The Perfect Vape</h5>
                        <p class="mb-0 text-muted">The Perfect Vape is a high quality web applications.</p>
                      
                    </div>
                </div>
            </div>
            <!--end startbar-collapse-->
        </div>
        <!--end startbar-menu-->
    </div>
    <!--end startbar-->
    <div class="startbar-overlay d-print-none"></div>
    <!-- end leftbar-tab-menu-->