alma/VvebOIDC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
2b374c8ddb
VvebOIDC/public/admin/default/editor/editor.html

3750 lines
168 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/favicon.ico">
<base href="../">
<title>Vvveb - Editor</title>
<link href="css/admin.css" rel="stylesheet">
</head>
<body style="overflow:hidden">
<div id="container" class="small-nav">
<div class="sidebar" data-v-component-site>
<div class="logo">
<a href="{$this.adminPath}index.php" class="img" title="{$site.description.title}">
<img src="" data-v-site-logo>
<img src="" data-v-site-logo-dark>
</a>
<a id="search-btn" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<i class="icon-search"></i>
</a>
</div>
<!-- navbar -->
<nav class="navbar navbar-expand-md">
<div class="logo">
<!-- h1 class="display-5"><a href="#">M.</a></h1-->
<a href="/admin" class="img">
<img src="" data-v-site-logo>
<img src="" data-v-site-logo-dark>
</a>
<a id="search-btn" title="Search" data-bs-toggle="modal" data-bs-target="#searchModal">
<i class="icon-search"></i>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarNav" aria-controls="sidebarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav flex-column" data-v-menu>
<li class="nav-item" data-v-menu-item>
<a class="nav-link" href="/admin" data-bs-target="#posts"
data-v-menu-item-url>
<i class="icon-pulse-outline" data-v-menu-item-icon></i>
<img src class="icon-img" data-v-menu-item-icon-img></i>
<span class="title" data-v-menu-item-name>Dashboard</span>
<span class="text-muted" data-v-menu-item-subtitle>Subtitle</span>
<span class="badge badge-primary" data-v-menu-item-badge></span>
</a>
<ul class="collapse sub-menu fade" data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/adminindex.php?module=posts" class="nav-link"
data-v-submenu-item-url>
<i class="icon-pulse-outline" data-v-submenu-item-icon></i>
<img src class="icon-img" data-v-submenu-item-icon-img></i>
<span data-v-submenu-item-name>Submenu</span>
<span class="text-muted" data-v-submenu-item-subtitle>Subtitle</span>
<span class="badge badge-primary" data-v-submenu-item-badge></span>
</a>
</li>
</ul>
</li>
</ul>
</div>
-->
<div class="collapse navbar-collapse" id="sidebarNav">
<ul class="nav navbar-nav flex-column" data-v-menu>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block " href="/admin" data-v-menu-item-url>
<i class="icon-pulse-outline" data-v-menu-item-icon></i>
<img src="#" class="icon-img" data-v-menu-item-icon-img>
<span class="title" data-v-menu-item-name>Dashboard</span>
<!-- span class="text-muted" data-v-menu-item-subtitle>Subtitle</span -->
<span class="badge badge-primary" data-v-menu-item-badge></span>
</a>
<a class="nav-link mobile d-block d-sm-none" href="/admin" data-v-menu-item-url>
<i class="icon-pulse-outline" data-v-menu-item-icon></i>
<img src="#" class="icon-img" data-v-menu-item-icon-img>
<span class="title" data-v-menu-item-name>Dashboard</span>
<!-- span class="text-muted" data-v-menu-item-subtitle>Subtitle</span -->
<span class="badge badge-primary" data-v-menu-item-badge></span>
</a>
<ul class="dropdown-menu sub-menu fade" data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/adminindex.php?module=posts" class="nav-link" data-v-submenu-item-url>
<i class="icon-pulse-outline" data-v-submenu-item-icon></i>
<img src="#" class="icon-img" data-v-submenu-item-icon-img>
</i>
<span data-v-submenu-item-name>Submenu</span>
<span class="text-muted" data-v-submenu-item-subtitle>Subtitle</span>
<span class="badge badge-primary" data-v-submenu-item-badge></span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block " href="/admin/?module=editor/editor&amp;url=/&amp;template=index.html" data-v-menu-item-url title="Edit website" data-bs-target="#menu-edit">
<i class="icon-color-wand-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Edit website</span>
</a>
<a class="nav-link mobile d-block d-sm-none " href="/admin/?module=editor/editor&amp;url=/&amp;template=index.html" data-v-menu-item-url title="Edit website" data-bs-target="#menu-edit">
<i class="icon-color-wand-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Edit website</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=content/posts&amp;type=post" data-v-menu-item-url title="Posts" data-bs-target="#menu-post">
<i class="icon-document-text-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Posts</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=content/posts&amp;type=post" data-v-menu-item-url title="Posts" data-bs-toggle="dropdown" data-bs-target="#menu-post">
<i class="icon-document-text-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Posts</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/posts&amp;type=post" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-alt" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Posts</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/post&amp;type=post" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Taxonomy</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/tags&amp;type=post&amp;taxonomy_id=2" class="nav-link " data-v-submenu-item-url>
<i class="la la-tags" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Tags</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/categories&amp;type=post&amp;taxonomy_id=1" class="nav-link " data-v-submenu-item-url>
<i class="la la-boxes" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Categories</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>General</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/comments&amp;status=0&amp;type=post" class="nav-link " data-v-submenu-item-url>
<i class="la la-comments" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Comments</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=content/posts&amp;type=page" data-v-menu-item-url title="Pages" data-bs-target="#menu-pages">
<i class="icon-document-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Pages</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=content/posts&amp;type=page" data-v-menu-item-url title="Pages" data-bs-toggle="dropdown" data-bs-target="#menu-pages">
<i class="icon-document-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Pages</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/posts&amp;type=page" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-invoice" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Pages</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/post&amp;type=page" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new page</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Taxonomy</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/menus&amp;type=page" class="nav-link " data-v-submenu-item-url>
<i class="la la-boxes" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Menus</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block " href="/admin/?module=media/media" data-v-menu-item-url title="Media library" data-bs-target="#menu-medialibrary">
<i class="icon-images-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Media library</span>
</a>
<a class="nav-link mobile d-block d-sm-none " href="/admin/?module=media/media" data-v-menu-item-url title="Media library" data-bs-target="#menu-medialibrary">
<i class="icon-images-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Media library</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=user/users" data-v-menu-item-url title="Users" data-bs-target="#menu-users">
<i class="icon-people-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Users</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=user/users" data-v-menu-item-url title="Users" data-bs-toggle="dropdown" data-bs-target="#menu-users">
<i class="icon-people-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Users</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=user/users" class="nav-link " data-v-submenu-item-url>
<i class="la la-user" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Users</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=user/user" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new user</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Groups</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=user/user-groups" class="nav-link " data-v-submenu-item-url>
<i class="la la-user-friends" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>User groups</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=user/user-group" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new group</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block " href="/admin/?module=plugins/contact-form/messages" data-v-menu-item-url title="Messages" data-bs-target="#menu-messages">
<i class="icon-mail-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Messages</span>
</a>
<a class="nav-link mobile d-block d-sm-none " href="/admin/?module=plugins/contact-form/messages" data-v-menu-item-url title="Messages" data-bs-target="#menu-messages">
<i class="icon-mail-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Messages</span>
</a>
</li>
<li class="nav-item heading" data-v-menu-item>
<a class="nav-link d-none d-md-block " href="/admin/?module=product/products" data-v-menu-item-url title="Ecommerce" data-bs-target="#menu-ecommerce">
<span class="title" data-v-menu-item-name>Ecommerce</span>
</a>
<a class="nav-link mobile d-block d-sm-none " href="/admin/?module=product/products" data-v-menu-item-url title="Ecommerce" data-bs-target="#menu-ecommerce">
<span class="title" data-v-menu-item-name>Ecommerce</span>
</a>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=order/orders" data-v-menu-item-url title="Sales" data-bs-target="#menu-sales">
<i class="icon-bag-handle-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Sales</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=order/orders" data-v-menu-item-url title="Sales" data-bs-toggle="dropdown" data-bs-target="#menu-sales">
<i class="icon-bag-handle-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Sales</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=order/orders" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-invoice-dollar" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Orders</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=order/subscriptions" class="nav-link " data-v-submenu-item-url>
<i class="la la-retweet" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Subscriptions</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=order/returns" class="nav-link " data-v-submenu-item-url>
<i class="la la-undo" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Returns</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Marketing</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=order/coupons" class="nav-link " data-v-submenu-item-url>
<i class="la la-percentage" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Discount coupons</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=order/vouchers" class="nav-link " data-v-submenu-item-url>
<i class="la la-gift" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Gift vouchers</span>
</a>
</li>
</ul>
</li>
<li class="nav-item align-middle columns-2" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=product/products&amp;type=product" data-v-menu-item-url title="Products" data-bs-target="#menu-product">
<i class="icon-cube-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Products</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=product/products&amp;type=product" data-v-menu-item-url title="Products" data-bs-toggle="dropdown" data-bs-target="#menu-product">
<i class="icon-cube-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Products</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/products&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-box" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Products</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/product&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Taxonomy</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/tags&amp;type=product&amp;taxonomy_id=5" class="nav-link " data-v-submenu-item-url>
<i class="la la-tags" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Tags</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/categories&amp;type=product&amp;taxonomy_id=4" class="nav-link " data-v-submenu-item-url>
<i class="la la-boxes" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Categories</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Relations</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/manufacturers&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-industry" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Manufacturers</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/vendors&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-store" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Vendors</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Content</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/digital-assets&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-cloud-download-alt" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Digital assets</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/options&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-stream" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Options</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/attribute-groups&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-list" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Attributes</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>User feedback</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/product-reviews&amp;status=0&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-comment" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Reviews</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=product/product-questions&amp;status=0&amp;type=product" class="nav-link " data-v-submenu-item-url>
<i class="la la-question-circle" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Questions</span>
</a>
</li>
</ul>
</li>
<li class="nav-item heading" data-v-menu-item>
<a class="nav-link d-none d-md-block " href="/admin/?module=settings/sites" data-v-menu-item-url title="Configuration" data-bs-target="#menu-configuration">
<span class="title" data-v-menu-item-name>Configuration</span>
</a>
<a class="nav-link mobile d-block d-sm-none " href="/admin/?module=settings/sites" data-v-menu-item-url title="Configuration" data-bs-target="#menu-configuration">
<span class="title" data-v-menu-item-name>Configuration</span>
</a>
</li>
<li class="nav-item align-top" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=plugin/plugins" data-v-menu-item-url title="Plugins" data-bs-target="#menu-plugins">
<i class="icon-extension-puzzle-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Plugins</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=plugin/plugins" data-v-menu-item-url title="Plugins" data-bs-toggle="dropdown" data-bs-target="#menu-plugins">
<i class="icon-extension-puzzle-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Plugins</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=plugin/plugins" class="nav-link " data-v-submenu-item-url>
<i class="la la-plug" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Installed Plugins</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=plugin/market" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new plugin</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=editor/code&amp;type=plugins" class="nav-link " data-v-submenu-item-url>
<i class="la la-code" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Code editor</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Plugins</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=plugins/contact-form/messages" class="nav-link " data-v-submenu-item-url>
<img src="/plugins/contact-form/contact-form.svg" class="icon-img" data-v-submenu-item-icon-img>
<span data-v-submenu-item-name>Contact form</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=editor/editor&amp;url=/plugins/cookie-notice/notice.html&amp;template=/plugins/cookie-notice/notice.html" class="nav-link " data-v-submenu-item-url>
<img src="/plugins/cookie-notice/cookie-notice.svg" class="icon-img" data-v-submenu-item-icon-img>
<span data-v-submenu-item-name>Cookie notice</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=theme/themes" data-v-menu-item-url title="Themes" data-bs-target="#menu-themes">
<i class="icon-copy-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Themes</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=theme/themes" data-v-menu-item-url title="Themes" data-bs-toggle="dropdown" data-bs-target="#menu-themes">
<i class="icon-copy-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Themes</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=theme/themes" class="nav-link " data-v-submenu-item-url>
<i class="la la-brush" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Installed Themes</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=theme/market" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=editor/code&amp;type=themes" class="nav-link " data-v-submenu-item-url>
<i class="la la-code" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Code editor</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=field/field-groups" data-v-menu-item-url title="Fields" data-bs-target="#menu-field">
<i class="icon-reader-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Fields</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=field/field-groups" data-v-menu-item-url title="Fields" data-bs-toggle="dropdown" data-bs-target="#menu-field">
<i class="icon-reader-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Fields</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=field/field-groups" class="nav-link " data-v-submenu-item-url>
<i class="la la-brush" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Field groups</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=field/field-group" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new</span>
</a>
</li>
</ul>
</li>
<li class="nav-item align-top mega-menu" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=settings/sites" data-v-menu-item-url title="Settings" data-bs-target="#menu-settings">
<i class="icon-settings-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Settings</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=settings/sites" data-v-menu-item-url title="Settings" data-bs-toggle="dropdown" data-bs-target="#menu-settings">
<i class="icon-settings-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Settings</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/sites" class="nav-link items" data-v-submenu-item-url>
<i class="la la-stop la-90" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Sites</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/sites" class="nav-link " data-v-submenu-item-url>
<i class="la la-stop" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Sites</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/site" class="nav-link " data-v-submenu-item-url>
<i class="la la-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=admin/users" class="nav-link items" data-v-submenu-item-url>
<i class="la la-user" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Admin users</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=admin/users" class="nav-link " data-v-submenu-item-url>
<i class="la la-user" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Users</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=admin/user" class="nav-link " data-v-submenu-item-url>
<i class="la la-user-plus" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add new user</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Roles</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=admin/roles" class="nav-link " data-v-submenu-item-url>
<i class="la la-user-cog" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Manage Roles</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=admin/role" class="nav-link " data-v-submenu-item-url>
<i class="la la-user-tag" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Add Role</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=content/menus" class="nav-link items" data-v-submenu-item-url>
<i class="la la-file-alt" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Content</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/taxonomies" class="nav-link " data-v-submenu-item-url>
<i class="la la-boxes" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Taxonomies</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/posts" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-alt" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Custom posts</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/products" class="nav-link " data-v-submenu-item-url>
<i class="la la-box" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Custom products</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=field/field-group" class="nav-link " data-v-submenu-item-url>
<i class="la la-stream" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Fields</span>
</a>
</li>
</ul>
</li>
<li class="nav-item align-top" data-v-submenu-item>
<a href="/admin/?module=user/users" class="nav-link items" data-v-submenu-item-url>
<i class="la la-shopping-cart" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Ecommerce</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/subscription-plans" class="nav-link " data-v-submenu-item-url>
<i class="la la-receipt" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Subscriptions plans</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/tax-types" class="nav-link items" data-v-submenu-item-url>
<i class="la la-file-invoice-dollar" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Taxes</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/tax-types" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-invoice" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Tax types</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/tax-rates" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-invoice-dollar" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Tax rates</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/order-statuses" class="nav-link items" data-v-submenu-item-url>
<i class="la la-tags" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Statuses</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/order-statuses" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-invoice" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Order</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/stock-statuses" class="nav-link " data-v-submenu-item-url>
<i class="la la-box" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Stock</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/subscription-statuses" class="nav-link " data-v-submenu-item-url>
<i class="la la-retweet" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Subscription</span>
</a>
</li>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Returns</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/return-statuses" class="nav-link " data-v-submenu-item-url>
<i class="la la-undo" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Return status</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/return-resolutions" class="nav-link " data-v-submenu-item-url>
<i class="la la-exchange-alt" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Return resolutions</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/return-reasons" class="nav-link " data-v-submenu-item-url>
<i class="la la-undo-alt" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Return reasons</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/discount" class="nav-link items" data-v-submenu-item-url>
<i class="la la-ruler" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Classes</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/length-types" class="nav-link " data-v-submenu-item-url>
<i class="la la-ruler-horizontal" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Length</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/weight-types" class="nav-link " data-v-submenu-item-url>
<i class="la la-box" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Weight</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=localization/languages" class="nav-link items" data-v-submenu-item-url>
<i class="la la-flag" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Localization</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=localization/languages" class="nav-link " data-v-submenu-item-url>
<i class="la la-language" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Languages</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=localization/currencies" class="nav-link " data-v-submenu-item-url>
<i class="la la-coins" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Currencies</span>
</a>
</li>
<li class="nav-item align-top" data-v-submenu-item>
<a href="/admin/?module=localization/region-groups" class="nav-link items" data-v-submenu-item-url>
<i class="la la-globe" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Geo location</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=localization/countries" class="nav-link " data-v-submenu-item-url>
<i class="la la-flag" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Countries</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=localization/regions" class="nav-link " data-v-submenu-item-url>
<i class="la la-city" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Regions</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=localization/region-groups" class="nav-link " data-v-submenu-item-url>
<i class="la la-atlas" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Region Groups</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/email" class="nav-link items" data-v-submenu-item-url>
<i class="la la-tools" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>System</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=settings/email" class="nav-link " data-v-submenu-item-url>
<i class="la la-envelope" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Email settings</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item align-top" data-v-menu-item>
<a class="nav-link d-none d-md-block items" href="/admin/?module=tools/cache" data-v-menu-item-url title="Tools" data-bs-target="#menu-tools">
<i class="icon-globe-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Tools</span>
</a>
<a class="nav-link mobile d-block d-sm-none items" href="/admin/?module=tools/cache" data-v-menu-item-url title="Tools" data-bs-toggle="dropdown" data-bs-target="#menu-tools">
<i class="icon-globe-outline" data-v-menu-item-icon></i>
<span class="title" data-v-menu-item-name>Tools</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/cache" class="nav-link " data-v-submenu-item-url>
<i class="la la-circle-notch" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Cache</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/backup" class="nav-link " data-v-submenu-item-url>
<i class="la la-server" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Backup</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/cron" class="nav-link " data-v-submenu-item-url>
<i class="la la-history la-90" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Cron job</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/import" class="nav-link items" data-v-submenu-item-url>
<i class="la la-upload" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Import/Export</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item heading" data-v-submenu-item>
<a href class="nav-link " data-v-submenu-item-url>
<span data-v-submenu-item-name>Content</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/import" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-import" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Import content</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/export" class="nav-link " data-v-submenu-item-url>
<i class="la la-file-export" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Export content</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/systeminfo" class="nav-link items" data-v-submenu-item-url>
<i class="la la-info-circle" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>System info</span>
</a>
<ul class="dropdown-menu sub-menu fade " data-v-submenu>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/systeminfo" class="nav-link " data-v-submenu-item-url>
<i class="la la-info" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>System Info</span>
</a>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/errorlog" class="nav-link " data-v-submenu-item-url>
<i class="la la-bug" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Error log</span>
</a>
</li>
</ul>
</li>
<li class="nav-item" data-v-submenu-item>
<a href="/admin/?module=tools/update" class="nav-link " data-v-submenu-item-url>
<i class="la la-sync" data-v-submenu-item-icon></i>
<span data-v-submenu-item-name>Update</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav> <!-- /navbar -->
</div>
<div class="main">
<div id="vvveb-builder">
<div id="top-panel">
<div class="btn-group" role="group">
<button class="btn px-2 ms-1 menu-toggle" title="Toggle sidebar width">
<i class="icon-menu-outline"></i>
</button>
<button class="btn btn-light" title="Toggle file manager" id="toggle-file-manager-btn" data-vvveb-action="toggleFileManager" data-bs-toggle="button" aria-pressed="false">
<img src="/js/vvvebjs/icons/file-manager-layout.svg" width="18" height="18">
</button>
<button class="btn btn-light" title="Toggle left column" id="toggle-left-column-btn" data-vvveb-action="toggleLeftColumn" data-bs-toggle="button" aria-pressed="false">
<img src="/js/vvvebjs/icons/left-column-layout.svg" width="18" height="18">
</button>
<button class="btn btn-light" title="Toggle right column" id="toggle-right-column-btn" data-vvveb-action="toggleRightColumn" data-bs-toggle="button" aria-pressed="false">
<img src="/js/vvvebjs/icons/right-column-layout.svg" width="18" height="18">
</button>
</div>
<div>
<div class="btn-group me-3" role="group">
<button class="btn btn-light" title="Undo (Ctrl/Cmd + Z)" id="undo-btn" data-vvveb-action="undo" data-vvveb-shortcut="ctrl+z">
<i class="la la-undo"></i>
</button>
<button class="btn btn-light" title="Redo (Ctrl/Cmd + Shift + Y)" id="redo-btn" data-vvveb-action="redo" data-vvveb-shortcut="ctrl+shift+z">
<i class="la la-undo la-flip-horizontal"></i>
</button>
</div>
<div class="btn-group me-3" role="group">
<button class="btn btn-light" title="Designer Mode (Free dragging)" id="designer-mode-btn" data-bs-toggle="button" aria-pressed="false" data-vvveb-action="setDesignerMode">
<i class="la la-hand-rock"></i>
</button>
<button class="btn btn-light" title="Preview" id="preview-btn" type="button" data-bs-toggle="button" aria-pressed="false" data-vvveb-action="preview">
<i class="icon-eye-outline"></i>
</button>
<button class="btn btn-light" title="Fullscreen (F11)" id="fullscreen-btn" data-bs-toggle="button" aria-pressed="false" data-vvveb-action="fullscreen">
<i class="icon-expand-outline"></i>
</button>
<button class="btn btn-light" title="Show hidden elements" id="toggle-hidden" data-bs-toggle="button" data-vvveb-action="toggleHidden" aria-pressed="false">
<i class="icon-scan-outline"></i>
</button>
<button class="btn btn-light active" title="Toggle navigator (Ctrl + Shift + L)" id="toggle-tree-list" data-bs-toggle="button" data-vvveb-action="toggleTreeList" aria-pressed="true">
<i class="icon-layers-outline"></i>
</button>
<!-- button class="btn btn-light" title="Download" id="download-btn" data-vvveb-action="download" data-v-download="index.html">
<i class="la la-download"></i>
</button -->
</div>
</div>
<div class="btn-group">
<div class="me-2">
<button id="color-theme-switch" title="Switch sidebar color theme" class="btn px-1 ms-1">
<i class="la la-sun"></i>
</button>
<a href="#" class="btn btn-light btn-preview-url" target="_blank" title="View page">
<i class="la la-external-link-alt fs-6"></i>
</a>
<div class="btn-group responsive-btns" role="group">
<button id="mobile-view" data-view="mobile" class="btn btn-light" title="Mobile view" data-vvveb-action="viewport">
<i class="la la-mobile"></i>
</button>
<button id="tablet-view" data-view="tablet" class="btn btn-light" title="Tablet view" data-vvveb-action="viewport">
<i class="la la-tablet"></i>
</button>
<button id="desktop-view" data-view="" class="btn btn-light" title="Desktop view" data-vvveb-action="viewport">
<i class="la la-laptop"></i>
</button>
<div class="percent">
<input type="number" id="zoom" value="100" step="10" min="10" max="100" class="form-control" data-vvveb-action="zoomChange" data-vvveb-on="change">
</div>
</div>
</div>
<div class="align-self-center">
<button type="button" class="btn btn-light btn-sm me-2" data-bs-toggle="dropdown" aria-expanded="false" title="Revisions">
<strong class="small revisions-count">0</strong>
<i class="la la-lg la-history"></i>
<!-- <span>revisions</span> -->
</button>
<div class="dropdown-menu">
<div style="max-height:300px;overflow:auto;" class="revisions-dropdown">
<div class="dropdown-item d-flex align-items-center">
<div class="flex-grow-1 me-2">
<div class="flex-grow-1">
Today
</div>
<span class="small text-muted">
(2023-06-04 10:30:31)
</span>
<!-- <a href="#" target="_blank" class="small text-muted">Admin</a> -->
</div>
<div>
<button class="btn btn-sm btn-outline-primary border-0" title="Load">
<i class="la la-arrow-up"></i>
</button>
<button class="btn btn-sm btn-outline-danger border-0" title="Delete">
<i class="la la-trash"></i>
</button>
</div>
</div>
<div class="dropdown-item d-flex align-items-center">
<div class="flex-grow-1 me-2">
<div class="flex-grow-1">
Yesterday
</div>
<span class="small text-muted">
(2023-06-03 10:30:31)
</span>
<!-- <a href="#" target="_blank" class="small text-muted">Admin</a> -->
</div>
<div>
<button class="btn btn-sm btn-outline-primary border-0" title="Load">
<i class="la la-arrow-up"></i>
</button>
<button class="btn btn-sm btn-outline-danger border-0" title="Delete">
<i class="la la-trash"></i>
</button>
</div>
</div>
<div class="dropdown-item d-flex align-items-center">
<div class="flex-grow-1 me-2">
<div class="flex-grow-1">
3 Days ago
</div>
<span class="small text-muted">
(2023-06-01 10:30:31)
</span>
<!-- <a href="#" target="_blank" class="small text-muted">Admin</a> -->
</div>
<div>
<button class="btn btn-sm btn-outline-primary border-0" title="Load">
<i class="la la-arrow-up"></i>
</button>
<button class="btn btn-sm btn-outline-danger border-0" title="Delete">
<i class="la la-trash"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group me-2" role="group">
<div class="btn-group" data-v-check-permission-save>
<button class="btn btn-primary btn-icon btn-sm save-btn" title="Save changes (Ctrl + S)" data-vvveb-action="saveAjax" data-vvveb-url="{$this.adminPath}index.php?module=editor/editor&action=save" data-v-vvveb-shortcut="ctrl+s" disabled>
<span class="loading d-none">
<i class="la la-save"></i>
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"></span>
<span>Saving </span> ...
</span>
<span class="button-text">
<i class="icon-save-outline"></i>
<span>Save</span>
</span>
</button>
<button type="button" class="btn btn-icon btn-primary btn-sm save-btn dropdown-toggle dropdown-toggle-split text-white" id="showChangesBtn" data-vvveb-action="showChanges" data-bs-toggle="offcanvas" aria-expanded="false" data-bs-target="#save-offcanvas" aria-controls="save-offcanvas" data-bs-reference="parent" disabled>
<span class="visually-hidden">Toggle primary</span>
</button>
</div>
</div>
</div>
</div>
<div id="left-panel">
<div>
<div id="filemanager">
<div class="header">
<span class="text-muted">
<i class="la la-file la-lg"></i>
<span>Templates<span></span>
<div class="btn-group responsive-btns float-end" role="group">
<button class="btn btn-outline-primary btn-sm btn-add" title="New page (Ctrl + Shift + P)" id="new-file-btn" data-vvveb-action="newPage" data-vvveb-shortcut="">
<span>Add page</span>
<i class="icon-add"></i>
</button>
<!--
<button class="btn btn-link text-dark p-0" title="Delete file" id="delete-file-btn" data-vvveb-action="deletePage" data-vvveb-shortcut="">
<i class="la la-trash"></i> <small>Delete</small>
</button> -->
</div>
</div>
<div class="tree">
<ol>
</ol>
</div>
</div>
<div class="drag-elements">
<div class="header">
<ul class="nav nav-tabs nav-fill" id="elements-tabs" role="tablist">
<li class="nav-item sections-tab">
<a class="nav-link active" id="sections-tab" data-bs-toggle="tab" href="#sections" role="tab" aria-controls="sections" aria-selected="true" title="Sections">
<i class="icon-layers-outline"></i>
<!-- img src="/js/vvvebjs/icons/list_group.svg" height="23" -->
<!-- div><small>Sections</small></div -->
</a>
</li>
<li class="nav-item component-tab">
<a class="nav-link" id="components-tab" data-bs-toggle="tab" href="#components-tabs" role="tab" aria-controls="components" aria-selected="false" title="Components">
<i class="icon-cube-outline"></i>
<!-- img src="/js/vvvebjs/icons/product.svg" height="23" -->
<!-- div><small>Components</small></div -->
</a>
</li>
<!-- li class="nav-item sections-tab">
<a class="nav-link" id="sections-tab" data-bs-toggle="tab" href="#sections" role="tab" aria-controls="sections" aria-selected="false" title="Sections"><img src="/js/vvvebjs/icons/list_group.svg" width="24" height="23"> <div><small>Sections</small></div></a>
</li -->
<li class="nav-item component-properties-tab d-none">
<a class="nav-link" id="properties-tab" data-bs-toggle="tab" href="#properties" role="tab" aria-controls="properties" aria-selected="false" title="Properties">
<i class="icon-settings-outline"></i>
<!-- img src="/js/vvvebjs/icons/filters.svg" height="23"-->
<!-- div><small>Properties</small></div -->
</a>
</li>
<li class="nav-item component-configuration-tab">
<a class="nav-link" id="configuration-tab" data-bs-toggle="tab" href="#configuration" role="tab" aria-controls="configuration" aria-selected="false" title="Style">
<i class="icon-color-wand-outline"></i>
<!-- img src="/js/vvvebjs/icons/filters.svg" height="23"-->
<!-- div><small>Properties</small></div -->
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active sections" id="sections" role="tabpanel" aria-labelledby="sections-tab">
<ul class="nav nav-tabs nav-fill sections-tabs" id="sections-tabs" role="tablist">
<li class="nav-item content-tab">
<a class="nav-link active" data-bs-toggle="tab" href="#sections-new-tab" role="tab" aria-controls="components" aria-selected="false">
<i class="icon-albums-outline"></i>
<div>
<span>Sections</span>
</div>
</a>
</li>
<li class="nav-item style-tab">
<a class="nav-link" data-bs-toggle="tab" href="#sections-list" role="tab" aria-controls="sections" aria-selected="true">
<i class="icon-document-text-outline"></i>
<div>
<span>Page Sections</span>
</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="sections-list" data-section="style" role="tabpanel" aria-labelledby="style-tab">
<div class="drag-elements-sidepane sidepane">
<div>
<div class="sections-container">
<div class="section-item" draggable="true">
<div class="controls">
<div class="handle"></div>
<div class="info">
<div class="name">&nbsp;
<div class="type">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="section-item" draggable="true">
<div class="controls">
<div class="handle"></div>
<div class="info">
<div class="name">&nbsp;
<div class="type">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="section-item" draggable="true">
<div class="controls">
<div class="handle"></div>
<div class="info">
<div class="name">&nbsp;
<div class="type">&nbsp;</div>
</div>
</div>
</div>
</div>
<!-- div class="section-item" draggable="true">
<div class="controls">
<div class="handle"></div>
<div class="info">
<div class="name">welcome area
<div class="type">section</div>
</div>
</div>
<div class="buttons"> <a class="delete-btn" href="" title="Remove section"><i class="la la-trash text-danger"></i></a>
<a class="properties-btn" href="" title="Properties"><i class="icon-settings-outline"></i></a> </div>
</div>
<input class="header_check" type="checkbox" id="section-components-9338">
<label for="section-components-9338">
<div class="header-arrow"></div>
</label>
<div class="tree">
<ol></ol>
</div>
</div -->
</div>
</div>
</div>
</div>
<div class="tab-pane show active" id="sections-new-tab" data-section="content" role="tabpanel" aria-labelledby="content-tab">
<div class="search">
<div class="expand">
<button class="text-sm" title="Expand All" data-vvveb-action="expand">
<i class="la la-plus"></i>
</button>
<button title="Collapse all" data-vvveb-action="collapse">
<i class="la la-minus"></i>
</button>
</div>
<input class="form-control section-search" placeholder="Search sections" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
<button class="clear-backspace" data-vvveb-action="clearSearch" title="Clear search">
<i class="la la-times"></i>
</button>
</div>
<div class="drag-elements-sidepane sidepane">
<div class="block-preview">
<img src="" style="display:none">
</div>
<div>
<ul class="sections-list" data-type="leftpanel">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane show" id="components-tabs" role="tabpanel" aria-labelledby="components-tab">
<ul class="nav nav-tabs nav-fill sections-tabs" role="tablist">
<li class="nav-item components-tab">
<a class="nav-link active" data-bs-toggle="tab" href="#components" role="tab" aria-controls="components" aria-selected="true">
<i class="icon-cube-outline"></i>
<div>
<span>Components</span>
</div>
</a>
</li>
<li class="nav-item blocks-tab">
<a class="nav-link" data-bs-toggle="tab" href="#blocks" role="tab" aria-controls="components" aria-selected="false">
<i class="icon-copy-outline"></i>
<div>
<span>Blocks</span>
</div>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active components" id="components" data-section="components" role="tabpanel" aria-labelledby="components-tab">
<div class="search">
<div class="expand">
<button class="text-sm" title="Expand All" data-vvveb-action="expand">
<i class="la la-plus"></i>
</button>
<button title="Collapse all" data-vvveb-action="collapse">
<i class="la la-minus"></i>
</button>
</div>
<input class="form-control component-search" placeholder="Search components" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
<button class="clear-backspace" data-vvveb-action="clearSearch">
<i class="la la-times"></i>
</button>
</div>
<div class="drag-elements-sidepane sidepane">
<div>
<ul class="components-list" data-type="leftpanel">
</ul>
</div>
</div>
</div>
<div class="tab-pane blocks" id="blocks" data-section="content" role="tabpanel" aria-labelledby="content-tab">
<div class="search">
<div class="expand">
<button class="text-sm" title="Expand All" data-vvveb-action="expand">
<i class="la la-plus"></i>
</button>
<button title="Collapse all" data-vvveb-action="collapse">
<i class="la la-minus"></i>
</button>
</div>
<input class="form-control block-search" placeholder="Search blocks" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
<button class="clear-backspace" data-vvveb-action="clearSearch">
<i class="la la-times"></i>
</button>
</div>
<div class="drag-elements-sidepane sidepane">
<div class="block-preview">
<img src="">
</div>
<div>
<ul class="blocks-list" data-type="leftpanel">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="properties" role="tabpanel" aria-labelledby="properties-tab">
<div class="component-properties-sidepane">
<div>
<div class="component-properties">
<ul class="nav nav-tabs nav-fill" id="properties-tabs" role="tablist">
<li class="nav-item content-tab">
<a class="nav-link content-tab active" data-bs-toggle="tab" href="#content-left-panel-tab" role="tab" aria-controls="components" aria-selected="true">
<i class="icon-albums-outline"></i>
<span>Content</span>
</a>
</li>
<li class="nav-item style-tab">
<a class="nav-link" data-bs-toggle="tab" href="#style-left-panel-tab" role="tab" aria-controls="style" aria-selected="false">
<i class="icon-color-fill-outline"></i>
<span>Style</span>
</a>
</li>
<li class="nav-item advanced-tab">
<a class="nav-link" data-bs-toggle="tab" href="#advanced-left-panel-tab" role="tab" aria-controls="advanced" aria-selected="false">
<i class="icon-settings-outline"></i>
<span>Advanced</span>
</a>
</li>
</ul>
<div class="tab-content" data-offset="35">
<div class="tab-pane show active" id="content-left-panel-tab" data-section="content" role="tabpanel" aria-labelledby="content-tab">
<div class="alert alert-dismissible fade show alert-light m-3" role="alert" style="">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>No selected element!</strong>
<br> Click on an element to edit.
</div>
</div>
<div class="tab-pane show" id="style-left-panel-tab" data-section="style" role="tabpanel" aria-labelledby="style-tab">
<div class="pb-2 px-2">
<div class="justify-content-end d-flex">
<select class="form-select w-50" data-vvveb-action="setState" data-vvveb-on="change">
<option value=""> - State - </option>
<option value="hover">hover</option>
<option value="active">active</option>
<option value="nth-of-type(2n)">nth-of-type(2n)</option>
</select>
</div>
</div>
</div>
<div class="tab-pane show" id="advanced-left-panel-tab" data-section="advanced" role="tabpanel" aria-labelledby="advanced-tab">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="configuration" role="tabpanel" aria-labelledby="configuration-tab">
<ul class="nav nav-tabs nav-fill sections-tabs" id="vars-tabs" role="tablist">
<li class="nav-item styles-tab">
<a class="nav-link active" data-bs-toggle="tab" href="#styles-tab" role="tab" aria-controls="styles" aria-selected="true">
<i class="icon-color-wand-outline"></i>
<div>
<span>Styles</span>
</div>
</a>
</li>
<li class="nav-item vars-tab">
<a class="nav-link" data-bs-toggle="tab" href="#vars-tab" role="tab" aria-controls="components" aria-selected="false">
<i class="icon-brush-outline"></i>
<div>
<span>Variables</span>
</div>
</a>
</li>
<!--
<li class="nav-item css-tab">
<a class="nav-link" data-bs-toggle="tab" href="#css-tab" role="tab" aria-controls="css" aria-selected="true">
<i class="icon-code-slash-outline"></i> <div><span>Css</span></div></a>
</li>
-->
</ul>
<div class="tab-content">
<div class="tab-pane show active styles" id="styles-tab" data-section="styles" role="tabpanel" aria-labelledby="styles-tab">
<div class="search">
<div class="expand">
<button class="text-sm" title="Expand All" data-vvveb-action="expand">
<i class="la la-plus"></i>
</button>
<button title="Collapse all" data-vvveb-action="collapse">
<i class="la la-minus"></i>
</button>
</div>
<input class="form-control block-search" placeholder="Search styles" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
<button class="clear-backspace" data-vvveb-action="clearSearch">
<i class="la la-times"></i>
</button>
</div>
<div class="drag-elements-sidepane sidepane">
<div class="style-preview">
<img src="">
</div>
<div>
<ul class="styles-list" data-type="leftpanel">
</ul>
</div>
</div>
</div>
<div class="tab-pane" id="vars-tab" data-section="vars" role="tabpanel" aria-labelledby="vars-tab">
<div class="drag-elements-sidepane sidepane">
<div>
<div class="component-properties d-block">
<!-- color palette -->
<!--
<label class="header" data-header="default" for="header_pallette"><span>Global styles</span>
<div class="header-arrow"></div>
</label> -->
<input class="header_check" type="checkbox" checked id="header_pallette">
<div class="tab-pane section px-0" data-section="content">
</div>
</div>
</div>
</div>
</div>
<!--
<div class="tab-pane" id="css-tab" data-section="css" role="tabpanel" aria-labelledby="css-tab">
<div class="drag-elements-sidepane sidepane">
<div data-offset="80">
<textarea id="css-editor" class="form-control" rows="24"></textarea>
</div>
</div>
</div>
-->
</div>
</div><!-- end configuration tab -->
</div>
</div>
</div>
</div>
</div>
<div id="canvas">
<div id="iframe-wrapper">
<div id="iframe-layer">
<div class="loading-message active">
<div class="animation-container">
<div class="dot dot-1"></div>
<div class="dot dot-2"></div>
<div class="dot dot-3"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" />
</filter>
</defs>
</svg>
<!-- https://codepen.io/Izumenko/pen/MpWyXK -->
</div>
<div id="highlight-box">
<div id="highlight-name">
<span class="name"></span>
<span class="type"></span>
</div>
<div id="section-actions">
<a id="add-section-btn" href="" title="Add element">
<i class="la la-plus"></i>
</a>
</div>
</div>
<div id="select-box">
<div id="wysiwyg-editor" class="default-editor">
<!--
<a id="bold-btn" href="" title="Bold">
<svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M56 40V216H148C176.719 216 200 192.719 200 164C200 147.849 192.637 133.418 181.084 123.88C187.926 115.076 192 104.014 192 92C192 63.2812 168.719 40 140 40H56ZM88 144V184H148C159.046 184 168 175.046 168 164C168 152.954 159.046 144 148 144H88ZM88 112V72H140C151.046 72 160 80.9543 160 92C160 103.046 151.046 112 140 112H88Z" fill="#252525" fill-rule="evenodd"/>
</svg>
</a>
<a id="italic-btn" href="" title="Italic">
<svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M202 40H84V64H126.182L89.8182 192H54V216H172V192H129.818L166.182 64H202V40Z" fill="#252525"/>
</svg>
</a>
<a id="underline-btn" href="" title="Underline">
<svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M88 40H60V108.004C60 145.56 90.4446 176.004 128 176.004C165.555 176.004 196 145.56 196 108.004V40H168V108C168 130.091 150.091 148 128 148C105.909 148 88 130.091 88 108V40ZM204 216V192H52V216H204Z" fill="#252525" fill-rule="evenodd"/>
</svg>
</a>
-->
<a id="bold-btn" class="hint" href="" title="Bold" aria-label="Bold">
<svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M6,4h8a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
<path d="M6,12h9a4,4,0,0,1,4,4h0a4,4,0,0,1-4,4H6Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
</svg>
</a>
<a id="italic-btn" class="hint" href="" title="Italic" aria-label="Italic">
<svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="19" x2="10" y1="4" y2="4" />
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14" x2="5" y1="20" y2="20" />
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="15" x2="9" y1="4" y2="20" />
</svg>
</a>
<a id="underline-btn" class="hint" href="" title="Underline" aria-label="Underline">
<svg height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M6,4v7a6,6,0,0,0,6,6h0a6,6,0,0,0,6-6V4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" y1="2" y2="2" />
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="4" x2="20" y1="22" y2="22" />
</svg>
</a>
<a id="strike-btn" class="hint" href="" title="Strikeout" aria-label="Strikeout">
<del>S</del>
</a>
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="hint" aria-label="Text align">
<i class="la la-align-left"></i>
</span>
</button>
<div id="justify-btn" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" data-value="Left">
<i class="la la-lg la-align-left"></i> Align Left
</a>
<a class="dropdown-item" href="#" data-value="Center">
<i class="la la-lg la-align-center"></i> Align Center
</a>
<a class="dropdown-item" href="#" data-value="Right">
<i class="la la-lg la-align-right"></i> Align Right
</a>
<a class="dropdown-item" href="#" data-value="Full">
<i class="la la-lg la-align-justify"></i> Align Justify
</a>
</div>
</div>
<div class="separator"></div>
<a id="link-btn" class="hint" href="" title="Create link" aria-label="Create link">
<i class="la la-link">
</i>
</a>
<div class="separator"></div>
<input id="fore-color" name="color" type="color" aria-label="Text color" pattern="#[a-f0-9]{6}" class="form-control form-control-color hint">
<input id="back-color" name="background-color" type="color" aria-label="Background color" pattern="#[a-f0-9]{6}" class="form-control form-control-color hint">
<div class="separator"></div>
<select id="font-size" class="form-select" aria-label="Font size">
<option value="">- Font size -</option>
<option value="8px">8 px</option>
<option value="9px">9 px</option>
<option value="10px">10 px</option>
<option value="11px">11 px</option>
<option value="12px">12 px</option>
<option value="13px">13 px</option>
<option value="14px">14 px</option>
<option value="15px">15 px</option>
<option value="16px">16 px</option>
<option value="17px">17 px</option>
<option value="18px">18 px</option>
<option value="19px">19 px</option>
<option value="20px">20 px</option>
<option value="21px">21 px</option>
<option value="22px">22 px</option>
<option value="23px">23 px</option>
<option value="24px">24 px</option>
<option value="25px">25 px</option>
<option value="26px">26 px</option>
<option value="27px">27 px</option>
<option value="28px">28 px</option>
</select>
<div class="separator"></div>
<select id="font-family" class="form-select" title="Font family">
<option value=""> - Font family - </option>
<optgroup label="System default">
<option value="Arial, Helvetica, sans-serif">Arial</option>
<option value="'Lucida Sans Unicode', 'Lucida Grande', sans-serif">Lucida Grande</option>
<option value="'Palatino Linotype', 'Book Antiqua', Palatino, serif">Palatino Linotype</option>
<option value="'Times New Roman', Times, serif">Times New Roman</option>
<option value="Georgia, serif">Georgia, serif</option>
<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
<option value="'Comic Sans MS', cursive, sans-serif">Comic Sans</option>
<option value="Verdana, Geneva, sans-serif">Verdana</option>
<option value="Impact, Charcoal, sans-serif">Impact</option>
<option value="'Arial Black', Gadget, sans-serif">Arial Black</option>
<option value="'Trebuchet MS', Helvetica, sans-serif">Trebuchet</option>
<option value="'Courier New', Courier, monospace">Courier New</option>
<option value="'Brush Script MT', sans-serif">Brush Script</option>
</optgroup>
</select>
</div>
<div id="select-actions">
<a id="drag-btn" href="" title="Drag element">
<i class="la la-arrows-alt"></i>
</a>
<a id="parent-btn" href="" title="Select parent" class="la-rotate-180">
<i class="la la-level-up-alt"></i>
</a>
<a id="up-btn" href="" title="Move element up">
<i class="la la-arrow-up"></i>
</a>
<a id="down-btn" href="" title="Move element down">
<i class="la la-arrow-down"></i>
</a>
<a id="edit-code-btn" href="" title="Edit html code">
<i class="icon-code-outline"></i>
</a>
<a id="translate-code-btn" href="" title="Translate text">
<i class="icon-language-outline"></i>
</a>
<a id="save-reusable-btn" href="" title="Save as reusable" class="mx-2">
<i class="icon-save-outline"></i>
</a>
<a id="clone-btn" href="" title="Clone element">
<i class="icon-copy-outline"></i>
</a>
<a id="delete-btn" href="" title="Remove element">
<i class="icon-trash-outline"></i>
</a>
</div>
<div class="resize">
<!-- top -->
<div class="top-left">
</div>
<div class="top-center">
</div>
<div class="top-right">
</div>
<!-- center -->
<div class="center-left">
</div>
<div class="center-right">
</div>
<!-- bottom -->
<div class="bottom-left">
</div>
<div class="bottom-center">
</div>
<div class="bottom-right">
</div>
</div>
</div>
<!-- add section box -->
<div id="add-section-box" class="drag-elements">
<div class="header">
<ul class="nav nav-tabs bg-primary bg-opacity-10" id="box-elements-tabs" role="tablist">
<li class="nav-item component-tab">
<a class="nav-link px-3 active" id="box-components-tab" data-bs-toggle="tab" href="#box-components" role="tab" aria-controls="components" aria-selected="true">
<i class="icon-cube-outline"></i>
<small>Components</small>
</a>
</li>
<li class="nav-item blocks-tab">
<a class="nav-link px-3" id="box-blocks-tab" data-bs-toggle="tab" href="#box-blocks" role="tab" aria-controls="blocks" aria-selected="false">
<i class="icon-copy-outline"></i>
<small>Blocks</small>
</a>
</li>
<li class="nav-item sections-tab">
<a class="nav-link px-3" id="box-sections-tab" data-bs-toggle="tab" href="#box-sections" role="tab" aria-controls="sections" aria-selected="false">
<i class="icon-layers-outline"></i>
<small>Sections</small>
</a>
</li>
<!--
<li class="nav-item component-properties-tab" style="display:none">
<a class="nav-link" id="box-properties-tab" data-bs-toggle="tab" href="#box-properties" role="tab" aria-controls="properties" aria-selected="false"><i class="la la-lg la-cog"></i> <div><small>Properties</small></div></a>
</li>
-->
</ul>
<div class="section-box-actions">
<div id="close-section-btn" class="btn btn-outline-secondary border-0 p-1 py-0 float-end">
<i class="la la-times"></i>
</div>
<div class="me-4 small float-end">
<div class="form-check d-inline-block small me-1">
<input type="radio" id="add-section-insert-mode-after" value="after" checked="checked" name="add-section-insert-mode" class="form-check-input">
<label class="form-check-label" for="add-section-insert-mode-after">After</label>
</div>
<div class="form-check d-inline-block small">
<input type="radio" id="add-section-insert-mode-inside" value="inside" name="add-section-insert-mode" class="form-check-input">
<label class="form-check-label" for="add-section-insert-mode-inside">Inside</label>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane show active" id="box-components" role="tabpanel" aria-labelledby="components-tab">
<div class="search">
<div class="expand">
<button class="text-sm" title="Expand All" data-vvveb-action="expand">
<i class="la la-plus"></i>
</button>
<button title="Collapse all" data-vvveb-action="collapse">
<i class="la la-minus"></i>
</button>
</div>
<input class="form-control component-search" placeholder="Search components" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
<button class="clear-backspace" data-vvveb-action="clearSearch">
<i class="la la-times"></i>
</button>
</div>
<div class="overflow-y-auto mb-5">
<div>
<ul class="components-list" data-type="addbox">
</ul>
</div>
</div>
</div>
<div class="tab-pane" id="box-blocks" role="tabpanel" aria-labelledby="blocks-tab">
<div class="search">
<div class="expand">
<button class="text-sm" title="Expand All" data-vvveb-action="expand">
<i class="la la-plus"></i>
</button>
<button title="Collapse all" data-vvveb-action="collapse">
<i class="la la-minus"></i>
</button>
</div>
<input class="form-control block-search" placeholder="Search blocks" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
<button class="clear-backspace" data-vvveb-action="clearSearch">
<i class="la la-times"></i>
</button>
</div>
<div class="overflow-y-auto mb-5">
<div>
<ul class="blocks-list" data-type="addbox">
</ul>
</div>
</div>
</div>
<div class="tab-pane" id="box-sections" role="tabpanel" aria-labelledby="sections-tab">
<div class="search">
<div class="expand">
<button class="text-sm" title="Expand All" data-vvveb-action="expand">
<i class="la la-plus"></i>
</button>
<button title="Collapse all" data-vvveb-action="collapse">
<i class="la la-minus"></i>
</button>
</div>
<input class="form-control section-search" placeholder="Search sections" type="text" data-vvveb-action="search" data-vvveb-on="keyup">
<button class="clear-backspace" data-vvveb-action="clearSearch">
<i class="la la-times"></i>
</button>
</div>
<div class="overflow-y-auto mb-5">
<div>
<ul class="sections-list" data-type="addbox">
</ul>
</div>
</div>
</div>
<!-- div class="tab-pane" id="box-properties" role="tabpanel" aria-labelledby="blocks-tab">
<div class="component-properties-sidepane">
<div>
<div class="component-properties">
<div class="mt-4 text-center">Click on an element to edit.</div>
</div>
</div>
</div>
</div -->
</div>
</div>
</div>
<!-- //add section box -->
<div id="drop-highlight-box">
</div>
</div>
<iframe src="" id="iframe1">
</iframe>
<div id="tree-list">
<div class="header">
<div>Navigator</div>
<span>
<button class="btn btn-sm" data-vvveb-action="treeListRight" aria-pressed="true">
<i class="icon-stop-outline"></i>
</button>
<button class="btn btn-sm" data-vvveb-action="toggleTreeList" aria-pressed="true">
<i class="icon-close"></i>
</button>
</span>
</div>
<div class="tree">
<ol>
<!--
<li data-component="Products" class="file">
<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/products.svg)"><span>Products</span></label>
<input type="checkbox" id="idNaN">
</li>
<li data-component="Posts" class="file">
<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/posts.svg)"><span>Posts</span></label>
<input type="checkbox" id="idNaN">
</li>
-->
</ol>
</div>
</div>
</div>
</div>
<div id="right-panel">
<div class="component-properties">
<ul class="nav nav-tabs nav-fill" id="properties-tabs" role="tablist">
<li class="nav-item content-tab">
<a class="nav-link active" data-bs-toggle="tab" href="#content-tab" role="tab" aria-controls="components" aria-selected="true">
<i class="icon-albums-outline"></i>
<span>Content</span>
</a>
</li>
<li class="nav-item style-tab">
<a class="nav-link" data-bs-toggle="tab" href="#style-tab" role="tab" aria-controls="blocks" aria-selected="false">
<i class="icon-color-fill-outline"></i>
<span>Style</span>
</a>
</li>
<li class="nav-item advanced-tab">
<a class="nav-link" data-bs-toggle="tab" href="#advanced-tab" role="tab" aria-controls="blocks" aria-selected="false">
<i class="icon-settings-outline"></i>
<span>Advanced</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="content-tab" data-section="content" role="tabpanel" aria-labelledby="content-tab">
<div class="alert alert-dismissible fade show alert-light m-3" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>No selected element!</strong>
<br> Click on an element to edit.
</div>
</div>
<div class="tab-pane show" id="style-tab" data-section="style" role="tabpanel" aria-labelledby="style-tab">
<div class="pb-2 px-2">
<div class="justify-content-end d-flex">
<select class="form-select w-50" data-vvveb-action="setState" data-vvveb-on="change">
<option value=""> - State - </option>
<option value="hover">hover</option>
<option value="active">active</option>
<option value="nth-of-type(2n)">nth-of-type(2n)</option>
</select>
</div>
</div>
</div>
<div class="tab-pane show" id="advanced-tab" data-section="advanced" role="tabpanel" aria-labelledby="advanced-tab">
<!--
<div class="alert alert-dismissible fade show alert-info m-3" role="alert" style="">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<strong>No advanced properties!</strong><br> This component does not have advanced properties.
</div>
-->
</div>
</div>
</div>
</div>
<div id="bottom-panel">
<div>
<div class="breadcrumb-navigator" style="--bs-breadcrumb-divider: '>';">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">body</a>
</li>
<li class="breadcrumb-item">
<a href="#">section</a>
</li>
<li class="breadcrumb-item">
<a href="#">img</a>
</li>
</ol>
<ul class="nav nav-tabs nav-fill d-none" id="code-tabs" role="tablist">
<li class="nav-item styles-tab" role="presentation">
<a class="nav-link active" data-bs-toggle="tab" href="#code-tab" role="tab" aria-controls="code" aria-selected="false" tabindex="-1">
<i class="icon-code-slash-outline"></i>
<span>Html</span>
</a>
</li>
<li class="nav-item css-tab" role="presentation">
<a class="nav-link" data-bs-toggle="tab" href="#csscode-tab" role="tab" aria-controls="css" aria-selected="true">
<i class="icon-color-fill-outline"></i>
<span>Css</span>
</a>
</li>
</ul>
</div>
<div class="btn-group" role="group">
<div id="toggleEditorJsExecute" class="form-check mt-1" style="display:none">
<input type="checkbox" class="form-check-input" id="runjs" name="runjs" data-vvveb-action="toggleEditorJsExecute">
<label class="form-check-label" for="runjs">
<small>Run javascript code on edit</small>
</label>
</div>
<button id="code-editor-btn" data-view="mobile" class="btn btn-sm btn-outline-secondary border-0" title="Code editor (Ctrl + E)" data-vvveb-action="toggleEditor">
<i class="la la-code"></i> Code editor
</button>
</div>
</div>
<div id="vvveb-code-editor">
<div class="tab-content">
<div class="tab-pane active" id="code-tab" data-section="code" role="tabpanel" aria-labelledby="code-tab">
<textarea class="form-control"></textarea>
</div>
<div class="tab-pane" id="csscode-tab" data-section="csscode" role="tabpanel" aria-labelledby="csscode-tab">
<textarea id="css-editor" class="form-control" rows="24"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- templates -->
<script id="vvveb-input-textinput" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
</div>
</script>
<script id="vvveb-input-textareainput" type="text/html">
<div>
<textarea name="{%=key%}" {% if (typeof rows !== 'undefined') { %} rows="{%=rows%}" {% } else { %} rows="3" {% } %} class="form-control"></textarea>
</div>
</script>
<script id="vvveb-input-checkboxinput" type="text/html">
<div class="form-check{% if (typeof className !== 'undefined') { %} {%=className%}{% } %}">
<input name="{%=key%}" class="form-check-input" type="checkbox" id="{%=key%}_check">
<label class="form-check-label" for="{%=key%}_check">{% if (typeof text !== 'undefined') { %} {%=text%} {% } %}</label>
</div>
</script>
<script id="vvveb-input-radioinput" type="text/html">
<div>
{% for ( var i = 0; i < options.length; i++ ) { %}
<label class="form-check-input {% if (typeof inline !== 'undefined' && inline == true) { %}custom-control-inline{% } %}" title="{%=options[i].title%}">
<input name="{%=key%}" class="form-check-input" type="radio" value="{%=options[i].value%}" id="{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %}>
<label class="form-check-label" for="{%=key%}{%=i%}">{%=options[i].text%}</label>
</label>
{% } %}
</div>
</script>
<script id="vvveb-input-radiobuttoninput" type="text/html">
<div class="btn-group btn-group-sm {%if (extraclass) { %}{%=extraclass%}{% } %}" role="group">
{% var namespace = 'rb-' + Math.floor(Math.random() * 100); %}
{% for ( var i = 0; i < options.length; i++ ) { %}
<input name="{%=key%}" class="btn-check" type="radio" value="{%=options[i].value%}" id="{%=namespace%}{%=key%}{%=i%}" {%if (options[i].checked) { %}checked="{%=options[i].checked%}"{% } %} autocomplete="off">
<label class="btn btn-outline-secondary {%if (options[i].extraclass) { %}{%=options[i].extraclass%}{% } %}" for="{%=namespace%}{%=key%}{%=i%}" title="{%=options[i].title%}">
{%if (options[i].icon) { %}<i class="{%=options[i].icon%}"></i>{% } %}
{%=options[i].text%}
</label>
{% } %}
</div>
</script>
<script id="vvveb-input-toggle" type="text/html">
<div class="form-check form-switch {% if (typeof className !== 'undefined') { %} {%=className%}{% } %}">
<input
type="checkbox"
name="{%=key%}"
value="{%=on%}"
{%if (off !== null) { %} data-value-off="{%=off%}" {% } %}
{%if (on !== null) { %} data-value-on="{%=on%}" {% } %}
class="form-check-input" type="checkbox" role="switch"
id="{%=key%}">
<label class="form-check-label"for="{%=key%}">
</label>
</div>
</script>
<script id="vvveb-input-header" type="text/html">
<h6 class="header">{%=header%}</h6>
</script>
<script id="vvveb-input-select" type="text/html">
<div>
<select class="form-select" name="{%=key%}">
{% var optgroup = false; for ( var i = 0; i < options.length; i++ ) { %}
{% if (options[i].optgroup) { %}
{% if (optgroup) { %}
</optgroup>
{% } %}
<optgroup label="{%=options[i].optgroup%}">
{% optgroup = true; } else { %}
<option value="{%=options[i].value%}"
{%
for (attr in options[i]) {
if (attr != "value" && attr != "text") {
%}
{%=attr%}={%=options[i][attr]%}
{% }
} %}>
{%=options[i].text%}</option>
{% } } %}
</select>
</div>
</script>
<script id="vvveb-input-icon-select" type="text/html">
<div class="input-list-select">
<div class="elements">
<div class="row">
{% for ( var i = 0; i < options.length; i++ ) { %}
<div class="col">
<div class="element">
{%=options[i].value%}
<label>{%=options[i].text%}</label>
</div>
</div>
{% } %}
</div>
</div>
</div>
</script>
<script id="vvveb-input-html-list-select" type="text/html">
<div class="input-html-list-select">
<div class="current-element">
</div>
<div class="popup">
<select class="form-select">
{% var optgroup = false; for ( var i = 0; i < options.length; i++ ) { %}
{% if (options[i].optgroup) { %}
{% if (optgroup) { %}
</optgroup>
{% } %}
<optgroup label="{%=options[i].optgroup%}">
{% optgroup = true; } else { %}
<option value="{%=options[i].value%}">{%=options[i].text%}</option>
{% } } %}
</select>
<div class="search">
<input class="form-control search" placeholder="Search elements" type="text">
<button class="clear-backspace">
<i class="la la-times"></i>
</button>
</div>
<div class="elements">
{%=elements%}
</div>
</div>
</div>
</script>
<script id="vvveb-input-html-list-dropdown" type="text/html">
<div class="input-html-list-select" {% if (typeof id !== "undefined") { %} id={%=id%} {% } %}>
<div class="current-element">
</div>
<div class="popup">
<select class="form-select">
{% var optgroup = false; for ( var i = 0; i < options.length; i++ ) { %}
{% if (options[i].optgroup) { %}
{% if (optgroup) { %}
</optgroup>
{% } %}
<optgroup label="{%=options[i].optgroup%}">
{% optgroup = true; } else { %}
<option value="{%=options[i].value%}">{%=options[i].text%}</option>
{% } } %}
</select>
<div class="search">
<input class="form-control search" placeholder="Search elements" type="text">
<button class="clear-backspace">
<i class="la la-times"></i>
</button>
</div>
<div class="elements">
{%=elements%}
</div>
</div>
</div>
</script>
<script id="vvveb-input-dateinput" type="text/html">
<div>
<input name="{%=key%}" type="date" class="form-control"
{% if (typeof min_date === 'undefined') { %} min="{%=min_date%}" {% } %} {% if (typeof max_date === 'undefined') { %} max="{%=max_date%}" {% } %}
/>
</div>
</script>
<script id="vvveb-input-listinput" type="text/html">
<div class="sections-container p-0">
{% for ( var i = 0; i < options.length; i++ ) { %}
<div class="section-item" draggable="true">
<div class="controls">
<div class="handle"></div>
<div class="info">
<div class="name">{%=options[i].name%}
<div class="type">{%=options[i].type%}</div>
</div>
</div>
<div class="buttons">
<a class="delete-btn" href="" title="Remove section"><i class="icon-trash-outline text-danger"></i></a>
<!--
<a class="up-btn" href="" title="Move element up"><i class="la la-arrow-up"></i></a>
<a class="down-btn" href="" title="Move element down"><i class="la la-arrow-down"></i></a>
<a class="properties-btn" href="" title="Properties"><i class="icon-settings-outline"></i></a>
-->
</div>
</div>
<input class="header_check" type="checkbox" id="section-components-{%=key%}-{%=i%}">
<label for="section-components-{%=key%}-{%=i%}">
<div class="header-arrow"></div>
</label>
<div class="tree">
{%=options[i].name%}
</div>
</div>
{% } %}
{% if (typeof hide_remove === 'undefined') { %}
<div class="mt-3">
<button class="btn btn-sm btn-outline-primary btn-new btn-icon">
<i class="la la-plus la-lg"></i> Add new
</button>
</div>
{% } %}
</div>
</script>
<script id="vvveb-input-grid" type="text/html">
<div class="row g-2">
<div class="col-6">
<label class="form-label">Extra small</label>
<select class="form-select" name="col" autocomplete="off">
<option value="">None</option>
{% for ( var i = 1; i <= 12; i++ ) { %}
<option value="{%=i%}" {% if ((typeof col !== 'undefined') && col == i) { %} selected {% } %}>{%=i%}</option>
{% } %}
</select>
</div>
<div class="col-6">
<label class="form-label">Small</label>
<select class="form-select" name="col-sm" autocomplete="off">
<option value="">None</option>
{% for ( var i = 1; i <= 12; i++ ) { %}
<option value="{%=i%}" {% if ((typeof col_sm !== 'undefined') && col_sm == i) { %} selected {% } %}>{%=i%}</option>
{% } %}
</select>
</div>
<div class="col-6">
<label class="form-label">Medium</label>
<select class="form-select" name="col-md" autocomplete="off">
<option value="">None</option>
{% for ( var i = 1; i <= 12; i++ ) { %}
<option value="{%=i%}" {% if ((typeof col_md !== 'undefined') && col_md == i) { %} selected {% } %}>{%=i%}</option>
{% } %}
</select>
</div>
<div class="col-6">
<label class="form-label">Large</label>
<select class="form-select" name="col-lg" autocomplete="off">
<option value="">None</option>
{% for ( var i = 1; i <= 12; i++ ) { %}
<option value="{%=i%}" {% if ((typeof col_lg !== 'undefined') && col_lg == i) { %} selected {% } %}>{%=i%}</option>
{% } %}
</select>
</div>
<div class="col-6">
<label class="form-label">Extra large </label>
<select class="form-select" name="col-xl" autocomplete="off">
<option value="">None</option>
{% for ( var i = 1; i <= 12; i++ ) { %}
<option value="{%=i%}" {% if ((typeof col_xl !== 'undefined') && col_xl == i) { %} selected {% } %}>{%=i%}</option>
{% } %}
</select>
</div>
<div class="col-6">
<label class="form-label">Extra extra large</label>
<select class="form-select" name="col-xxl" autocomplete="off">
<option value="">None</option>
{% for ( var i = 1; i <= 12; i++ ) { %}
<option value="{%=i%}" {% if ((typeof col_xxl !== 'undefined') && col_xxl == i) { %} selected {% } %}>{%=i%}</option>
{% } %}
</select>
</div>
{% if (typeof hide_remove === 'undefined') { %}
<div class="col-12">
<button class="btn btn-sm btn-outline-light text-danger">
<i class="la la-trash la-lg"></i> Remove
</button>
</div>
{% } %}
</div>
</script>
<script id="vvveb-input-textvalue" type="text/html">
<div class="row">
<div class="col-6 mb-1">
<label class="form-label">Value</label>
<input name="value" type="text" value="{%=value%}" class="form-control" autocomplete="off" />
</div>
<div class="col-6 mb-1">
<label class="form-label">Text</label>
<input name="text" type="text" value="{%=text%}" class="form-control" autocomplete="off" />
</div>
{% if (typeof hide_remove === 'undefined') { %}
<div class="col-12">
<button class="btn btn-sm btn-outline-light text-danger">
<i class="la la-trash la-lg"></i> Remove
</button>
</div>
{% } %}
</div>
</script>
<script id="vvveb-input-rangeinput" type="text/html">
<div class="input-range">
<input name="{%=key%}" type="range" min="{%=min%}" max="{%=max%}" step="{%=step%}" class="form-range" data-input-value/>
<input name="{%=key%}" type="number" min="{%=min%}" max="{%=max%}" step="{%=step%}" class="form-control" data-input-value/>
</div>
</script>
<script id="vvveb-input-imageinput" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
<input name="file" type="file" class="form-control"/>
</div>
</script>
<script id="vvveb-input-imageinput-gallery" type="text/html">
<div>
<img id="thumb-{%=key%}" class="img-thumbnail p-0" data-target-input="#input-{%=key%}" data-target-thumb="#thumb-{%=key%}" style="cursor:pointer" src="" width="225" height="225">
<input name="{%=key%}" type="text" class="form-control mt-1" id="input-{%=key%}"/>
<button name="button" class="btn btn-outline-primary btn-sm btn-icon mt-2 w-100" data-target-input="#input-{%=key%}" data-target-thumb="#thumb-{%=key%}"><i class="la la-image la-lg me-1"></i><span>Set image</span></button>
</div>
</script>
<script id="vvveb-input-videoinput-gallery" type="text/html">
<div>
<video id="thumb-v{%=key%}" class="img-thumbnail p-0" data-target-input="#input-v{%=key%}" data-target-thumb="#thumb-v{%=key%}" style="cursor:pointer" src="" width="225" height="225" playsinline loop muted controls></video>
<input name="v{%=key%}" type="text" class="form-control mt-1" id="input-v{%=key%}"/>
<button name="button" class="btn btn-secondary btn-sm btn-icon mt-2 w-100" data-target-input="#vinput-v{%=key%}" data-target-thumb="#thumb-v{%=key%}"><i class="la la-video la-lg"></i><span>Set video</span></button>
</div>
</script>
<script id="vvveb-input-colorinput-native" type="text/html">
<div>
<input name="{%=key%}" {% if (typeof palette !== 'undefined') { %} list="{%=key%}-color-palette" {% } %} type="color" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} pattern="#[a-f0-9]{6}" class="form-control form-control-color" placeholder="#000000"/>
{% if (typeof palette !== 'undefined') { %}
<datalist id="{%=key%}-color-palette">
{% for (const color in palette) { %}
<option>{%=palette[color]%}</option>
{% } %}
{% } %}
</div>
</script>
<script id="vvveb-input-colorinput" type="text/html">
<div class="clr-field" style="{% if (typeof value !== 'undefined' && value != false) { %}color: {%=value%}" {% } %}">
<button type="button" aria-labelledby="clr-open-label"></button>
<input name="{%=key%}" type="text" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} class="coloris form-control"/>
</div>
</script>
<script id="vvveb-input-bootstrap-color-picker-input" type="text/html">
<div>
<div id="cp2" class="input-group" title="Using input value">
<input name="{%=key%}" type="text" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %} class="form-control"/>
<span class="input-group-append">
<span class="input-group-text colorpicker-input-addon"><i></i></span>
</span>
</div>
</div>
</script>
<script id="vvveb-input-numberinput" type="text/html">
<div>
<input name="{%=key%}" type="number" value="{%=value%}"
{% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %}
{% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %}
{% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %}
class="form-control"/>
</div>
</script>
<script id="vvveb-input-button" type="text/html">
<div>
<button class="btn btn-sm {% if (typeof className !== 'undefined') { %} {%=className%} {% } else { %}btn-outline-primary{% } %}">
<i class="la {% if (typeof icon !== 'undefined') { %} {%=icon%} {% } else { %} la-plus {% } %} la-lg"></i> {%=text%}
</button>
</div>
</script>
<script id="vvveb-input-cssunitinput" type="text/html">
<div class="input-group css-unit" id="cssunit-{%=key%}">
<input name="number" type="number" {% if (typeof value !== 'undefined' && value != false) { %} value="{%=value%}" {% } %}
{% if (typeof min !== 'undefined' && min != false) { %}min="{%=min%}"{% } %}
{% if (typeof max !== 'undefined' && max != false) { %}max="{%=max%}"{% } %}
{% if (typeof step !== 'undefined' && step != false) { %}step="{%=step%}"{% } %}
class="form-control"/>
<select class="form-select small-arrow" name="unit">
<option value="em">em</option>
<option value="rem">rem</option>
<option value="px">px</option>
<option value="%">%</option>
<option value="vw">vw</option>
<option value="vh">vh</option>
<option value="ex">ex</option>
<option value="ch">ch</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="pt">pt</option>
<option value="auto">auto</option>
<option value="">-</option>
</select>
</div>
</script>
<script id="vvveb-filemanager-folder" type="text/html">
<li data-folder="{%=folder%}" class="folder">
<label for="{%=folder%}"><span>{%=folderTitle%}</span></label> <input type="checkbox" id="{%=folder%}" />
<ol></ol>
</li>
</script>
<script id="vvveb-filemanager-page" type="text/html">
<li data-url="{%=url%}" data-file="{%=file%}" data-page="{%=name%}" class="file{% if (typeof className !== 'undefined') { %} {%=className%}{% } %}" {%if (typeof post_id !== 'undefined') { %}data-post_id="{%=post_id%}"{% } %} {%if (typeof product_id !== 'undefined') { %}data-product_id="{%=product_id%}"{% } %} {%if (typeof global !== 'undefined' && global) { %}data-global="true"{% } %}>
<label for="{%=name%}" {% if (typeof description !== 'undefined') { %} title="{%=description%}" {% } %}>
<span>{%=title%}</span>
<!-- <span class="text-muted small">{%=url%}</span> -->
<div class="file-actions">
<button href="#" class="delete btn btn-outline-danger" title="Delete"><i class="la la-trash"></i></button>
<a href="{%=url%}" target="_blank" class="view btn btn-outline-primary" title="View page"><i class="la la la-external-link-alt"></i></a>
<button href="#" class="rename btn btn-outline-primary" title="Rename"><i class="la la-pen"></i></button>
<button href="#" class="duplicate btn btn-outline-primary" title="Duplicate"><i class="icon-copy-outline"></i></button>
</div>
</label> <input type="checkbox" id="{%=name%}" />
<!-- <ol></ol> -->
</li>
</script>
<script id="vvveb-filemanager-component" type="text/html">
<li data-url="{%=url%}" data-component="{%=name%}" class="component">
<a href="{%=url%}"><span>{%=title%}</span></a>
</li>
</script>
<script id="vvveb-breadcrumb-navigaton-item" type="text/html">
<li class="breadcrumb-item"><a href="#" {% if (typeof className !== 'undefined') { %}class="{%=className%}"{% } %}>{%=name%}</a></li>
</script>
<script id="vvveb-input-sectioninput" type="text/html">
<div>
{% var namespace = '-' + Math.floor(Math.random() * 1000); %}
<label class="header" data-header="{%=key%}" for="header_{%=key%}{%=namespace%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>
<span>{%=header%}</span>
<div class="header-arrow"></div>
</label>
<input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}{%=namespace%}">
<div class="section row" data-section="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}></div>
</div>
</script>
<script id="vvveb-input-popoverinput" type="text/html">
<div>
{% var namespace = '-' + Math.floor(Math.random() * 1000); %}
<label class="header" data-header="{%=key%}" for="header_{%=key%}{%=namespace%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>
<span>{%=header%}</span>
<div class="header-arrow"></div>
</label>
<input class="header_check" type="checkbox" {% if (typeof expanded !== 'undefined' && expanded == false) { %} {% } else { %}checked="true"{% } %} id="header_{%=key%}{%=namespace%}">
<div class="section row" data-section="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}></div>
</div>
</script>
<script id="vvveb-property" type="text/html">
<div class="mb-2 {% if (typeof col !== 'undefined' && col != false) { %} col-sm-{%=col%} {% } else { %}row{% } %} {% if (typeof inline !== 'undefined' && inline == true) { %}inline{% } %} " data-key="{%=key%}" {% if (typeof group !== 'undefined' && group != null) { %}data-group="{%=group%}" {% } %}>
{% if (typeof name !== 'undefined' && name != false) { %}<label class="{% if (typeof inline === 'undefined' ) { %}col-sm-4{% } %} form-label" for="input-model">
<span>{%=name%}</span>
<!-- <button class="btn-close ms-1" title="Clear"></button> -->
</label>{% } %}
<div class="{% if (typeof inline === 'undefined') { %}col-sm-{% if (typeof name !== 'undefined' && name != false) { %}8{% } else { %}12{% } } %} input"></div>
</div>
</script>
<script id="vvveb-input-autocompletelist" type="text/html">
<div>
<input name="{%=key%}" type="text" class="form-control"/>
<div class="form-control autocomplete-list" style="min-height: 150px; overflow: auto;">
</div>
</div>
</script>
<script id="vvveb-input-tagsinput" type="text/html">
<div>
<div class="form-control tags-input p-0" style="height:auto;">
<input name="{%=key%}" type="text" class="form-control" style="border:none;min-width:60px;"/>
</div>
</div>
</script>
<script id="vvveb-input-noticeinput" type="text/html">
<div>
<div class="alert alert-dismissible fade show alert-{%=type%}" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<strong class="d-block mb-1">{%=title%}</strong>
{%=text%}
</div>
</div>
</script>
<script id="vvveb-section" type="text/html">
{% var suffix = Math.floor(Math.random() * 10000); %}
<div class="section-item" draggable="true">
<div class="controls">
<div class="handle"></div>
<div class="info">
<div class="name">{%=name%}
<div class="type">{%=type%}</div>
</div>
</div>
<div class="buttons">
<a class="delete-btn" href="" title="Remove section"><i class="la la-trash text-danger"></i></a>
<!--
<a class="up-btn" href="" title="Move element up"><i class="la la-arrow-up"></i></a>
<a class="down-btn" href="" title="Move element down"><i class="la la-arrow-down"></i></a>
-->
<a class="properties-btn" href="" title="Properties"><i class="icon-settings-outline"></i></a>
</div>
</div>
<input class="header_check" type="checkbox" id="section-components-{%=suffix%}">
<label for="section-components-{%=suffix%}">
<div class="header-arrow"></div>
</label>
<div class="tree">
<ol>
<!--
<li data-component="Products" class="file">
<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/products.svg)"><span>Products</span></label>
<input type="checkbox" id="idNaN">
</li>
<li data-component="Posts" class="file">
<label for="idNaN" style="background-image:url(/js/vvvebjs/icons/posts.svg)"><span>Posts</span></label>
<input type="checkbox" id="idNaN">
</li>
-->
</ol>
</div>
</div>
</script>
<script id="vvveb-save-component" type="text/html">
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#saveComp{%=id%}" aria-expanded="true" aria-controls="saveComp{%=id%}">
<div>
<h6>
<input class="form-check-input me-1" type="checkbox" value="" checked>
{%=name%}
</h6>
<small class="p-1 bg-body-tertiary">{%=type%}</small>
</div>
</button>
<div id="saveComp{%=id%}" class="accordion-collapse collapse" aria-labelledby="headingOne">
<div class="accordion-body">
<ul class="list-unstyled fields">
{%=fields%}
</ul>
</div>
</div>
</div>
</script>
<script id="vvveb-save-component-field" type="text/html">
{% name = ucFirst(name); %}
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>{%=name%}</span>
</h6>
<span>{%=preview%}</span>
</li>
</script>
<script id="vvveb-revision-item" type="text/html">
<div class="dropdown-item d-flex align-items-center">
<span class="flex-grow-1 me-2">
<div class="flex-grow-1">
{%=date_friendly%}
</div>
<span class="small text-muted">
{%=date%}
</span>
<!-- <a href="#" target="_blank" class="small text-muted">Admin</a> -->
</span>
<span>
<a class="btn btn-sm btn-outline-primary border-0 btn-revision-preview" data-date="{%=date%}" href="{%=url%}" target="_blank" title="Preview">
<i class="la la-eye"></i>
</a>
<button class="btn btn-sm btn-outline-primary border-0 btn-revision-load" data-date="{%=date%}" data-file="{%=file%}" title="Load">
<i class="la la-arrow-up"></i>
</button>
<button class="btn btn-sm btn-outline-danger border-0 btn-revision-delete" data-date="{%=date%}" data-file="{%=file%}" title="Delete">
<i class="la la-trash"></i>
</button>
</span>
</div>
</script>
<!--// end templates -->
<!-- code editor modal -->
<div class="modal modal-full fade" id="codeEditorModal" tabindex="-1" aria-labelledby="codeEditorModal" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
<div class="modal-content">
<input type="hidden" name="file" value="">
<div class="modal-header justify-content-between">
<span class="modal-title"></span>
<div class="">
<button type="button" class="btn btn-light border btn-icon" data-bs-dismiss="modal">
<i class="la la-times"></i>Cancel
</button>
<button class="btn btn-primary btn-icon save-btn" title="Save changes">
<span class="loading d-none">
<i class="la la-save"></i>
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Saving </span> ...
</span>
<span class="button-text">
<i class="la la-save"></i>
<span>Save changes</span>
</span>
</button>
</div>
</div>
<div class="modal-body p-0">
<textarea class="form-control h-100"></textarea>
</div>
</div>
</div>
</div>
<!-- translate editor modal -->
<div class="modal modal-full fade" id="translateEditorModal" tabindex="-1" aria-labelledby="translateEditorModal" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="translateForm">
<input type="hidden" name="csrf" data-v-csrf>
<div class="modal-body p-0">
<ul class="nav nav-tabs pt-1" id="language-nav" data-v-languages="editor">
<li class="nav-item" data-v-language>
<a href="#language1" class="nav-link" data-bs-toggle="tab" aria-expanded="true" data-v-language-link>
<!-- img src="language/en-gb/en-gb.png" title="English" data-v-language-img -->
<span data-v-language-name>English</span>
</a>
</li>
</ul>
<div class="tab-content" data-v-languages="editor" style="clear:both">
<div class="tab-pane" id="language1" data-v-language data-v-language-id>
<textarea class="form-control" rows="10" data-v-language-code></textarea>
</div>
</div>
</div>
</form>
<div class="modal-header justify-content-between">
<span class="modal-title"></span>
<div class="">
<button type="button" class="btn btn-light border btn-icon btn-sm me-1" data-bs-dismiss="modal">
<i class="la la-times"></i>Cancel
</button>
<button class="btn btn-primary btn-icon save-btn btn-sm" title="Save changes">
<span class="loading d-none">
<i class="la la-save"></i>
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
</span>
<span>Saving </span> ...
</span>
<span class="button-text">
<i class="la la-save"></i>
<span>Save changes</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- export html modal-->
<div class="modal fade" id="textarea-modal" tabindex="-1" role="dialog" aria-labelledby="textarea-modal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title text-primary">
<i class="la la-lg la-save"></i> Export html
</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel">
<!-- span aria-hidden="true"><small><i class="la la-times"></i></small></span -->
</button>
</div>
<div class="modal-body">
<textarea rows="25" cols="150" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary btn-lg" data-bs-dismiss="modal">
<i class="la la-times"></i> Cancel
</button>
</div>
</div>
</div>
</div>
<!-- message modal-->
<div class="modal fade" id="message-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title text-primary">
<i class="la la-lg la-comment"></i> VvvebJs
</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel">
<!-- span aria-hidden="true"><small><i class="la la-times"></i></small></span -->
</button>
</div>
<div class="modal-body">
<p>Page was successfully saved!.</p>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-primary">Ok</button> -->
<button type="button" class="btn btn-outline-secondary btn-lg" data-bs-dismiss="modal">
<i class="la la-times"></i> Cancel
</button>
</div>
</div>
</div>
</div>
<!-- new page modal-->
<div class="modal fade modal-lg" id="new-page-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<form action="" method="POST" class="w-100" data-vvveb-url="{$this.adminPath}index.php?module=editor/editor&action=save">
<input type="hidden" name="csrf" data-v-csrf>
<div class="modal-content">
<div class="modal-header">
<span class="modal-title text-secondary small">
<i class="la la-lg la-file"></i>
<span>New page</span>
</span>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> -->
<!-- span aria-hidden="true"><small><i class="la la-times"></i></small></span -->
<!-- </button> -->
<div id="close-section-btn" class="btn btn-outline-secondary border-0 p-1 py-0 ms-auto" data-bs-dismiss="modal">
<i class="la la-times"></i>
</div>
</div>
<div class="modal-body text">
<div class="mb-3 pb-2 border-bottom">
<input class="btn-check" type="radio" name="type" id="new-page-btn" value="page" checked>
<label class="btn" for="new-page-btn">
<i class="icon-document-outline"></i>
<span class="small">Page</span>
</label>
<input class="btn-check" type="radio" name="type" id="new-post-btn" value="post">
<label class="btn" for="new-post-btn">
<i class="icon-document-text-outline"></i>
<span class="small">Post</span>
</label>
<input class="btn-check" type="radio" name="type" id="new-product-btn" value="product">
<label class="btn" for="new-product-btn">
<i class="icon-cube-outline"></i>
<span class="small">Product</span>
</label>
<input class="btn-check" type="radio" name="type" id="new-template-btn" value="template">
<label class="btn" for="new-template-btn">
<i class="icon-copy-outline"></i>
<span class="small">Template</span>
</label>
</div>
<div class="form">
<div class="product" style="display:none">
<div class="mb-3 row" data-key="href">
<label class="col-sm-3 col-form-label">Price</label>
<div class="col-sm-9 input">
<div>
<input name="price" type="number" class="form-control" placeholder="Price" disabled required>
</div>
</div>
</div>
</div>
<div class="page post product">
<div class="mb-3 row" data-key="href">
<label class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9 input">
<div>
<input name="name" type="text" class="form-control" placeholder="Name" required>
<a href="#" class="mt-2 btn btn-sm btn-outline-secondary btn-icon px-4 text-float-end" onclick="document.querySelectorAll('[data-key=content]').forEach(e => e.style.display = e.style.display == 'none' ? '' : 'none');return false;">
<span>More</span>
<i class="la la-angle-down"></i>
</a>
</div>
</div>
</div>
<div data-key="content" style="display:none">
<div class="mb-3 row">
<label class="col-sm-3 col-form-label">Content</label>
<div class="col-sm-9 input">
<div class="row g-2">
<div class="col-8">
<textarea name="content" class="form-control" placeholder="Lorem ipsum" rows="10">Lorem ipsum</textarea>
</div>
<div class="col-4">
<input type="hidden" data-v-image name="image" id="featured-image-input" value="">
<img data-v-image src="img/placeholder.svg" alt="" id="featured-image-thumb" data-v-placeholder="" data-media-gallery data-target-input="#featured-image-input" data-target-thumb="#featured-image-thumb" data-type="single" class="img-thumbnail bg-body-tertiary p-0">
<div class="btn-group w-100 mt-2">
<button type="button" class="btn btn-outline-secondary btn-icon btn-sm" data-media-gallery data-target-input="#featured-image-input" data-target-thumb="#featured-image-thumb" data-type="single">
<i class="la la-image la-lg"></i>
<span>Set image</span>
</button>
<button type="button" class="btn btn-outline-secondary btn-icon btn-sm" onclick="clearMedia()">
<i class="la la-times"></i>
</button>
</div>
</div>
</div>
<div class="form-check mt-2">
<input class="form-check-input" type="checkbox" name="add-menu" id="add-menu" value="true" onchange="document.querySelectorAll('[data-key=menu]').forEach(e => e.style.display = e.style.display == 'none' ? '' : 'none')">
<label class="form-check-label" for="add-menu">Add to menu</label>
</div>
</div>
</div>
<div class="mb-3 row" data-key="menu" style="display:none">
<label class="col-sm-3 col-form-label">Menu</label>
<div class="col-sm-9 input">
<select class="form-select" name="menu_id">
<option value="main-menu">Main menu</option>
<option value="main-footer" data-v-option>Footer</option>
</select>
</div>
</div>
<div class="mb-3 row" data-key="template">
<label class="col-sm-3 col-form-label">
Start template
<abbr title="The contents of this template will be used as a start for the new template">
<i class="la la-lg la-question-circle text-primary"></i>
</abbr>
</label>
<div class="col-sm-9 input">
<select class="form-select" name="startTemplateUrl" data-v-theme-templates>
<option value="new-page-blank-template.html" data-v-option>Blank Template</option>
<option value="demo/narrow-jumbotron/index.html" data-v-option>Narrow jumbotron</option>
<option value="demo/album/index.html" data-v-option>Album</option>
</select>
<div class="d-flex mt-3">
<div class="form-check">
<input id="template-type-global-radio" class="form-check-input" name="template-type" type="radio" value="global" checked="">
<label class="form-check-label" for="template-type-global-radio">
<strong class="mb-0 fw-medium">Use global template</strong>
<p class="text-muted">Shared with other pages using this template</p>
</label>
</div>
<div class="form-check">
<input id="template-type-new-radio" class="form-check-input" name="template-type" type="radio" value="new">
<label class="form-check-label d-block" for="template-type-new-radio">
<strong class="mb-0 fw-medium">Save as new template</strong>
<p class="text-muted">Unique template to this page</p>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="template" style="display:none">
<div class="mb-3 row" data-key="template">
<label class="col-sm-3 col-form-label">
Start template
<abbr title="The contents of this template will be used as a start for the new template">
<i class="la la-lg la-question-circle text-primary"></i>
</abbr>
</label>
<div class="col-sm-9 input">
<select class="form-select" name="startTemplateUrl" disabled data-v-theme-templates>
<option value="new-page-blank-template.html" data-v-option>Blank Template</option>
<option value="demo/narrow-jumbotron/index.html" data-v-option>Narrow jumbotron</option>
<option value="demo/album/index.html" data-v-option>Album</option>
</select>
</div>
</div>
<div class="mb-3 row" data-key="href">
<label class="col-sm-3 col-form-label">File name</label>
<div class="col-sm-9 input">
<div>
<input name="file" type="text" class="form-control" placeholder="my-page.html" disabled required>
</div>
</div>
</div>
<!--
<div class="mb-3 row" data-key="href">
<label class="col-sm-3 form-label">Url</label>
<div class="col-sm-9 input">
<div>
<input name="url" type="text" class="form-control" placeholder="/my-page.html" required>
</div>
</div>
</div>
-->
<div class="mb-3 row" data-key="href">
<label class="col-sm-3 col-form-label">
Save to folder
</label>
<div class="col-sm-9 input">
<select class="form-select" name="folder" disabled data-v-theme-folders>
<option value="/" data-v-option>/</option>
<option value="content" data-v-option>Content</option>
<option value="product" data-v-option>Product</option>
<option value="checkout" data-v-option>Checkout</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-outline-secondary btn-icon" type="reset" data-bs-dismiss="modal">
<i class="la la-times"></i> Cancel
</button>
<button class="btn btn-primary btn-icon" type="submit">
<i class="la la-check"></i>
<span>Create</span>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- save toast -->
<!--
<div class="toast-container position-fixed end-0 bottom-0 me-3 mb-3" id="top-toast">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header text-white">
<strong class="me-auto">Page save</strong>
<small class="badge bg-success">status</small>
<button type="button" class="btn-close text-white px-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body ">
<div class="flex-grow-1">
<div class="message">Elements saved!
<div>Template backup was saved!</div>
<div>Template was saved!</div>
</div>
<div><a class="btn btn-success btn-icon btn-sm w-100 mt-2" href="">View page</a></div>
</div>
</div>
</div>
</div>
-->
<!--
<div class="toast-container position-fixed end-0 bottom-0 me-3 mb-3" id="top-toast">
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
-->
<!-- save changes offcanvas -->
<style>
.form-group .form-check-input~label input,
.form-group .form-check-input~label div,
.form-group .form-check-input~label select {
display: none;
}
.form-group .form-check-input:checked~label input,
.form-group .form-check-input:checked~label div,
.form-group .form-check-input:checked~label select {
display: block;
}
</style>
<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="save-offcanvas">
<div class="offcanvas-header">
<span class="offcanvas-title">
<button class="btn btn-primary btn-sm btn-icon save-btn save-offcanvas" title="Save changes" data-vvveb-action="saveAjax" data-vvveb-url="{$this.adminPath}index.php?module=editor/editor&action=save" data-v-vvveb-shortcut="ctrl+e">
<span class="loading d-none">
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"></span>
<span class="progress-text">
<span>Saving changes</span> ...
</span>
</span>
<span class="button-text">
<i class="icon-save-outline"></i>
<span>Save changes</span>
</span>
</button>
</span>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="form-group mb-4">
<div class="form-check">
<input id="global-template-radio" class="form-check-input" name="template" type="radio" value="global" checked>
<label class="form-check-label" for="global-template-radio">
<h6 class="mb-0">Default template</h6>
<p class="fs-6 text-muted">Applies to all pages using template</p>
<small class="p-1 bg-body-tertiary border" data-v-filename>product/product.html</small>
</label>
</div>
</div>
<div class="form-group mb-4">
<div class="form-check">
<input id="new-template-radio" class="form-check-input" name="template" type="radio" value="new">
<label class="form-check-label d-block" for="new-template-radio">
<h6 class="mb-0">Save as new template</h6>
<p class="fs-6 text-muted">Applies to this page only</p>
<select class="form-select" placeholder="Visibility" name="folder" data-v-theme-folders>
<option value="/" data-v-option>/</option>
<option value="content" data-v-option>Content</option>
<option value="product" data-v-option>Product</option>
<option value="checkout" data-v-option>Checkout</option>
</select>
<input type="text" class="form-control mt-2" name="file" value="product/product-one.html" data-v-basename>
<!--
<div class="form-check mt-3">
<input class="form-check-input" id="setTemplate" name="setTemplate" type="checkbox" value="true" checked>
<label class="form-check-label" for="setTemplate">Set as template for this page</label>
</div>
-->
</label>
</div>
<div class="accordion accordion-flush components">
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div>
<h6>
<input class="form-check-input me-1" type="checkbox" value="" checked>
Product lorem ipsum
</h6>
<small class="p-1 bg-body-tertiary">Product</small>
</div>
</button>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
<div class="accordion-body">
<ul class="list-unstyled">
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Title</span>
</h6>
<span>Lorem ipsum</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Url</span>
</h6>
<span>/product6/</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Price</span>
</h6>
<span>500</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Image</span>
</h6>
<span>/media/image.jpg</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Title</span>
</h6>
<span>Lorem ipsum</span>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div>
<h6>
<input class="form-check-input me-1" type="checkbox" value="" checked>
Product lorem ipsum
</h6>
<small class="p-1 bg-body-tertiary">Product</small>
</div>
</button>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
<div class="accordion-body">
<ul class="list-unstyled">
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Title</span>
</h6>
<span>Perfume test 1</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Url</span>
</h6>
<span>/product6/</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Price</span>
</h6>
<span>500</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Image</span>
</h6>
<span>/media/image.jpg</span>
</li>
<li class="p-2">
<h6 class="d-inline">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="..." checked>
<span>Title</span>
</h6>
<span>Perfume test 1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-body p-0">
<form action="{$this.adminPath}/index.php?module=tools/search" method="get">
<input type="hidden" name="module" value="tools/search">
<div class="d-flex">
<div class="input-group">
<input type="search" name="search" class="form-control border-0 p-3 px-4" id="headerSearch" placeholder="Start typing to search" data-v-vvveb-action="search.autocomplete" data-selector=".search-results" data-v-vvveb-on="keyup">
<button class="btn btn-outline-primary border-0" type="submit" title="Search">
<div class="la-flip-horizontal">
<i class="la la-search la-lg" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<div class="loading d-none d-flex justify-content-center m-5">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</form>
<div class="search-results">
</div>
</div>
</div>
<button type="button" class="btn-close btn-close-white small" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<div id="page-loading-status" class="progress progress-bar"></div>
<!--
<script id="jquery-js" src="js/jquery.min.js"></script>
-->
<script id="popper-js" src="js/popper.min.js"></script>
<script id="bootstrap-js" src="js/bootstrap.min.js"></script>
<script id="theme-js" src="js/theme.js"></script>
<!-- vvveb modules code -->
<script id="admin-js" type="module" src="/js/admin.js"></script>
<input type="hidden" name="csrf" id="csrf" data-v-csrf>
<!-- builder code-->
<script id="builder" src="/js/vvvebjs/builder.js"></script>
<script>
Vvveb.themeBaseUrl = '{ $this->themeBaseUrl }';
</script>
<!-- undo manager-->
<script id="undo" src="/js/vvvebjs/undo.js"></script>
<!-- media gallery -->
<link href="libs/media/media.css" rel="stylesheet">
<script>
//media
let mediaPath = '{ $this->mediaPath }';
let mediaScanUrl = '{ $this->scanUrl }';
let uploadUrl = '{ $this->uploadUrl }';
let deleteUrl = '{ $this->deleteUrl }';
let renameUrl = '{ $this->renameUrl }';
let mediaUrl = '{ $this->mediaUrl }';
let uploadMaxFilesize = '{ $this->uploadMaxFilesize }';
let postMaxSize = '{ $this->postMaxSize }';
//editor
let editorUrl = '{ $this->editorUrl }';
let namespaceUrl = '{ $this->namespaceUrl }';
let saveUrl = '{ $this->saveUrl }';
let saveReusableUrl = '{ $this->saveReusableUrl }';
let renameFileUrl = '{ $this->renameFileUrl }';
let deleteFileUrl = '{ $this->deleteFileUrl }';
let revisionsUrl = '{ $this->revisionsUrl }';
let revisionLoadUrl = '{ $this->revisionLoadUrl }';
let revisionDeleteUrl = '{ $this->revisionDeleteUrl }';
let oEmbedProxyUrl = '{ $this->oEmbedProxyUrl }';
let linkUrl = '{ $this->linkUrl }';
let themeName = '{ $this->themeName }';
let themeFonts = { $this->themeFonts };
if (themeFonts) {
ThemeFontsManager = {
updateFontList: function () {
},
removeFont: function (fontName) {
},
addFont: function (fontName) {
}
}
Vvveb.FontsManager.addProvider("theme", ThemeFontsManager);
Vvveb.FontsManager.addFontList("theme", friendlyName(themeName), themeFonts);
}
</script>
<!-- <script id="openverse-js" src="libs/media/openverse.js"></script> -->
<script id="media-js" src="libs/media/media.js"></script>
<script id="index-js" src="libs/vvveb/index.js"></script>
<script id="resources" src="/js/vvvebjs/resources.js"></script>
<!-- inputs-->
<script id="inputs" src="/js/vvvebjs/inputs.js"></script>
<script data-v-theme-inputs id="inputs" src="/js/vvvebjs/inputs.js"></script>
<script id="plugin-media" src="/js/vvvebjs/plugin-media.js"></script>
<!-- plugins -->
<script src="/js/libs/oembed.js"></script>
<script id="plugin-google-fonts" src="/js/vvvebjs/plugin-google-fonts.js"></script>
<link href="/js/libs/coloris/coloris.min.css" rel="stylesheet" />
<script src="/js/libs/coloris/coloris.js"></script>
<script id="plugin-coloris" src="/js/vvvebjs/plugin-coloris.js"></script>
<!-- components-->
<script id="components-common" src="/js/vvvebjs/components-common.js"></script>
<script id="section" src="/js/vvvebjs/section.js"></script>
<script id="plugin-aos" src="/js/vvvebjs/plugin-aos.js"></script>
<script id="components-html" src="/js/vvvebjs/components-html.js"></script>
<script id="components-elements" src="/js/vvvebjs/components-elements.js"></script>
<script id="components-embeds" src="/js/vvvebjs/components-embeds.js"></script>
<script id="components-widgets" src="/js/vvvebjs/components-widgets.js"></script>
<script id="components-bootstrap5" src="/js/vvvebjs/components-bootstrap5.js"></script>
<script id="components-content" type="module" src="/js/vvvebjs/components/content/index.js" crossorigin="use-credentials"></script>
<script id="components-ecommerce" type="module" src="/js/vvvebjs/components/ecommerce/index.js" crossorigin="use-credentials"></script>
<script data-v-theme-components id="components" src="/js/vvvebjs/components.js"></script>
<!-- sections-->
<script data-v-theme-sections id="sections" src="/js/vvvebjs/sections.js"></script>
<script id="sections-bootstrap4" src="/js/vvvebjs/sections-bootstrap4.js"></script>
<!-- blocks-->
<script data-v-theme-blocks id="blocks" src="/js/vvvebjs/blocks.js"></script>
<!--
<script id="blocks-bootstrap4" src="/js/vvvebjs/blocks-bootstrap4.js"></script>
-->
<!-- plugins -->
<!-- code mirror - code editor syntax highlight -->
<link href="libs/codemirror/lib/codemirror.css" rel="stylesheet" />
<link href="libs/codemirror/theme/duotone-dark.css" rel="stylesheet" />
<script src="libs/codemirror/lib/codemirror.js"></script>
<script src="libs/codemirror/lib/xml.js"></script>
<script src="libs/codemirror/lib/css.js"></script>
<script src="libs/codemirror/lib/formatting.js"></script>
<script src="libs/codemirror/lib/searchcursor.js"></script>
<script src="libs/codemirror/lib/search.js"></script>
<script id="plugin-codemirror" src="/js/vvvebjs/plugin-codemirror.js"></script>
<!-- jszip - download page as zip -->
<!--
<script src="libs/jszip/jszip.min.js"></script>
<script id="plugin-jszip" src="/js/vvvebjs/plugin-jszip.js"></script>
<script id="plugin-ai-assistant" src="/js/vvvebjs/plugin-ai-assistant.js"></script>
-->
<!-- autocomplete plugin used by autocomplete input-->
<script src="libs/autocomplete/autocomplete.js"></script>
<script type="module" src="/js/admin.js"></script>
<script id="elements-changes" src="/js/vvvebjs/elements-changes.js"></script>
<script data-v-theme-js src="editor.js"></script>
<script>
let pages = { $this->pages };
Vvveb.data = { $this->data };
let ready = function() {
let firstPage = Object.keys(pages)[0];
Vvveb.Builder.init(pages[firstPage]["url"], function() {
//load code after page is loaded here
});
Vvveb.Gui.init();
Vvveb.Breadcrumb.init();
Vvveb.Revisions.init();
var fileManagerComponents = [];
fileManagerComponents = fileManagerComponents.concat(Vvveb.ComponentsGroup['Ecommerce'], Vvveb.ComponentsGroup['Content']);
Vvveb.FileManager.init(fileManagerComponents);
Vvveb.SectionList.init(fileManagerComponents);
Vvveb.TreeList.init();
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(firstPage, fileManagerComponents);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();
let options = [];
for (let i in Vvveb.data.menu) {
let menu = Vvveb.data.menu[i];
options.push({value:menu.menu_id, text:menu.name});
}
let menuSelect = tmpl('vvveb-input-select', {key:"menu_id", options});
document.querySelector("#new-page-modal [name=menu_id]").innerHTML = menuSelect;
}
if (document.readyState !== "loading") {
ready();
} else {
document.addEventListener('DOMContentLoaded', ready);
}
let defaultTemplates = {'post':'content/post.html', 'page': 'content/page.html', 'product': 'product/product.html', 'template': 'blank.html'};
document.querySelector("[name='startTemplateUrl']").value = defaultTemplates['page'] ?? '';
let newPageTab = function (event) {
let active = this.value;
let sections = document.querySelectorAll("#new-page-modal .form > div");
sections.forEach((section, i) => {
let selected = section.classList.contains(active);
if (selected) {
section.style.display = "";
} else {
section.style.display = "none";
}
section.querySelectorAll("input,select").forEach((el, i) => {
if (selected) {
el.removeAttribute("disabled");
} else {
el.setAttribute("disabled", true);
}
});
let templateSelect = section.querySelector("[name='startTemplateUrl']");
if (templateSelect) {
templateSelect.value = defaultTemplates[active] ?? '';
}
});
//document.querySelectorAll("input,select", sections.filter("." + this.value).show()).removeAttribute("disabled");
;
};
document.querySelectorAll("#new-page-modal input[name=type]").forEach(e => e.addEventListener("click", newPageTab));
</script>
<!-- Modal -->
<div class="modal fade" id="heartBeatLogin" data-bs-backdrop="static" tabindex="-1" aria-labelledby="heartBeatLogin" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title" id="heartBeatLogin">
<h5>Session has expired</h5>
<span>Login to resume your work</span>
</span>
<button type="button" class="btn-close me-2" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-5">
</div>
</div>
</div>
</div>
<!-- save toast -->
<div class="toast-container position-fixed end-0 bottom-0 me-4 my-4">
<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" id="bottom-toast">
<div class="toast-header bg-success bg-opacity-25 border-0">
<strong class="me-auto">Page save</strong>
<!-- <small class="badge bg-success">status</small> -->
<button type="button" class="btn-close me-1" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<div class="flex-grow-1">
<div class="message">
<div>Elements saved!</div>
<div>Template backup was saved!</div>
<div>Template was saved!</div>
</div>
<div>
<!-- <a class="btn btn-success btn-icon btn-sm w-100 mt-2" href="">View page</a></div> -->
</div>
</div>
</div>
</div>
<div class="toast-container position-fixed end-0 top-0 me-4 my-4">
<div class="toast " role="alert" aria-live="assertive" aria-atomic="true" id="top-toast">
<div class="toast-header bg-success bg-opacity-25 border-0">
<strong class="me-auto">Page save</strong>
<!-- <small class="badge bg-success">status</small> -->
<button type="button" class="btn-close me-1" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<div class="flex-grow-1">
<div class="message">
<div>Elements saved!</div>
<div>Template backup was saved!</div>
<div>Template was saved!</div>
</div>
<div>
<!-- <a class="btn btn-success btn-icon btn-sm w-100 mt-2" href="">View page</a></div> -->
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink