Files

2887 lines
142 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html
lang="en"
class=" layout-navbar-fixed layout-menu-fixed layout-compact "
dir="ltr"
data-skin="default"
data-bs-theme="light"
data-assets-path="../../assets/"
data-template="vertical-menu-template">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="robots" content="noindex, nofollow" />
<title>Demo: User View - Pages | Vuexy - Bootstrap Dashboard PRO</title>
<meta name="description" content="" />
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap"
rel="stylesheet" />
<link rel="stylesheet" href="../../assets/vendor/fonts/iconify-icons.css" />
<script src="../../assets/vendor/libs/@algolia/autocomplete-js.js"></script>
<!-- Core CSS -->
<!-- build:css assets/vendor/css/theme.css -->
<link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
<link rel="stylesheet" href="../../assets/vendor/libs/pickr/pickr-themes.css" />
<link rel="stylesheet" href="../../assets/vendor/css/core.css" />
<link rel="stylesheet" href="../../assets/css/demo.css" />
<!-- Vendors CSS -->
<link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<!-- endbuild -->
<link rel="stylesheet" href="../../assets/vendor/libs/sweetalert2/sweetalert2.css" />
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="../../assets/vendor/libs/@form-validation/form-validation.css" />
<!-- Page CSS -->
<link rel="stylesheet" href="../../assets/vendor/css/pages/page-user-view.css" />
<!-- Helpers -->
<script src="../../assets/vendor/js/helpers.js"></script>
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
<script src="../../assets/vendor/js/template-customizer.js"></script>
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="../../assets/js/config.js"></script>
</head>
<body>
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar ">
<div class="layout-container">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu">
<div class="app-brand demo ">
<a href="index.html" class="app-brand-link">
<span class="app-brand-logo demo">
<span class="text-primary">
<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
fill="currentColor" />
<path
opacity="0.06"
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
fill="#161616" />
<path
opacity="0.06"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
fill="#161616" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
fill="currentColor" />
</svg>
</span>
</span>
<span class="app-brand-text demo menu-text fw-bold ms-3">Vuexy</span>
</a>
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
<i class="icon-base ti menu-toggle-icon d-none d-xl-block"></i>
<i class="icon-base ti tabler-x d-block d-xl-none"></i>
</a>
</div>
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
<!-- Dashboards -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-smart-home"></i>
<div data-i18n="Dashboards">Dashboards</div>
<div class="badge text-bg-danger rounded-pill ms-auto">5</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="index.html" class="menu-link">
<div data-i18n="Analytics">Analytics</div>
</a>
</li>
<li class="menu-item">
<a href="dashboards-crm.html" class="menu-link">
<div data-i18n="CRM">CRM</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-dashboard.html" class="menu-link">
<div data-i18n="eCommerce">eCommerce</div>
</a>
</li>
<li class="menu-item">
<a href="app-logistics-dashboard.html" class="menu-link">
<div data-i18n="Logistics">Logistics</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-dashboard.html" class="menu-link">
<div data-i18n="Academy">Academy</div>
</a>
</li>
</ul>
</li>
<!-- Layouts -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-layout-sidebar"></i>
<div data-i18n="Layouts">Layouts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="layouts-collapsed-menu.html" class="menu-link">
<div data-i18n="Collapsed menu">Collapsed menu</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-content-navbar.html" class="menu-link">
<div data-i18n="Content navbar">Content navbar</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-content-navbar-with-sidebar.html" class="menu-link">
<div data-i18n="Content nav + Sidebar">Content nav + Sidebar</div>
</a>
</li>
<li class="menu-item">
<a href="../horizontal-menu-template/" class="menu-link" target="_blank">
<div data-i18n="Horizontal">Horizontal</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-without-menu.html" class="menu-link">
<div data-i18n="Without menu">Without menu</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-without-navbar.html" class="menu-link">
<div data-i18n="Without navbar">Without navbar</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-fluid.html" class="menu-link">
<div data-i18n="Fluid">Fluid</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-container.html" class="menu-link">
<div data-i18n="Container">Container</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-blank.html" class="menu-link">
<div data-i18n="Blank">Blank</div>
</a>
</li>
</ul>
</li>
<!-- Front Pages -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-files"></i>
<div data-i18n="Front Pages">Front Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="../front-pages/landing-page.html" class="menu-link" target="_blank">
<div data-i18n="Landing">Landing</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/pricing-page.html" class="menu-link" target="_blank">
<div data-i18n="Pricing">Pricing</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/payment-page.html" class="menu-link" target="_blank">
<div data-i18n="Payment">Payment</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/checkout-page.html" class="menu-link" target="_blank">
<div data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/help-center-landing.html" class="menu-link" target="_blank">
<div data-i18n="Help Center">Help Center</div>
</a>
</li>
</ul>
</li>
<!-- Apps & Pages -->
<li class="menu-header small">
<span class="menu-header-text" data-i18n="Apps & Pages">Apps &amp; Pages</span>
</li>
<li class="menu-item">
<a href="app-email.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-mail"></i>
<div data-i18n="Email">Email</div>
</a>
</li>
<li class="menu-item">
<a href="app-chat.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-messages"></i>
<div data-i18n="Chat">Chat</div>
</a>
</li>
<li class="menu-item">
<a href="app-calendar.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-calendar"></i>
<div data-i18n="Calendar">Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="app-kanban.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-layout-kanban"></i>
<div data-i18n="Kanban">Kanban</div>
</a>
</li>
<!-- e-commerce-app menu start -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-shopping-cart"></i>
<div data-i18n="eCommerce">eCommerce</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-dashboard.html" class="menu-link">
<div data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Products">Products</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-product-list.html" class="menu-link">
<div data-i18n="Product List">Product List</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-product-add.html" class="menu-link">
<div data-i18n="Add Product">Add Product</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-category-list.html" class="menu-link">
<div data-i18n="Category List">Category List</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Order">Order</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-order-list.html" class="menu-link">
<div data-i18n="Order List">Order List</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-order-details.html" class="menu-link">
<div data-i18n="Order Details">Order Details</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Customer">Customer</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-customer-all.html" class="menu-link">
<div data-i18n="All Customers">All Customers</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Customer Details">Customer Details</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-customer-details-overview.html" class="menu-link">
<div data-i18n="Overview">Overview</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-details-security.html" class="menu-link">
<div data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-details-billing.html" class="menu-link">
<div data-i18n="Address & Billing">Address & Billing</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-details-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="app-ecommerce-manage-reviews.html" class="menu-link">
<div data-i18n="Manage Reviews">Manage Reviews</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-referral.html" class="menu-link">
<div data-i18n="Referrals">Referrals</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Settings">Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-settings-detail.html" class="menu-link">
<div data-i18n="Store Details">Store Details</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-payments.html" class="menu-link">
<div data-i18n="Payments">Payments</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-checkout.html" class="menu-link">
<div data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-shipping.html" class="menu-link">
<div data-i18n="Shipping & Delivery">Shipping & Delivery</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-locations.html" class="menu-link">
<div data-i18n="Locations">Locations</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- e-commerce-app menu end -->
<!-- Academy menu start -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-book"></i>
<div data-i18n="Academy">Academy</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-academy-dashboard.html" class="menu-link">
<div data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-course.html" class="menu-link">
<div data-i18n="My Course">My Course</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-course-details.html" class="menu-link">
<div data-i18n="Course Details">Course Details</div>
</a>
</li>
</ul>
</li>
<!-- Academy menu end -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-truck"></i>
<div data-i18n="Logistics">Logistics</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-logistics-dashboard.html" class="menu-link">
<div data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="app-logistics-fleet.html" class="menu-link">
<div data-i18n="Fleet">Fleet</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-file-dollar"></i>
<div data-i18n="Invoice">Invoice</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-invoice-list.html" class="menu-link">
<div data-i18n="List">List</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-preview.html" class="menu-link">
<div data-i18n="Preview">Preview</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-edit.html" class="menu-link">
<div data-i18n="Edit">Edit</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-add.html" class="menu-link">
<div data-i18n="Add">Add</div>
</a>
</li>
</ul>
</li>
<li class="menu-item active open">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-users"></i>
<div data-i18n="Users">Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-user-list.html" class="menu-link">
<div data-i18n="List">List</div>
</a>
</li>
<li class="menu-item active open">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="View">View</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-user-view-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-security.html" class="menu-link">
<div data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item active">
<a href="app-user-view-billing.html" class="menu-link">
<div data-i18n="Billing & Plans">Billing & Plans</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-connections.html" class="menu-link">
<div data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-settings"></i>
<div data-i18n="Roles & Permissions">Roles & Permissions</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-access-roles.html" class="menu-link">
<div data-i18n="Roles">Roles</div>
</a>
</li>
<li class="menu-item">
<a href="app-access-permission.html" class="menu-link">
<div data-i18n="Permission">Permission</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-file"></i>
<div data-i18n="Pages">Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="User Profile">User Profile</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-profile-user.html" class="menu-link">
<div data-i18n="Profile">Profile</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-teams.html" class="menu-link">
<div data-i18n="Teams">Teams</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-projects.html" class="menu-link">
<div data-i18n="Projects">Projects</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-connections.html" class="menu-link">
<div data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-security.html" class="menu-link">
<div data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-billing.html" class="menu-link">
<div data-i18n="Billing & Plans">Billing & Plans</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-connections.html" class="menu-link">
<div data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="pages-faq.html" class="menu-link">
<div data-i18n="FAQ">FAQ</div>
</a>
</li>
<li class="menu-item">
<a href="pages-pricing.html" class="menu-link">
<div data-i18n="Pricing">Pricing</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Misc">Misc</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-misc-error.html" class="menu-link" target="_blank">
<div data-i18n="Error">Error</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-under-maintenance.html" class="menu-link" target="_blank">
<div data-i18n="Under Maintenance">Under Maintenance</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-comingsoon.html" class="menu-link" target="_blank">
<div data-i18n="Coming Soon">Coming Soon</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-not-authorized.html" class="menu-link" target="_blank">
<div data-i18n="Not Authorized">Not Authorized</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-lock"></i>
<div data-i18n="Authentications">Authentications</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Login">Login</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-login-basic.html" class="menu-link" target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-login-cover.html" class="menu-link" target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Register">Register</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-register-basic.html" class="menu-link" target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-register-cover.html" class="menu-link" target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
<li class="menu-item">
<a href="auth-register-multisteps.html" class="menu-link" target="_blank">
<div data-i18n="Multi-steps">Multi-steps</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Verify Email">Verify Email</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-verify-email-basic.html" class="menu-link" target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-verify-email-cover.html" class="menu-link" target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Reset Password">Reset Password</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-reset-password-basic.html" class="menu-link" target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-reset-password-cover.html" class="menu-link" target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Forgot Password">Forgot Password</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-forgot-password-basic.html" class="menu-link" target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-forgot-password-cover.html" class="menu-link" target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Two Steps">Two Steps</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-two-steps-basic.html" class="menu-link" target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-two-steps-cover.html" class="menu-link" target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-forms"></i>
<div data-i18n="Wizard Examples">Wizard Examples</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="wizard-ex-checkout.html" class="menu-link">
<div data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="wizard-ex-property-listing.html" class="menu-link">
<div data-i18n="Property Listing">Property Listing</div>
</a>
</li>
<li class="menu-item">
<a href="wizard-ex-create-deal.html" class="menu-link">
<div data-i18n="Create Deal">Create Deal</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="modal-examples.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-square"></i>
<div data-i18n="Modal Examples">Modal Examples</div>
</a>
</li>
<!-- Components -->
<li class="menu-header small">
<span class="menu-header-text" data-i18n="Components">Components</span>
</li>
<!-- Cards -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-id"></i>
<div data-i18n="Cards">Cards</div>
<div class="badge text-bg-primary rounded-pill ms-auto">5</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="cards-basic.html" class="menu-link">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="cards-advance.html" class="menu-link">
<div data-i18n="Advance">Advance</div>
</a>
</li>
<li class="menu-item">
<a href="cards-statistics.html" class="menu-link">
<div data-i18n="Statistics">Statistics</div>
</a>
</li>
<li class="menu-item">
<a href="cards-analytics.html" class="menu-link">
<div data-i18n="Analytics">Analytics</div>
</a>
</li>
<li class="menu-item">
<a href="cards-actions.html" class="menu-link">
<div data-i18n="Actions">Actions</div>
</a>
</li>
</ul>
</li>
<!-- User interface -->
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-color-swatch"></i>
<div data-i18n="User interface">User interface</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="ui-accordion.html" class="menu-link">
<div data-i18n="Accordion">Accordion</div>
</a>
</li>
<li class="menu-item">
<a href="ui-alerts.html" class="menu-link">
<div data-i18n="Alerts">Alerts</div>
</a>
</li>
<li class="menu-item">
<a href="ui-badges.html" class="menu-link">
<div data-i18n="Badges">Badges</div>
</a>
</li>
<li class="menu-item">
<a href="ui-buttons.html" class="menu-link">
<div data-i18n="Buttons">Buttons</div>
</a>
</li>
<li class="menu-item">
<a href="ui-carousel.html" class="menu-link">
<div data-i18n="Carousel">Carousel</div>
</a>
</li>
<li class="menu-item">
<a href="ui-collapse.html" class="menu-link">
<div data-i18n="Collapse">Collapse</div>
</a>
</li>
<li class="menu-item">
<a href="ui-dropdowns.html" class="menu-link">
<div data-i18n="Dropdowns">Dropdowns</div>
</a>
</li>
<li class="menu-item">
<a href="ui-footer.html" class="menu-link">
<div data-i18n="Footer">Footer</div>
</a>
</li>
<li class="menu-item">
<a href="ui-list-groups.html" class="menu-link">
<div data-i18n="List Groups">List groups</div>
</a>
</li>
<li class="menu-item">
<a href="ui-modals.html" class="menu-link">
<div data-i18n="Modals">Modals</div>
</a>
</li>
<li class="menu-item">
<a href="ui-navbar.html" class="menu-link">
<div data-i18n="Navbar">Navbar</div>
</a>
</li>
<li class="menu-item">
<a href="ui-offcanvas.html" class="menu-link">
<div data-i18n="Offcanvas">Offcanvas</div>
</a>
</li>
<li class="menu-item">
<a href="ui-pagination-breadcrumbs.html" class="menu-link">
<div data-i18n="Pagination & Breadcrumbs">Pagination &amp; Breadcrumbs</div>
</a>
</li>
<li class="menu-item">
<a href="ui-progress.html" class="menu-link">
<div data-i18n="Progress">Progress</div>
</a>
</li>
<li class="menu-item">
<a href="ui-spinners.html" class="menu-link">
<div data-i18n="Spinners">Spinners</div>
</a>
</li>
<li class="menu-item">
<a href="ui-tabs-pills.html" class="menu-link">
<div data-i18n="Tabs & Pills">Tabs &amp; Pills</div>
</a>
</li>
<li class="menu-item">
<a href="ui-toasts.html" class="menu-link">
<div data-i18n="Toasts">Toasts</div>
</a>
</li>
<li class="menu-item">
<a href="ui-tooltips-popovers.html" class="menu-link">
<div data-i18n="Tooltips & Popovers">Tooltips &amp; Popovers</div>
</a>
</li>
<li class="menu-item">
<a href="ui-typography.html" class="menu-link">
<div data-i18n="Typography">Typography</div>
</a>
</li>
</ul>
</li>
<!-- Extended components -->
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-components"></i>
<div data-i18n="Extended UI">Extended UI</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="extended-ui-avatar.html" class="menu-link">
<div data-i18n="Avatar">Avatar</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-blockui.html" class="menu-link">
<div data-i18n="BlockUI">BlockUI</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-drag-and-drop.html" class="menu-link">
<div data-i18n="Drag & Drop">Drag &amp; Drop</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-media-player.html" class="menu-link">
<div data-i18n="Media Player">Media Player</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-perfect-scrollbar.html" class="menu-link">
<div data-i18n="Perfect Scrollbar">Perfect Scrollbar</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-star-ratings.html" class="menu-link">
<div data-i18n="Star Ratings">Star Ratings</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-sweetalert2.html" class="menu-link">
<div data-i18n="SweetAlert2">SweetAlert2</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-text-divider.html" class="menu-link">
<div data-i18n="Text Divider">Text Divider</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Timeline">Timeline</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="extended-ui-timeline-basic.html" class="menu-link">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-timeline-fullscreen.html" class="menu-link">
<div data-i18n="Fullscreen">Fullscreen</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="extended-ui-tour.html" class="menu-link">
<div data-i18n="Tour">Tour</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-treeview.html" class="menu-link">
<div data-i18n="Treeview">Treeview</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-misc.html" class="menu-link">
<div data-i18n="Miscellaneous">Miscellaneous</div>
</a>
</li>
</ul>
</li>
<!-- Icons -->
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-brand-tabler"></i>
<div data-i18n="Icons">Icons</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="icons-tabler.html" class="menu-link">
<div data-i18n="Tabler">Tabler</div>
</a>
</li>
<li class="menu-item">
<a href="icons-font-awesome.html" class="menu-link">
<div data-i18n="Font Awesome">Font Awesome</div>
</a>
</li>
</ul>
</li>
<!-- Forms & Tables -->
<li class="menu-header small">
<span class="menu-header-text" data-i18n="Forms & Tables">Forms &amp; Tables</span>
</li>
<!-- Forms -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-toggle-left"></i>
<div data-i18n="Form Elements">Form Elements</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="forms-basic-inputs.html" class="menu-link">
<div data-i18n="Basic Inputs">Basic Inputs</div>
</a>
</li>
<li class="menu-item">
<a href="forms-input-groups.html" class="menu-link">
<div data-i18n="Input groups">Input groups</div>
</a>
</li>
<li class="menu-item">
<a href="forms-custom-options.html" class="menu-link">
<div data-i18n="Custom Options">Custom Options</div>
</a>
</li>
<li class="menu-item">
<a href="forms-editors.html" class="menu-link">
<div data-i18n="Editors">Editors</div>
</a>
</li>
<li class="menu-item">
<a href="forms-file-upload.html" class="menu-link">
<div data-i18n="File Upload">File Upload</div>
</a>
</li>
<li class="menu-item">
<a href="forms-pickers.html" class="menu-link">
<div data-i18n="Pickers">Pickers</div>
</a>
</li>
<li class="menu-item">
<a href="forms-selects.html" class="menu-link">
<div data-i18n="Select & Tags">Select &amp; Tags</div>
</a>
</li>
<li class="menu-item">
<a href="forms-sliders.html" class="menu-link">
<div data-i18n="Sliders">Sliders</div>
</a>
</li>
<li class="menu-item">
<a href="forms-switches.html" class="menu-link">
<div data-i18n="Switches">Switches</div>
</a>
</li>
<li class="menu-item">
<a href="forms-extras.html" class="menu-link">
<div data-i18n="Extras">Extras</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-layout-navbar"></i>
<div data-i18n="Form Layouts">Form Layouts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="form-layouts-vertical.html" class="menu-link">
<div data-i18n="Vertical Form">Vertical Form</div>
</a>
</li>
<li class="menu-item">
<a href="form-layouts-horizontal.html" class="menu-link">
<div data-i18n="Horizontal Form">Horizontal Form</div>
</a>
</li>
<li class="menu-item">
<a href="form-layouts-sticky.html" class="menu-link">
<div data-i18n="Sticky Actions">Sticky Actions</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-text-wrap-disabled"></i>
<div data-i18n="Form Wizard">Form Wizard</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="form-wizard-numbered.html" class="menu-link">
<div data-i18n="Numbered">Numbered</div>
</a>
</li>
<li class="menu-item">
<a href="form-wizard-icons.html" class="menu-link">
<div data-i18n="Icons">Icons</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="form-validation.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-checkbox"></i>
<div data-i18n="Form Validation">Form Validation</div>
</a>
</li>
<!-- Tables -->
<li class="menu-item">
<a href="tables-basic.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-table"></i>
<div data-i18n="Tables">Tables</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-layout-grid"></i>
<div data-i18n="Datatables">Datatables</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="tables-datatables-basic.html" class="menu-link">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="tables-datatables-advanced.html" class="menu-link">
<div data-i18n="Advanced">Advanced</div>
</a>
</li>
<li class="menu-item">
<a href="tables-datatables-extensions.html" class="menu-link">
<div data-i18n="Extensions">Extensions</div>
</a>
</li>
</ul>
</li>
<!-- Charts & Maps -->
<li class="menu-header small">
<span class="menu-header-text" data-i18n="Charts & Maps">Charts &amp; Maps</span>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-chart-pie"></i>
<div data-i18n="Charts">Charts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="charts-apex.html" class="menu-link">
<div data-i18n="Apex Charts">Apex Charts</div>
</a>
</li>
<li class="menu-item">
<a href="charts-chartjs.html" class="menu-link">
<div data-i18n="ChartJS">ChartJS</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="maps-leaflet.html" class="menu-link">
<i class="menu-icon icon-base ti tabler-map"></i>
<div data-i18n="Leaflet Maps">Leaflet Maps</div>
</a>
</li>
<!-- Misc -->
<li class="menu-header small">
<span class="menu-header-text" data-i18n="Misc">Misc</span>
</li>
<!-- Multi Level Menu -->
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon icon-base ti tabler-layout-board"></i>
<div data-i18n="Multi Level">Multi Level</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<div data-i18n="Level 2">Level 2</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link">
<div data-i18n="Level 3">Level 3</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="https://pixinvent.ticksy.com/" target="_blank" class="menu-link">
<i class="menu-icon icon-base ti tabler-lifebuoy"></i>
<div data-i18n="Support">Support</div>
</a>
</li>
<li class="menu-item">
<a
href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
target="_blank"
class="menu-link">
<i class="menu-icon icon-base ti tabler-file-description"></i>
<div data-i18n="Documentation">Documentation</div>
</a>
</li>
</ul>
</aside>
<div class="menu-mobile-toggler d-xl-none rounded-1">
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large text-bg-secondary p-2 rounded-1">
<i class="ti tabler-menu icon-base"></i>
<i class="ti tabler-chevron-right icon-base"></i>
</a>
</div>
<!-- / Menu -->
<!-- Layout container -->
<div class="layout-page">
<!-- Navbar -->
<nav
class="layout-navbar container-xxl navbar-detached navbar navbar-expand-xl align-items-center bg-navbar-theme"
id="layout-navbar">
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none ">
<a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
<i class="icon-base ti tabler-menu-2 icon-md"></i>
</a>
</div>
<div class="navbar-nav-right d-flex align-items-center justify-content-end" id="navbar-collapse">
<!-- Search -->
<div class="navbar-nav align-items-center">
<div class="nav-item navbar-search-wrapper px-md-0 px-2 mb-0">
<a class="nav-item nav-link search-toggler d-flex align-items-center px-0" href="javascript:void(0);">
<span class="d-inline-block text-body-secondary fw-normal" id="autocomplete"></span>
</a>
</div>
</div>
<!-- /Search -->
<ul class="navbar-nav flex-row align-items-center ms-md-auto">
<li class="nav-item dropdown-language dropdown me-2 me-xl-0">
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
<i class="icon-base ti tabler-language icon-22px text-heading"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="en" data-text-direction="ltr">
<span>English</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="fr" data-text-direction="ltr">
<span>French</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="ar" data-text-direction="rtl">
<span>Arabic</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-language="de" data-text-direction="ltr">
<span>German</span>
</a>
</li>
</ul>
</li>
<!--/ Language -->
<!-- Style Switcher -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
id="nav-theme"
href="javascript:void(0);"
data-bs-toggle="dropdown">
<i class="icon-base ti tabler-sun icon-22px theme-icon-active text-heading"></i>
<span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text">
<li>
<button
type="button"
class="dropdown-item align-items-center active"
data-bs-theme-value="light"
aria-pressed="false">
<span><i class="icon-base ti tabler-sun icon-22px me-3" data-icon="sun"></i>Light</span>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item align-items-center"
data-bs-theme-value="dark"
aria-pressed="true">
<span
><i class="icon-base ti tabler-moon-stars icon-22px me-3" data-icon="moon-stars"></i
>Dark</span
>
</button>
</li>
<li>
<button
type="button"
class="dropdown-item align-items-center"
data-bs-theme-value="system"
aria-pressed="false">
<span
><i
class="icon-base ti tabler-device-desktop-analytics icon-22px me-3"
data-icon="device-desktop-analytics"></i
>System</span
>
</button>
</li>
</ul>
</li>
<!-- / Style Switcher-->
<!-- Quick links -->
<li class="nav-item dropdown-shortcuts navbar-dropdown dropdown">
<a
class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
href="javascript:void(0);"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-expanded="false">
<i class="icon-base ti tabler-layout-grid-add icon-22px text-heading"></i>
</a>
<div class="dropdown-menu dropdown-menu-end p-0">
<div class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h6 class="mb-0 me-auto">Shortcuts</h6>
<a
href="javascript:void(0)"
class="dropdown-shortcuts-add py-2 btn btn-text-secondary rounded-pill btn-icon"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Add shortcuts"
><i class="icon-base ti tabler-plus icon-20px text-heading"></i
></a>
</div>
</div>
<div class="dropdown-shortcuts-list scrollable-container">
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-calendar icon-26px text-heading"></i>
</span>
<a href="app-calendar.html" class="stretched-link">Calendar</a>
<small>Appointments</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-file-dollar icon-26px text-heading"></i>
</span>
<a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
<small>Manage Accounts</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-user icon-26px text-heading"></i>
</span>
<a href="app-user-list.html" class="stretched-link">User App</a>
<small>Manage Users</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-users icon-26px text-heading"></i>
</span>
<a href="app-access-roles.html" class="stretched-link">Role Management</a>
<small>Permission</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-device-desktop-analytics icon-26px text-heading"></i>
</span>
<a href="index.html" class="stretched-link">Dashboard</a>
<small>User Dashboard</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-settings icon-26px text-heading"></i>
</span>
<a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
<small>Account Settings</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-help-circle icon-26px text-heading"></i>
</span>
<a href="pages-faq.html" class="stretched-link">FAQs</a>
<small>FAQs & Articles</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-square icon-26px text-heading"></i>
</span>
<a href="modal-examples.html" class="stretched-link">Modals</a>
<small>Useful Popups</small>
</div>
</div>
</div>
</div>
</li>
<!-- Quick links -->
<!-- Notification -->
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
<a
class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill"
href="javascript:void(0);"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-expanded="false">
<span class="position-relative">
<i class="icon-base ti tabler-bell icon-22px text-heading"></i>
<span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-end p-0">
<li class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h6 class="mb-0 me-auto">Notification</h6>
<div class="d-flex align-items-center h6 mb-0">
<span class="badge bg-label-primary me-2">8 New</span>
<a
href="javascript:void(0)"
class="dropdown-notifications-all p-2 btn btn-icon"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark all as read"
><i class="icon-base ti tabler-mail-opened text-heading"></i
></a>
</div>
</div>
</li>
<li class="dropdown-notifications-list scrollable-container">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-1">Congratulation Lettie 🎉</h6>
<small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
<small class="text-body-secondary">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-danger">CF</span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Charles Franklin</h6>
<small class="mb-1 d-block text-body">Accepted your connection</small>
<small class="text-body-secondary">12hr ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/2.png" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">New Message ✉️</h6>
<small class="mb-1 d-block text-body">You have new message from Natalie</small>
<small class="text-body-secondary">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-success"
><i class="icon-base ti tabler-shopping-cart"></i
></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Whoo! You have new order 🛒</h6>
<small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
<small class="text-body-secondary">1 day ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/9.png" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Application has been approved 🚀</h6>
<small class="mb-1 d-block text-body"
>Your ABC project application has been approved.</small
>
<small class="text-body-secondary">2 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-success"
><i class="icon-base ti tabler-chart-pie"></i
></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Monthly report is generated</h6>
<small class="mb-1 d-block text-body">July monthly financial report is generated </small>
<small class="text-body-secondary">3 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/5.png" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Send connection request</h6>
<small class="mb-1 d-block text-body">Peter sent you connection request</small>
<small class="text-body-secondary">4 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/6.png" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">New message from Jane</h6>
<small class="mb-1 d-block text-body">Your have new message from Jane</small>
<small class="text-body-secondary">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-warning"
><i class="icon-base ti tabler-alert-triangle"></i
></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">CPU is running high</h6>
<small class="mb-1 d-block text-body"
>CPU Utilization Percent is currently at 88.63%,</small
>
<small class="text-body-secondary">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"
><span class="icon-base ti tabler-x"></span
></a>
</div>
</div>
</li>
</ul>
</li>
<li class="border-top">
<div class="d-grid p-4">
<a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
<small class="align-middle">View all notifications</small>
</a>
</div>
</li>
</ul>
</li>
<!--/ Notification -->
<!-- User -->
<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a
class="nav-link dropdown-toggle hide-arrow p-0"
href="javascript:void(0);"
data-bs-toggle="dropdown">
<div class="avatar avatar-online">
<img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item mt-0" href="pages-account-settings-account.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0 me-2">
<div class="avatar avatar-online">
<img src="../../assets/img/avatars/1.png" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-0">John Doe</h6>
<small class="text-body-secondary">Admin</small>
</div>
</div>
</a>
</li>
<li>
<div class="dropdown-divider my-1 mx-n2"></div>
</li>
<li>
<a class="dropdown-item" href="pages-profile-user.html">
<i class="icon-base ti tabler-user me-3 icon-md"></i
><span class="align-middle">My Profile</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-account-settings-account.html">
<i class="icon-base ti tabler-settings me-3 icon-md"></i
><span class="align-middle">Settings</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-account-settings-billing.html">
<span class="d-flex align-items-center align-middle">
<i class="flex-shrink-0 icon-base ti tabler-file-dollar me-3 icon-md"></i
><span class="flex-grow-1 align-middle">Billing</span>
<span class="flex-shrink-0 badge bg-danger d-flex align-items-center justify-content-center"
>4</span
>
</span>
</a>
</li>
<li>
<div class="dropdown-divider my-1 mx-n2"></div>
</li>
<li>
<a class="dropdown-item" href="pages-pricing.html">
<i class="icon-base ti tabler-currency-dollar me-3 icon-md"></i
><span class="align-middle">Pricing</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-faq.html">
<i class="icon-base ti tabler-question-mark me-3 icon-md"></i
><span class="align-middle">FAQ</span>
</a>
</li>
<li>
<div class="d-grid px-2 pt-2 pb-1">
<a class="btn btn-sm btn-danger d-flex" href="auth-login-cover.html" target="_blank">
<small class="align-middle">Logout</small>
<i class="icon-base ti tabler-logout ms-2 icon-14px"></i>
</a>
</div>
</li>
</ul>
</li>
<!--/ User -->
</ul>
</div>
</nav>
<!-- / Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
<div class="row">
<!-- User Sidebar -->
<div class="col-xl-4 col-lg-5 order-1 order-md-0">
<!-- User Card -->
<div class="card mb-6">
<div class="card-body pt-12">
<div class="user-avatar-section">
<div class=" d-flex align-items-center flex-column">
<img
class="img-fluid rounded mb-4"
src="../../assets/img/avatars/1.png"
height="120"
width="120"
alt="User avatar" />
<div class="user-info text-center">
<h5>Violet Mendoza</h5>
<span class="badge bg-label-secondary">Author</span>
</div>
</div>
</div>
<div class="d-flex justify-content-around flex-wrap my-6 gap-0 gap-md-3 gap-lg-4">
<div class="d-flex align-items-center me-5 gap-4">
<div class="avatar">
<div class="avatar-initial bg-label-primary rounded">
<i class="icon-base ti tabler-checkbox icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">1.23k</h5>
<span>Task Done</span>
</div>
</div>
<div class="d-flex align-items-center gap-4">
<div class="avatar">
<div class="avatar-initial bg-label-primary rounded">
<i class="icon-base ti tabler-briefcase icon-lg"></i>
</div>
</div>
<div>
<h5 class="mb-0">568</h5>
<span>Project Done</span>
</div>
</div>
</div>
<h5 class="pb-4 border-bottom mb-4">Details</h5>
<div class="info-container">
<ul class="list-unstyled mb-6">
<li class="mb-2">
<span class="h6">Username:</span>
<span>@violet.dev</span>
</li>
<li class="mb-2">
<span class="h6">Email:</span>
<span>vafgot@vultukir.org</span>
</li>
<li class="mb-2">
<span class="h6">Status:</span>
<span>Active</span>
</li>
<li class="mb-2">
<span class="h6">Role:</span>
<span>Author</span>
</li>
<li class="mb-2">
<span class="h6">Tax id:</span>
<span>Tax-8965</span>
</li>
<li class="mb-2">
<span class="h6">Contact:</span>
<span>(123) 456-7890</span>
</li>
<li class="mb-2">
<span class="h6">Languages:</span>
<span>French</span>
</li>
<li class="mb-2">
<span class="h6">Country:</span>
<span>England</span>
</li>
</ul>
<div class="d-flex justify-content-center">
<a
href="javascript:;"
class="btn btn-primary me-4"
data-bs-target="#editUser"
data-bs-toggle="modal"
>Edit</a
>
<a href="javascript:;" class="btn btn-label-danger suspend-user">Suspend</a>
</div>
</div>
</div>
</div>
<!-- /User Card -->
<!-- Plan Card -->
<div class="card mb-6 border border-2 border-primary rounded primary-shadow">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<span class="badge bg-label-primary">Standard</span>
<div class="d-flex justify-content-center">
<sub class="h5 pricing-currency mb-auto mt-1 text-primary">$</sub>
<h1 class="mb-0 text-primary">99</h1>
<sub class="h6 pricing-duration mt-auto mb-3 fw-normal">month</sub>
</div>
</div>
<ul class="list-unstyled g-2 my-6">
<li class="mb-2 d-flex align-items-center">
<i class="icon-base ti tabler-circle-filled icon-10px text-secondary me-2"></i
><span>10 Users</span>
</li>
<li class="mb-2 d-flex align-items-center">
<i class="icon-base ti tabler-circle-filled icon-10px text-secondary me-2"></i
><span>Up to 10 GB storage</span>
</li>
<li class="mb-2 d-flex align-items-center">
<i class="icon-base ti tabler-circle-filled icon-10px text-secondary me-2"></i
><span>Basic Support</span>
</li>
</ul>
<div class="d-flex justify-content-between align-items-center mb-1">
<span class="h6 mb-0">Days</span>
<span class="h6 mb-0">26 of 30 Days</span>
</div>
<div class="progress mb-1 bg-label-primary" style="height: 6px;">
<div
class="progress-bar"
role="progressbar"
style="width: 65%;"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<small>4 days remaining</small>
<div class="d-grid w-100 mt-6">
<button class="btn btn-primary" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">
Upgrade Plan
</button>
</div>
</div>
</div>
<!-- /Plan Card -->
</div>
<!--/ User Sidebar -->
<!-- User Content -->
<div class="col-xl-8 col-lg-7 order-0 order-md-1">
<!-- User Pills -->
<div class="nav-align-top">
<ul class="nav nav-pills flex-column flex-md-row mb-6 row-gap-2">
<li class="nav-item">
<a class="nav-link" href="app-user-view-account.html"
><i class="icon-base ti tabler-user-check me-1_5 icon-sm"></i>Account</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="app-user-view-security.html"
><i class="icon-base ti tabler-lock me-1_5 icon-sm"></i>Security</a
>
</li>
<li class="nav-item">
<a class="nav-link active" href="javascript:void(0);"
><i class="icon-base ti tabler-bookmark me-1_5 icon-sm"></i>Billing & Plans</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="app-user-view-notifications.html"
><i class="icon-base ti tabler-bell me-1_5 icon-sm"></i>Notifications</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="app-user-view-connections.html"
><i class="icon-base ti tabler-link me-1_5 icon-sm"></i>Connections</a
>
</li>
</ul>
</div>
<!--/ User Pills -->
<!-- Current Plan -->
<div class="card mb-6">
<h5 class="card-header">Current Plan</h5>
<div class="card-body">
<div class="row row-gap-4 row-gap-xl-0">
<div class="col-xl-6 order-1 order-xl-0">
<div class="mb-4">
<h6 class="mb-1">Your Current Plan is Basic</h6>
<p>A simple start for everyone</p>
</div>
<div class="mb-4">
<h6 class="mb-1">Active until Dec 09, 2021</h6>
<p>We will send you a notification upon Subscription expiration</p>
</div>
<div class="mb-xl-6">
<h6 class="mb-1">
<span class="me-1">$199 Per Month</span>
<span class="badge bg-label-primary rounded-pill">Popular</span>
</h6>
<p class="mb-0">Standard plan for small to medium businesses</p>
</div>
</div>
<div class="col-xl-6 order-0 order-xl-0">
<div class="alert alert-warning" role="alert">
<h5 class="alert-heading mb-2">We need your attention!</h5>
<span>Your plan requires update</span>
</div>
<div class="plan-statistics">
<div class="d-flex justify-content-between">
<h6 class="mb-1">Days</h6>
<h6 class="mb-1">26 of 30 Days</h6>
</div>
<div class="progress mb-1 bg-label-primary" style="height: 10px;">
<div
class="progress-bar w-75"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<small>Your plan requires update</small>
</div>
</div>
<div class="col-12 order-2 order-xl-0 d-flex flex-wrap row-gap-4">
<button
class="btn btn-primary me-4"
data-bs-toggle="modal"
data-bs-target="#upgradePlanModal">
Upgrade Plan
</button>
<button class="btn btn-label-danger cancel-subscription">Cancel Subscription</button>
</div>
</div>
</div>
</div>
<!-- /Current Plan -->
<!-- Payment Methods -->
<div class="card card-action mb-6">
<div class="card-header align-items-center">
<h5 class="card-action-title mb-0">Payment Methods</h5>
<div class="card-action-element">
<button
class="btn btn-primary btn-sm"
type="button"
data-bs-toggle="modal"
data-bs-target="#addNewCCModal">
<i class="icon-base ti tabler-plus icon-14px me-1_5"></i>Add Card
</button>
</div>
</div>
<div class="card-body">
<div class="added-cards">
<div class="cardMaster border p-6 rounded mb-4">
<div class="d-flex justify-content-between flex-sm-row flex-column">
<div class="card-information">
<img
class="mb-2 img-fluid"
src="../../assets/img/icons/payments/mastercard.png"
alt="Master Card" />
<div class="d-flex align-items-center mb-2">
<h6 class="mb-0 me-2">Kaith Morrison</h6>
<span class="badge bg-label-primary me-1">Popular</span>
</div>
<span class="card-number"
>&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727;
9856</span
>
</div>
<div class="d-flex flex-column text-start text-lg-end">
<div class="d-flex order-sm-0 order-1">
<button
class="btn btn-sm btn-label-primary me-4"
data-bs-toggle="modal"
data-bs-target="#editCCModal">
Edit
</button>
<button class="btn btn-sm btn-label-danger">Delete</button>
</div>
<small class="mt-sm-4 mt-2 order-sm-1 order-0 text-sm-end mb-2"
>Card expires at 12/24</small
>
</div>
</div>
</div>
<div class="cardMaster border p-6 rounded mb-4">
<div class="d-flex justify-content-between flex-sm-row flex-column">
<div class="card-information">
<img
class="mb-2 img-fluid"
src="../../assets/img/icons/payments/visa.png"
alt="Master Card" />
<h6 class="mb-2 me-2">Tom McBride</h6>
<span class="card-number"
>&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727;
6542</span
>
</div>
<div class="d-flex flex-column text-start text-lg-end">
<div class="d-flex order-sm-0 order-1">
<button
class="btn btn-sm btn-label-primary me-4"
data-bs-toggle="modal"
data-bs-target="#editCCModal">
Edit
</button>
<button class="btn btn-sm btn-label-danger">Delete</button>
</div>
<small class="mt-sm-4 mt-2 order-sm-1 order-0 text-sm-end mb-2"
>Card expires at 02/24</small
>
</div>
</div>
</div>
<div class="cardMaster border p-6 rounded">
<div class="d-flex justify-content-between flex-sm-row flex-column">
<div class="card-information">
<img
class="mb-2 img-fluid"
src="../../assets/img/icons/payments/american-express-logo.png"
alt="Visa Card" />
<div class="d-flex align-items-center mb-2">
<h6 class="mb-0 me-2">Mildred Wagner</h6>
<span class="badge bg-label-danger me-1">Expired</span>
</div>
<span class="card-number"
>&#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727; &#8727;&#8727;&#8727;&#8727;
5896</span
>
</div>
<div class="d-flex flex-column text-start text-lg-end">
<div class="d-flex order-sm-0 order-1">
<button
class="btn btn-sm btn-label-primary me-4"
data-bs-toggle="modal"
data-bs-target="#editCCModal">
Edit
</button>
<button class="btn btn-sm btn-label-danger">Delete</button>
</div>
<small class="mt-sm-4 mt-2 order-sm-1 order-0 text-sm-end mb-2"
>Card expires at 08/20</small
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Payment Methods -->
<!-- Billing Address -->
<div class="card card-action mb-4">
<div class="card-header align-items-center flex-wrap gap-2">
<h5 class="card-action-title mb-0">Billing Address</h5>
<div class="card-action-element">
<button
class="btn btn-sm btn-primary edit-address"
type="button"
data-bs-toggle="modal"
data-bs-target="#addNewAddress">
<i class="icon-base ti tabler-plus icon-14px me-1_5"></i>Edit address
</button>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-xl-7 col-12">
<dl class="row mb-0 gx-2">
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">Company Name:</dt>
<dd class="col-sm-8">Kelly Group</dd>
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">Billing Email:</dt>
<dd class="col-sm-8">user@ex.com</dd>
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">Tax ID:</dt>
<dd class="col-sm-8">TAX-357378</dd>
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">VAT Number:</dt>
<dd class="col-sm-8">SDF754K77</dd>
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading mb-0">Billing Address:</dt>
<dd class="col-sm-8 mb-0">
100 Water Plant <br />Avenue, Building 1303<br />
Wake Island
</dd>
</dl>
</div>
<div class="col-xl-5 col-12">
<dl class="row mb-0 gx-2">
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">Contact:</dt>
<dd class="col-sm-8">+1 (605) 977-32-65</dd>
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">Country:</dt>
<dd class="col-sm-8">Wake Island</dd>
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">State:</dt>
<dd class="col-sm-8">Capholim</dd>
<dt class="col-sm-4 mb-sm-2 text-nowrap fw-medium text-heading">Zipcode:</dt>
<dd class="col-sm-8">403114</dd>
</dl>
</div>
</div>
</div>
</div>
<!--/ Billing Address -->
</div>
<!--/ User Content -->
</div>
<!-- Modal -->
<!-- Edit User Modal -->
<div class="modal fade" id="editUser" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-edit-user">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Edit User Information</h4>
<p>Updating user details will receive a privacy audit.</p>
</div>
<form id="editUserForm" class="row g-6" onsubmit="return false">
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserFirstName">First Name</label>
<input
type="text"
id="modalEditUserFirstName"
name="modalEditUserFirstName"
class="form-control"
placeholder="John"
value="John" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserLastName">Last Name</label>
<input
type="text"
id="modalEditUserLastName"
name="modalEditUserLastName"
class="form-control"
placeholder="Doe"
value="Doe" />
</div>
<div class="col-12">
<label class="form-label" for="modalEditUserName">Username</label>
<input
type="text"
id="modalEditUserName"
name="modalEditUserName"
class="form-control"
placeholder="johndoe007"
value="johndoe007" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserEmail">Email</label>
<input
type="text"
id="modalEditUserEmail"
name="modalEditUserEmail"
class="form-control"
placeholder="example@domain.com"
value="example@domain.com" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserStatus">Status</label>
<select
id="modalEditUserStatus"
name="modalEditUserStatus"
class="select2 form-select"
aria-label="Default select example">
<option selected>Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
<option value="3">Suspended</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditTaxID">Tax ID</label>
<input
type="text"
id="modalEditTaxID"
name="modalEditTaxID"
class="form-control modal-edit-tax-id"
placeholder="123 456 7890"
value="123 456 7890" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserPhone">Phone Number</label>
<div class="input-group">
<span class="input-group-text">US (+1)</span>
<input
type="text"
id="modalEditUserPhone"
name="modalEditUserPhone"
class="form-control phone-number-mask"
placeholder="202 555 0111"
value="202 555 0111" />
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserLanguage">Language</label>
<select
id="modalEditUserLanguage"
name="modalEditUserLanguage"
class="select2 form-select"
multiple>
<option value="">Select</option>
<option value="english" selected>English</option>
<option value="spanish">Spanish</option>
<option value="french">French</option>
<option value="german">German</option>
<option value="dutch">Dutch</option>
<option value="hebrew">Hebrew</option>
<option value="sanskrit">Sanskrit</option>
<option value="hindi">Hindi</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserCountry">Country</label>
<select
id="modalEditUserCountry"
name="modalEditUserCountry"
class="select2 form-select"
data-allow-clear="true">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India" selected>India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="editBillingAddress" />
<label for="editBillingAddress" class="switch-label">Use as a billing address?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button
type="reset"
class="btn btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Edit User Modal -->
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="editCCModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-simple modal-add-new-cc">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h2>Edit Card</h2>
<p class="text-body-secondary">Edit your saved card details</p>
</div>
<form id="editCCForm" class="row g-3" onsubmit="return false">
<div class="col-12 form-control-validation">
<label class="form-label w-100" for="modalEditCard">Card Number</label>
<div class="input-group input-group-merge">
<input
id="modalEditCard"
name="modalEditCard"
class="form-control credit-card-mask-edit"
type="text"
placeholder="4356 3215 6548 7898"
value="4356 3215 6548 7898"
aria-describedby="modalEditCard2" />
<span class="input-group-text cursor-pointer" id="modalEditCard2"
><span class="card-type-edit"></span
></span>
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditName">Name</label>
<input
type="text"
id="modalEditName"
class="form-control"
placeholder="John Doe"
value="John Doe" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalEditExpiryDate">Exp. Date</label>
<input
type="text"
id="modalEditExpiryDate"
class="form-control expiry-date-mask-edit"
placeholder="MM/YY"
value="08/28" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalEditCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input
type="text"
id="modalEditCvv"
class="form-control cvv-code-mask-edit"
maxlength="3"
placeholder="654"
value="XXX" />
<span class="input-group-text cursor-pointer" id="modalEditCvv2"
><i
class="icon-base ti tabler-help-circle text-body-secondary"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Card Verification Value"></i
></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="editPrimaryCard" />
<label for="editPrimaryCard">Set as primary card</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Update</button>
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="modal" aria-label="Close">
Remove
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->
<!-- Add New Address Modal -->
<div class="modal fade" id="addNewAddress" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-add-new-address">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="address-title mb-2">Add New Address</h4>
<p class="address-subtitle">Add new address for express delivery</p>
</div>
<form id="addNewAddressForm" class="row g-6" onsubmit="return false">
<div class="col-12 form-control-validation">
<div class="row">
<div class="col-md mb-md-0 mb-4">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioHome">
<span class="custom-option-body">
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M16.625 23.625V16.625H11.375V23.625H4.37501V12.6328C4.37437 12.5113 4.39937 12.391 4.44837 12.2798C4.49737 12.1686 4.56928 12.069 4.65939 11.9875L13.4094 4.03592C13.5689 3.88911 13.7778 3.80762 13.9945 3.80762C14.2113 3.80762 14.4202 3.88911 14.5797 4.03592L23.3406 11.9875C23.4287 12.0706 23.4992 12.1706 23.548 12.2814C23.5969 12.3922 23.6231 12.5117 23.625 12.6328V23.625H16.625Z" />
<path
d="M23.625 23.625V12.6328C23.623 12.5117 23.5969 12.3922 23.548 12.2814C23.4992 12.1706 23.4287 12.0706 23.3406 11.9875L14.5797 4.03592C14.4202 3.88911 14.2113 3.80762 13.9945 3.80762C13.7777 3.80762 13.5689 3.88911 13.4094 4.03592L4.65937 11.9875C4.56926 12.069 4.49736 12.1686 4.44836 12.2798C4.39936 12.391 4.37436 12.5113 4.375 12.6328V23.625M1.75 23.625H26.25M16.625 23.625V17.5C16.625 17.2679 16.5328 17.0454 16.3687 16.8813C16.2046 16.7172 15.9821 16.625 15.75 16.625H12.25C12.0179 16.625 11.7954 16.7172 11.6313 16.8813C11.4672 17.0454 11.375 17.2679 11.375 17.5V23.625"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span class="custom-option-title">Home</span>
<small> Delivery time (9am 9pm) </small>
</span>
<input
name="customRadioIcon"
class="form-check-input"
type="radio"
value=""
id="customRadioHome"
checked />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-4">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioOffice">
<span class="custom-option-body">
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625" />
<path
d="M1.75 23.625H26.25M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625M24.5 23.625V11.375C24.5 11.1429 24.4078 10.9204 24.2437 10.7563C24.0796 10.5922 23.8571 10.5 23.625 10.5H15.75M7 7.875H10.5M8.75 14.875H12.25M7 19.25H10.5M19.25 19.25H21M19.25 14.875H21"
stroke-opacity="0.9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span class="custom-option-title"> Office </span>
<small> Delivery time (9am 5pm) </small>
</span>
<input
name="customRadioIcon"
class="form-check-input"
type="radio"
value=""
id="customRadioOffice" />
</label>
</div>
</div>
</div>
</div>
<div class="col-12 form-control-validation col-md-6">
<label class="form-label" for="modalAddressFirstName">First Name</label>
<input
type="text"
id="modalAddressFirstName"
name="modalAddressFirstName"
class="form-control"
placeholder="John" />
</div>
<div class="col-12 form-control-validation col-md-6">
<label class="form-label" for="modalAddressLastName">Last Name</label>
<input
type="text"
id="modalAddressLastName"
name="modalAddressLastName"
class="form-control"
placeholder="Doe" />
</div>
<div class="col-12">
<label class="form-label" for="modalAddressCountry">Country</label>
<select
id="modalAddressCountry"
name="modalAddressCountry"
class="select2 form-select"
data-allow-clear="true">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12">
<label class="form-label" for="modalAddressAddress1">Address Line 1</label>
<input
type="text"
id="modalAddressAddress1"
name="modalAddressAddress1"
class="form-control"
placeholder="12, Business Park" />
</div>
<div class="col-12">
<label class="form-label" for="modalAddressAddress2">Address Line 2</label>
<input
type="text"
id="modalAddressAddress2"
name="modalAddressAddress2"
class="form-control"
placeholder="Mall Road" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressLandmark">Landmark</label>
<input
type="text"
id="modalAddressLandmark"
name="modalAddressLandmark"
class="form-control"
placeholder="Nr. Hard Rock Cafe" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressCity">City</label>
<input
type="text"
id="modalAddressCity"
name="modalAddressCity"
class="form-control"
placeholder="Los Angeles" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressLandmark">State</label>
<input
type="text"
id="modalAddressState"
name="modalAddressState"
class="form-control"
placeholder="California" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressZipCode">Zip Code</label>
<input
type="text"
id="modalAddressZipCode"
name="modalAddressZipCode"
class="form-control"
placeholder="99950" />
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="billingAddress" />
<label for="billingAddress" class="form-switch-label">Use as a billing address?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button
type="reset"
class="btn btn-label-secondary"
data-bs-dismiss="modal"
aria-label="Close">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Address Modal -->
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="addNewCCModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered1 modal-simple modal-add-new-cc">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Add New Card</h4>
<p>Add new card to complete payment</p>
</div>
<form id="addNewCCForm" class="row g-6" onsubmit="return false">
<div class="col-12 form-control-validation">
<label class="form-label w-100" for="modalAddCard">Card Number</label>
<div class="input-group input-group-merge">
<input
id="modalAddCard"
name="modalAddCard"
class="form-control credit-card-mask"
type="text"
placeholder="1356 3215 6548 7898"
aria-describedby="modalAddCard2" />
<span class="input-group-text cursor-pointer p-1" id="modalAddCard2"
><span class="card-type"></span
></span>
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddCardName">Name</label>
<input type="text" id="modalAddCardName" class="form-control" placeholder="John Doe" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalAddCardExpiryDate">Exp. Date</label>
<input
type="text"
id="modalAddCardExpiryDate"
class="form-control expiry-date-mask"
placeholder="MM/YY" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalAddCardCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input
type="text"
id="modalAddCardCvv"
class="form-control cvv-code-mask pe-0"
maxlength="3"
placeholder="654" />
<span class="input-group-text cursor-pointer ps-0" id="modalAddCardCvv2"
><i
class="text-body-secondary icon-base ti tabler-help"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Card Verification Value"></i
></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="futureAddress" />
<label for="futureAddress" class="switch-label">Save card for future billing?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button
type="reset"
class="btn btn-label-secondary btn-reset"
data-bs-dismiss="modal"
aria-label="Close">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="upgradePlanModal" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-simple modal-upgrade-plan">
<div class="modal-content">
<div class="modal-body p-4">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h2>Upgrade Plan</h2>
<p class="text-body-secondary">Choose the best plan for user.</p>
</div>
<form id="upgradePlanForm" class="row g-4" onsubmit="return false">
<div class="col-sm-9">
<label class="form-label" for="choosePlan">Choose Plan</label>
<select id="choosePlan" name="choosePlan" class="form-select" aria-label="Choose Plan">
<option selected>Choose Plan</option>
<option value="standard">Standard - $99/month</option>
<option value="exclusive">Exclusive - $249/month</option>
<option value="Enterprise">Enterprise - $499/month</option>
</select>
</div>
<div class="col-sm-3 d-flex align-items-end">
<button type="submit" class="btn btn-primary">Upgrade</button>
</div>
</form>
</div>
<hr class="mx-md-n5 mx-n3" />
<div class="modal-body">
<h6 class="mb-0">User current plan is standard plan</h6>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex justify-content-center me-2 mt-1">
<sup class="h6 pricing-currency pt-1 mt-2 mb-0 me-1 text-primary">$</sup>
<h1 class="mb-0 text-primary">99</h1>
<sub class="pricing-duration mt-auto mb-5 pb-1 small text-body">/month</sub>
</div>
<button class="btn btn-label-danger cancel-subscription">Cancel Subscription</button>
</div>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->
<!-- /Modal -->
</div>
<!-- / Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
<div class="container-xxl">
<div
class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
<div class="text-body">
&#169;
<script>
document.write(new Date().getFullYear());
</script>
, made with ❤️ by <a href="https://pixinvent.com" target="_blank" class="footer-link">Pixinvent</a>
</div>
<div class="d-none d-lg-inline-block">
<a href="https://themeforest.net/licenses/standard" class="footer-link me-4" target="_blank"
>License</a
>
<a href="https://themeforest.net/user/pixinvent/portfolio" target="_blank" class="footer-link me-4"
>More Themes</a
>
<a
href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
target="_blank"
class="footer-link me-4"
>Documentation</a
>
<a href="https://pixinvent.ticksy.com/" target="_blank" class="footer-link d-none d-sm-inline-block"
>Support</a
>
</div>
</div>
</div>
</footer>
<!-- / Footer -->
<div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->
</div>
<!-- / Layout page -->
</div>
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!-- / Layout wrapper -->
<!-- Core JS -->
<!-- build:js assets/vendor/js/theme.js -->
<script src="../../assets/vendor/libs/jquery/jquery.js"></script>
<script src="../../assets/vendor/libs/popper/popper.js"></script>
<script src="../../assets/vendor/js/bootstrap.js"></script>
<script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
<script src="../../assets/vendor/libs/pickr/pickr.js"></script>
<script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="../../assets/vendor/libs/hammer/hammer.js"></script>
<script src="../../assets/vendor/libs/i18n/i18n.js"></script>
<script src="../../assets/vendor/js/menu.js"></script>
<!-- endbuild -->
<!-- Vendors JS -->
<script src="../../assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
<script src="../../assets/vendor/libs/cleave-zen/cleave-zen.js"></script>
<script src="../../assets/vendor/libs/select2/select2.js"></script>
<script src="../../assets/vendor/libs/@form-validation/popular.js"></script>
<script src="../../assets/vendor/libs/@form-validation/bootstrap5.js"></script>
<script src="../../assets/vendor/libs/@form-validation/auto-focus.js"></script>
<!-- Main JS -->
<script src="../../assets/js/main.js"></script>
<!-- Page JS -->
<script src="../../assets/js/modal-edit-user.js"></script>
<script src="../../assets/js/modal-edit-cc.js"></script>
<script src="../../assets/js/modal-add-new-cc.js"></script>
<script src="../../assets/js/modal-add-new-address.js"></script>
<script src="../../assets/js/app-user-view.js"></script>
<script src="../../assets/js/app-user-view-billing.js"></script>
</body>
</html>