{"id":88164,"date":"2025-12-17T00:10:15","date_gmt":"2025-12-17T00:10:15","guid":{"rendered":"https:\/\/adamericagroup.com\/design-studio\/"},"modified":"2025-12-17T00:10:15","modified_gmt":"2025-12-17T00:10:15","slug":"design-studio","status":"publish","type":"page","link":"https:\/\/adamericagroup.com\/shop\/design-studio\/","title":{"rendered":"Design Studio"},"content":{"rendered":"<div id=\"productdesignerapp-wrapper\">\n        <div id=\"productdesignerapp-app\" style=\"display: none;\">\n        <div class=\"pdapp-app-layout d-flex\" :class=\"'pdapp-app-'+ responsiveLayout.screenSize, 'pdapp-app-'+ responsiveLayout.position, responsiveLayout.screenSize == 'mobile' ? '' : 'gap-1'\" :style=\"'width:'+ responsiveLayout.width +'px;height:'+ responsiveLayout.height +'px'\" @click=\"closeOptionDropdown\">\n            <div class=\"pdapp-topbar-layout\">\n                <template v-if=\"isLoaded\">\n    <div class=\"pdapp-topbar d-flex justify-content-between align-items-center p-1 gap-2 bg-light\">\n    <button type=\"button\" class=\"btn btn-sm btn-danger tooltip-right\" :data-tooltip=\"langs.topbar.back_to_product\" @click=\"backToProduct\">\n        <i class=\"material-icons material-symbols-outlined\">keyboard_backspace<\/i>\n        <span class=\"d-lg-block d-none\">{{ langs.back }}<\/span>\n    <\/button>\n\n    <div class=\"pdapp-topbar-group d-flex justify-content-center align-items-center gap-1\">\n        <div class=\"pdapp-topbar-toolbar d-flex align-items-center gap-1 pdapp-product-size-box\" v-if=\"product.unit.edit && areaActive.id != undefined && 992 <= responsiveLayout.width && responsiveLayout.width < 1200\">\n            <div class=\"input-group input-group-sm tooltip-top d-flex flex-nowrap\" :data-tooltip=\"langs.toolbar.product_size\">\n                <span class=\"input-group-text ps-1 pe-1\">W<\/span>\n                <input type=\"number\" min=\"0\" step=\"any\" class=\"form-control pdapp-w50 ps-1 pe-0\" :value=\"areaActive.width\" @change=\"updatePrintSize($event, 'width')\">\n            <\/div>\n            <div class=\"input-group input-group-sm tooltip-top d-flex flex-nowrap\" :data-tooltip=\"langs.toolbar.product_size\">\n                <span class=\"input-group-text ps-1 pe-1\">H<\/span>\n                <input type=\"number\" min=\"0\" step=\"any\" class=\"form-control pdapp-w50 ps-1 pe-0\" :value=\"areaActive.height\" @change=\"updatePrintSize($event, 'height')\">\n            <\/div>\n            <select class=\"form-select form-select-sm\" @change=\"updatePrintSize($event, 'unit')\">\n                <option v-for=\"(unit, idx) in sizeUnit\" :key=\"idx\" :value=\"unit\" :selected=\"product.unit.type == unit\">{{ unit.toUpperCase() }}<\/option>\n            <\/select>\n        <\/div>\n        <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-bottom-left\" v-if=\"settings.layout.saveDesign.allow\" :data-tooltip=\"langs.topbar.your_design_desc\" @click=\"openDesign\">\n            <i class=\"material-icons material-symbols-outlined\">favorite<\/i>\n            <span class=\"d-lg-block d-none\">{{ langs.topbar.designs }}<\/span>\n        <\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-bottom-left\" :class=\"waitDesign ? 'disabled' : ''\" v-if=\"settings.layout.saveDesign.allow\" :data-tooltip=\"langs.topbar.save_design\" @click=\"openSaveDesign('')\">\n            <span v-if=\"waitDesign\" class=\"spinner-border spinner-border-sm\"><\/span>\n            <i class=\"material-icons material-symbols-outlined\" v-else>save<\/i>\n            <span class=\"d-lg-block d-none\">{{ langs.save }}<\/span>\n        <\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-bottom-left\" :class=\"waitDesign ? 'disabled' : ''\" :data-tooltip=\"langs.topbar.download_design\" v-if=\"settings.layout.download.allow && (settings.general.download.type.includes('png') || settings.general.download.type.includes('pdf') || settings.general.download.type.includes('svg'))\" @click=\"showDownload('')\">\n            <span v-if=\"waitDesign\" class=\"spinner-border spinner-border-sm\"><\/span>\n            <i class=\"material-icons material-symbols-outlined\" v-else>download<\/i>\n            <span class=\"d-lg-block d-none\">{{ langs.topbar.download }}<\/span>\n        <\/button>\n        <div class=\"d-block position-relative pdapp-product-color\" v-if=\"!responsiveLayout.showCart && modalCart.show != true && responsiveLayout.width < 1200 && (1 < productDataPX.colors.length || (productDataPX.colors.length == 1 && (productDataPX.colors[0].type == 'picker' || 1 < productDataPX.colors[0].values.length)))\">\n            <button type=\"button\" class=\"btn btn-sm tooltip-bottom-left btn-info border\" :class=\"dropdownMenu == 'product_color' ? 'active' : ''\" :data-tooltip=\"langs.toolbar.product_color\" @click=\"showProductColor\">\n                <i class=\"material-icons material-symbols-outlined\">format_color_fill<\/i>\n                <span class=\"d-lg-block d-none\">{{ langs.toolbar.product_color }}<\/span>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            <div class=\"pdapp-topbar-options position-absolute card shadow-lg p-1 border\" v-if=\"dropdownMenu == 'product_color'\">\n                <div class=\"pdapp-topbar-colorbox d-flex flex-column w-100 pdapp-hide-palette\" v-for=\"(color, cid) in productDataPX.colors\" :key=\"cid\">\n                    <h5 class=\"header-title fs-6 m-0 py-1\">{{ color.title }}<\/h5>\n                    <i class=\"material-icons material-symbols-outlined btn-close-dropbox\" @click=\"showProductColor\">close<\/i>\n                    <div class=\"pdapp-colorpicker\" v-if=\"color.type == 'picker'\">\n                        <input type=\"text\" :id=\"'pdapp-product-colorpicker-'+ color.id\" class=\"form-control\" v-model=\"color.active\" @input=\"changeProductColor(color.id, color.active, cid)\">\n                    <\/div>\n                    <div class=\"pdapp-listcolor d-flex flex-wrap w-100 gap-2\" v-else>\n                        <button type=\"button\" class=\"btn p-0 waves-effect waves-light border pdapp-w30 pdapp-h30 tooltip-top\" v-for=\"(val, k) in color.values\" :key=\"k\" :class=\"val.hex == color.active ? 'rounded-pill '+ getIconColor(val.hex) : 'rounded-2'\" :data-tooltip=\"val.title\" @click=\"changeProductColor(color.id, val.hex, cid)\" :style=\"'background:'+ val.hex\"><\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <button type=\"button\" v-if=\"!responsiveLayout.showCart && settings.layout.addcart.allow\" class=\"btn btn-sm btn-primary tooltip-bottom-left\" :data-tooltip=\"langs.topbar.add_to_cart\" @click=\"showCartBox()\">\n            <i class=\"material-icons material-symbols-outlined\">shopping_cart<\/i>\n            <span class=\"d-lg-block d-none\">{{ langs.topbar.add_cart }}<\/span>\n        <\/button>\n    <\/div>\n<\/div><\/template>\n<template v-else>\n    <div class=\"pdapp-topbar d-flex justify-content-between align-items-center p-1 gap-2 bg-light placeholder-glow\">\n    <button type=\"button\" class=\"btn btn-sm btn-danger pdapp-w60 pdapp-h30 placeholder d-lg-block d-none\"><\/button>\n    <button type=\"button\" class=\"btn btn-sm btn-danger pdapp-w40 pdapp-h30 placeholder d-lg-none d-block\"><\/button>\n    <div class=\"pdapp-topbar-group d-flex justify-content-center align-items-center gap-1\">\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w80 pdapp-h30 placeholder d-lg-block d-none\"><\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w40 pdapp-h30 placeholder d-lg-none d-block\"><\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w80 pdapp-h30 placeholder d-lg-block d-none\"><\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w40 pdapp-h30 placeholder d-lg-none d-block\"><\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w100 pdapp-h30 placeholder d-lg-block d-none\"><\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w40 pdapp-h30 placeholder d-lg-none d-block\"><\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w80 pdapp-h30 placeholder d-lg-block d-none\"><\/button>\n        <button type=\"button\" class=\"btn btn-sm btn-primary pdapp-w40 pdapp-h30 placeholder d-lg-none d-block\"><\/button>\n    <\/div>\n<\/div><\/template>            <\/div>\n            <div class=\"pdapp-design-layout d-flex\">\n                <div class=\"pdapp-left-layout d-flex position-relative\">\n                    <template v-if=\"isLoaded\">\n    <div class=\"pdapp-menus list-group border-none overflow-x-hidden overflow-y-auto p-1\" :class=\"responsiveLayout.screenSize == 'mobile' ? 'gap-1' : 'gap-2'\">\n    <template v-for=\"(menu, key) in listMenus\">\n        <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 rounded-2 p-2 d-flex flex-column border-0\" v-if=\"settings.layout[key] != undefined && ((settings.layout[key].allow != undefined && settings.layout[key].allow) || (settings.layout[key].allowUpload != undefined && (settings.layout[key].allowUpload || settings.layout[key].allowLibrary))) || key == 'product'\" :key=\"key\" @click=\"openMenu(key)\" :class=\"{'active': key == activeMenu, 'px-1': responsiveLayout.screenSize == 'desktop'}\">\n            <i class=\"material-icons material-symbols-outlined\">{{ menu.icon }}<\/i>\n            <span class=\"d-md-block d-none text-uppercase\">{{ menu.title }}<\/span>\n        <\/button>\n    <\/template>\n<\/div><template v-if=\"responsiveLayout.showMenu\">\n    <div class=\"pdapp-menu-options d-flex flex-column align-items-center gap-2 border-start\" v-if=\"activeMenu != null\">\n        <div class=\"pdapp-menu-options-head d-flex justify-content-between align-items-center gap-2 w-100 px-1\" v-if=\"listMenus[activeMenu] != undefined && listMenus[activeMenu].title != undefined\">\n            <template v-if=\"groupItem.show\">\n    <h4 class=\"header-title fs-5 m-0\">\n        <a href=\"javascript:void(0);\" class=\"text-blue\" @click=\"closeGroup()\">{{ groupItem.show ? langs.options.group : listMenus[activeMenu].title }}<\/a> <span class=\"sub-header\" v-if=\"menuOptions.childID != null && groupItem.show == false\"> \/ {{ langs.options.group }}<\/span>\n    <\/h4>\n    <button type=\"button\" class=\"btn btn-outline-danger btn-sm rounded-pill waves-effect waves-light pdapp-w25 pdapp-h25 p-0 tooltip-top\" :data-tooltip=\"langs.back\" @click=\"closeGroup()\">\n        <i class=\"material-icons material-symbols-outlined\">keyboard_backspace<\/i>\n    <\/button>\n<\/template>\n<template v-else>\n    <h4 class=\"header-title fs-5 m-0\" v-if=\"menuOptions.childID != null\">\n        <a href=\"javascript:void(0);\" class=\"text-blue\" @click=\"closeMenuOption()\">{{ listMenus[activeMenu].title }}<\/a> <span class=\"sub-header\"> \/ {{ (menuOptions.values[menuOptions.childID] != undefined && menuOptions.values[menuOptions.childID].title != undefined) ? menuOptions.values[menuOptions.childID].title : menuOptions.details[menuOptions.childID].title }}<\/span>\n    <\/h4>\n    <button type=\"button\" class=\"btn btn-outline-danger btn-sm rounded-pill waves-effect waves-light pdapp-w25 pdapp-h25 p-0 tooltip-top\" :data-tooltip=\"langs.back\" v-if=\"menuOptions.childID != null\" @click=\"closeMenuOption()\">\n        <i class=\"material-icons material-symbols-outlined\">keyboard_backspace<\/i>\n    <\/button>\n<\/template>        <\/div>\n\n        <template v-if=\"groupItem.show\">\n            <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n    <div class=\"pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showGroupOption\">\n        <button type=\"button\" class=\"btn btn-light tooltip-bottom rounded-2 pdapp-group-type-color\" :data-tooltip=\"langs.options.edit_color\" @click.stop.prevent=\"dropdownGroup('color')\" :class=\"groupItem.active == 'color' ? 'btn-primary' : 'btn-light'\" v-if=\"(settings.layout.photo.crop || settings.layout.photo.copy || settings.layout.photo.lock) && groupItem.colors.length\">\n            <i class=\"material-icons material-symbols-outlined\">palette<\/i>\n            <span class=\"dropdown-arrow-bot\"><\/span>\n        <\/button>\n\n        <button type=\"button\" class=\"btn btn-light tooltip-bottom rounded-2 pdapp-btn-copy\" :data-tooltip=\"langs.options.copy_group\" @click.stop.prevent=\"copyGroup()\">\n            <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n        <\/button>\n        \n        <button type=\"button\" class=\"btn tooltip-bottom rounded-2\" :data-tooltip=\"groupItem.isGroup ? langs.options.un_group : langs.options.group\" @click=\"setGroup()\" :class=\"groupItem.isGroup ? 'btn-primary' : 'btn-light'\">\n            <i class=\"material-icons material-symbols-outlined\" v-if=\"groupItem.isGroup\">ad_group_off<\/i>\n            <i class=\"material-icons material-symbols-outlined\" v-else>ad_group<\/i>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-photo-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2 rounded-0\">\n        <div class=\"w-100 btn-group gap-2 flex-wrap\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_top\" @click=\"alignGroup('top')\">\n                <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_right\" @click=\"alignGroup('right')\">\n                <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignGroup('bot')\">\n                <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_left\" @click=\"alignGroup('left')\">\n                <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignGroup('centerAll')\">\n                <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n            <\/button>\n\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignGroup('middle')\">\n                <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n            <\/button>\n                \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center\" @click=\"alignGroup('center')\">\n                <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n            <\/button>\n        <\/div>\n\n        <div class=\"w-100 btn-group gap-2 flex-wrap\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_top\" @click=\"moveGroup('top')\">\n                <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_bot\" @click=\"moveGroup('bot')\">\n                <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_left\" @click=\"moveGroup('left')\">\n                <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_right\" @click=\"moveGroup('right')\">\n                <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <button type=\"button\" class=\"btn btn-danger tooltip-top rounded-2 w-100 mb-2\" :data-tooltip=\"langs.options.delete_group\" @click=\"deleteGroup\">\n        <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n    <\/button>\n<\/div>\n\n<div class=\"pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border\" :class=\"'pdapp-group-dropdown-'+ groupItem.active\" v-if=\"groupItem.active != undefined && groupItem.active != ''\" @click.stop.prevent=\"\">\n    <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"groupItem.active = ''\">\n        <i class=\"material-icons material-symbols-outlined\">close<\/i>\n    <\/button>\n\n    <div class=\"pdapp-dropdown-box pdapp-hide-palette d-flex gap-1 p-2 flex-wrap w-100 overflow-y-auto overflow-x-hidden\" v-if=\"groupItem.active == 'color' && groupItem.colors.length\">\n        <input v-for=\"(color, cid) in groupItem.colors\" :key=\"cid\" type=\"text\" class=\"pdapp-edit-color\" class=\"form-control\" :data-color=\"color\" v-model=\"color\" style=\"display: none;\">\n    <\/div>\n<\/div>        <\/template>\n        <template v-else>\n            <template v-if=\"activeMenu == 'product'\">\n                <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden pdapp-menu-options-product\">\n    <div class=\"input-group input-group-merge\" v-if=\"listProducts.prods.length || listMenus.product.options.values.search != ''\" :class=\"responsiveLayout.width < 1200 ? 'input-group-sm' : ''\">\n        <span class=\"input-group-text bg-white\" :class=\"1200 <= responsiveLayout.width ? 'ps-2 pe-1' : 'ps-1 pe-0'\">\n            <i class=\"material-icons material-symbols-outlined\">search<\/i>\n        <\/span>\n        <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.product.options.values.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.product.options.values.search\" :placeholder=\"langs.options.search_products\">\n        <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.product.options.values.search != ''\" @click=\"listMenus.product.options.values.search = ''\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n    <\/div>\n\n    <template v-if=\"listMenus.product.options.values.loadProd == true\">\n        <div class=\"pdapp-h120 w-100 position-relative\">\n            <div class=\"pdapp-loading-mask\">\n                <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-products row g-2\" v-if=\"listProducts.prods.length\">\n            <div class=\"col-6 my-1\" v-for=\"(prod, tid) in listProducts.prods\" :key=\"tid\">\n                <button type=\"button\" class=\"pdapp-product m-0 btn gap-0 p-0 w-100 h-100 position-relative btn-light flex-column\" :class=\"prod.wid == productID ? 'border-primary' : ''\" @click=\"changeProductDesign(prod)\">\n                    <span class=\"d-flex flex-auto h-100\">\n                        <img :src=\"showImg(prod.thumb, prod.id, 'product')\" :alt=\"prod.title\" class=\"card-img-top img-fluid m-auto pdapp-mh140\">\n                    <\/span>\n                    <span class=\"pdapp-caption card-title text-primary p-1 m-0 fs-6\">{{ prod.title }}<\/span>\n                    <div class=\"pdapp-loading-mask\" v-if=\"listMenus.product.options.values.loadProd == prod.id\">\n                        <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                    <\/div>\n                <\/button>\n            <\/div>\n            <div class=\"col-12\" v-if=\"listProducts.prods.length < listProducts.total\">\n                <button type=\"button\" class=\"btn btn-light position-relative w-100\" @click=\"listMenus.product.options.values.page.paged++\">{{ langs.load_more }}<\/button>\n            <\/div>\n        <\/div>\n    <\/template>\n<\/div>            <\/template>\n\n            <template v-if=\"activeMenu == 'template'\">\n                <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden pdapp-menu-options-template\">\n    <ol class=\"breadcrumb mb-1\" v-if=\"1 < breadcrumbs.length\">\n        <li class=\"breadcrumb-item\" v-for=\"(bread, bid) in breadcrumbs\" :class=\"bread.to !== '' ? 'active' : ''\" :key=\"bid\">\n            <template v-if=\"bread.to === ''\">{{ bread.title }}<\/template>\n            <a v-else href=\"javascript: void(0);\" class=\"text-blue\" @click=\"openFolder(bread.to)\">{{ bread.title }}<\/a>\n        <\/li>\n    <\/ol>\n    <template v-if=\"listMenus.template.options.values.loadFolder\">\n        <div class=\"pdapp-folders w-100 mt-1\">\n            <div class=\"row g-2\">\n                <div class=\"col-6 my-1 placeholder-glow\">\n                    <div class=\"pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n                <\/div>\n                <div class=\"col-6 my-1 placeholder-glow\">\n                    <div class=\"pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-folders w-100 mt-1\" v-if=\"tempFolders[listMenus.template.options.values.activeFolder] != undefined && tempFolders[listMenus.template.options.values.activeFolder].length\">\n            <div class=\"row g-2\">\n                <div class=\"col-6 my-1\" v-for=\"(folder, fid) in tempFolders[listMenus.template.options.values.activeFolder]\" :key=\"fid\">\n                    <div class=\"card card-inverse text-white position-relative m-0 pdapp-folder rounded-2\" @click=\"openFolder(folder.id)\">\n                        <img :src=\"showImg(folder.thumb, folder.id, 'tempf')\" :alt=\"getTitle(folder.title)\" class=\"card-img img-fluid rounded-2\">\n                        <div class=\"card-img-overlay p-1 d-flex flex-column gap-0 text-center justify-content-center align-items-center\">\n                            <h5 class=\"card-title fs-5 fw-bold m-0 text-hidden\">{{ getTitle(folder.title) }}<\/h5>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n\n    <div class=\"input-group input-group-merge\" v-if=\"listTemplates.temps.length || listMenus.template.options.values.search != ''\" :class=\"responsiveLayout.width < 1200 ? 'input-group-sm' : ''\">\n        <span class=\"input-group-text bg-white\" :class=\"1200 <= responsiveLayout.width ? 'ps-2 pe-1' : 'ps-1 pe-0'\">\n            <i class=\"material-icons material-symbols-outlined\">search<\/i>\n        <\/span>\n        <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.template.options.values.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.template.options.values.search\" :placeholder=\"langs.options.search_templates\">\n        <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.template.options.values.search != ''\" @click=\"listMenus.template.options.values.search = ''\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n    <\/div>\n\n    <template v-if=\"listMenus.template.options.values.loadTemp == true\">\n        <div class=\"pdapp-h120 w-100 position-relative\">\n            <div class=\"pdapp-loading-mask\">\n                <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-templates row g-2\" v-if=\"listTemplates.temps.length\">\n            <div class=\"col-6 my-1\" v-for=\"(temp, tid) in listTemplates.temps\" :key=\"tid\">\n                <button type=\"button\" class=\"pdapp-template m-0 btn gap-0 p-0 w-100 h-100 position-relative btn-light flex-column\" @click=\"addTemplate(temp)\">\n                    <span class=\"d-flex flex-auto h-100\">\n                        <img :src=\"showImg(temp.thumb, temp.id, 'temp')\" :alt=\"getTitle(temp.title)\" class=\"card-img-top img-fluid m-auto pdapp-mh140\">\n                    <\/span>\n                    <span class=\"pdapp-caption card-title text-primary p-1 m-0 fs-6\">{{ getTitle(temp.title) }}<\/span>\n                    <div class=\"pdapp-loading-mask\" v-if=\"listMenus.template.options.values.loadTemp == temp.id\">\n                        <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                    <\/div>\n                <\/button>\n            <\/div>\n            <div class=\"col-12\" v-if=\"listTemplates.temps.length < listTemplates.total\">\n                <button type=\"button\" class=\"btn btn-light position-relative w-100\" @click=\"listMenus.template.options.values.page.paged++\">{{ langs.load_more }}<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"w-100 text-danger text-center\" v-if=\"tempFolders[listMenus.template.options.values.activeFolder] == undefined && listTemplates.temps.length == 0\">{{ langs.options.template_not_found }}<\/div>\n    <\/template>\n<\/div>            <\/template>\n\n            <template v-if=\"activeMenu == 'text'\">\n                <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n        <div class=\"pdapp-text-group border-bottom w-100 d-flex flex-column align-items-center\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['edit', 'font', 'size', 'color'], 'text')\">\n            <input type=\"text\" class=\"form-control mb-2\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateText\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['edit'], 'text')\">\n\n            <div class=\"pdapp-text-fonts btn-group position-relative w-100 gap-2 mb-2 flex-wrap\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['font', 'size', 'color'], 'text')\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-text-type-font\" :data-tooltip=\"langs.options.change_font\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['font'], 'text')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'font' ? 'btn-primary active' : 'btn-light'\" @click.stop.prevent=\"dropdownText('font')\">\n                    <span>{{ menuOptions.details[menuOptions.childID].fontFamily }}<\/span>\n                    <i class=\"material-icons material-symbols-outlined\">arrow_drop_down<\/i>\n                    <span class=\"dropdown-arrow-bot\"><\/span>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-text-type-size\" :data-tooltip=\"langs.options.font_size\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['size'], 'text')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'size' ? 'btn-primary active' : 'btn-light'\" @click.stop.prevent=\"dropdownText('size')\">\n                    <span>{{ menuOptions.details[menuOptions.childID].fontSize }}<\/span>\n                    <i class=\"material-icons material-symbols-outlined\">arrow_drop_down<\/i>\n                    <span class=\"dropdown-arrow-bot\"><\/span>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-text-type-color\" :data-tooltip=\"langs.options.text_color\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['color'], 'text')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'btn-primary active' : 'btn-light'\" @click.stop.prevent=\"dropdownText('color')\">\n                    <i class=\"material-icons material-symbols-outlined\">format_color_text<\/i>\n                    <span class=\"dropdown-arrow-bot\"><\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-text-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['arc', 'space', 'outline', 'transparent'], 'text')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-text-type-arc\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['arc'], 'text')\" :data-tooltip=\"langs.options.arc_radius\" @click.stop.prevent=\"dropdownText('arc')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'arc' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">line_curve<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-text-type-spacing\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['space'], 'text')\" :data-tooltip=\"langs.options.spacing\" @click.stop.prevent=\"dropdownText('spacing')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_letter_spacing<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-text-type-outline\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['outline'], 'text')\" :data-tooltip=\"langs.options.outline\" @click.stop.prevent=\"dropdownText('outline')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'outline' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">type_specimen<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-text-type-transparency\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['transparent'], 'text')\" :data-tooltip=\"langs.options.transparency\" @click.stop.prevent=\"dropdownText('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-text-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['style'], 'text')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['bold'], 'text')\" :data-tooltip=\"langs.options.bold\" @click=\"formatText('bold')\" :class=\"menuOptions.details[menuOptions.childID].fontWeight == '700' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_bold<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['italic'], 'text')\" :data-tooltip=\"langs.options.italic\" @click=\"formatText('italic')\" :class=\"menuOptions.details[menuOptions.childID].fontStyle == 'italic' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_italic<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['underline'], 'text')\" :data-tooltip=\"langs.options.underline\" @click=\"formatText('underline')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'underline' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_underlined<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['strike'], 'text')\" :data-tooltip=\"langs.options.line_through\" @click=\"formatText('through')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'line-through' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_strikethrough<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['uppercase'], 'text')\" :data-tooltip=\"langs.options.uppercase\" @click=\"formatText('uppercase')\" :class=\"menuOptions.details[menuOptions.childID].textTransform == 'uppercase' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">match_case<\/i>\n            <\/button>\n        <\/div>\n\n        <div class=\"pdapp-text-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(true, ['copy', 'lock', 'flip'], 'text')\">\n            <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['copy'], 'text')\" :data-tooltip=\"langs.options.copy_text\" @click=\"copyText()\">\n                <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'text')\" :data-tooltip=\"langs.options.lock\" @click=\"lockText()\" :class=\"menuOptions.details[menuOptions.childID].textLock ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].textLock\">lock<\/i>\n                <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['flip'], 'text')\" :data-tooltip=\"langs.options.flip_text\" @click=\"flipText()\" :class=\"menuOptions.details[menuOptions.childID].textFlip ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">multiple_stop<\/i>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-text-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2 rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['move'], 'text')\">\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_top\" @click=\"alignText('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_right\" @click=\"alignText('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignText('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_left\" @click=\"alignText('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignText('centerAll')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignText('middle')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_center\" @click=\"alignText('center')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                <\/button>\n            <\/div>\n\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_top\" @click=\"moveText('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_bot\" @click=\"moveText('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_left\" @click=\"moveText('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_right\" @click=\"moveText('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n        <button type=\"button\" class=\"btn btn-danger tooltip-top rounded-2 w-100 mb-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['delete'], 'text')\" :data-tooltip=\"langs.options.delete_text\" @click=\"deleteText()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border\" :class=\"'pdapp-text-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"closeTextDropdown()\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n\n        <div class=\"pdapp-dropdown-box d-flex flex-column gap-1 p-2\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'font'\">\n            <div class=\"input-group input-group-merge\">\n                <span class=\"input-group-text bg-white ps-2 pe-1\">\n                    <i class=\"material-icons material-symbols-outlined\">search<\/i>\n                <\/span>\n                <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"fontLibrary.find != '' ? 'border-end-0' : ''\" v-model=\"fontLibrary.find\" @input=\"fontLibrary.page.paged = 1\">\n                <button type=\"button\" class=\"input-group-text bg-white  text-danger ps-1 pe-2\" v-if=\"fontLibrary.find != ''\" @click=\"fontLibrary.find = ''\">\n                    <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                <\/button>\n            <\/div>\n            <div class=\"pdapp-font-categories d-flex gap-2 mw-100 overflow-x-auto overflow-y-hidden pb-1\">\n                <button type=\"button\" class=\"btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap text-capitalize\" :class=\"fontLibrary.category == '' ? 'btn-primary' : 'btn-light'\" @click=\"fontLibrary.category = '', fontLibrary.page.paged = 1\">{{ langs.options.all }}<\/button>\n                <button type=\"button\" class=\"btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap text-capitalize\" v-for=\"(category, idx) in listFonts.category\" :class=\"fontLibrary.category == category ? 'btn-primary' : 'btn-light'\" :key=\"idx\" @click=\"fontLibrary.category = category, fontLibrary.page.paged = 1\">{{ getCateFont(category) }}<\/button>\n            <\/div>\n            <div class=\"pdapp-font-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden\">\n                <button type=\"button\" class=\"pdapp-h30 btn d-flex p-1 rounded-2\" v-for=\"(font, idx) in listFonts.fonts\" @click=\"changeFont(font)\" :class=\"font.title == menuOptions.details[menuOptions.childID].fontFamily ? 'btn-primary' : 'btn-light'\">\n                    <img :src=\"pluginUrl +'assets\/images\/fonts\/'+ font.title.replaceAll(' ', '') +'.png'\" :alt=\"font.title\" class=\"mh-100 mw-100\">\n                <\/button>\n                <button type=\"button\" v-if=\"listFonts.fonts.length < listFonts.total\" class=\"btn btn-light rounded-2 w-100\" @click=\"fontLibrary.page.paged++\">{{ langs.load_more }}<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex flex-column gap-1 p-2\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'size'\">\n            <input type=\"number\" min=\"6\" step=\"1\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].fontSize\" @change=\"updateTextSize('')\">\n            <div class=\"pdapp-size-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden\">\n                <button type=\"button\" v-for=\"(size, idx) in fontsize\" :key=\"idx\" class=\"btn rounded-2\" :class=\"menuOptions.details[menuOptions.childID].fontSize == size ? 'btn-primary' : 'btn-light'\" @click=\"updateTextSize(size)\">{{size}}<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex flex-column gap-1 p-2 overflow-y-auto overflow-x-hidden\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color'\">\n            <h5 class=\"header-title pdapp-text-fillstyle-title fs-6 m-0 p-0\">{{ langs.options.fill_style }}<\/h5>\n            <div class=\"pdapp-text-fillstyle d-flex w-100 gap-2\">\n                <button type=\"button\" @click=\"gradientText('normal')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'normal' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.solid_color\" :style=\"'background:'+ menuOptions.details[menuOptions.childID].color\">\n                    <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'normal'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                <\/button>\n                <button type=\"button\" @click=\"gradientText('hor')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'hor' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.hor_gradient\" :style=\"'background:linear-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\">\n                    <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'hor'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                <\/button>\n                <button type=\"button\" @click=\"gradientText('ver')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'ver' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.ver_gradient\" :style=\"'background:linear-gradient(to right, '+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\">\n                    <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'ver'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                <\/button>\n                <button type=\"button\" @click=\"gradientText('radial')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'radial' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.rad_gradient\" :style=\"'background:radial-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\">\n                    <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'radial'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                <\/button>\n            <\/div>\n            <template v-if=\"textColor.colors.length\">\n                <h5 class=\"header-title fs-6 m-0 pt-1 d-flex justify-content-between align-items-center\">{{ langs.options.text_color }}<\/h5>\n                <div class=\"pdapp-text-color d-flex w-100 gap-2 flex-wrap\">\n                    <button type=\"button\" v-for=\"(color, k) in textColor.colors\" :key=\"k\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"color.hex == menuOptions.details[menuOptions.childID].color ? 'rounded-pill '+ getIconColor(color.hex) : 'rounded-2'\" :data-tooltip=\"color.title\" @click=\"pdappAddonUpdateColor('text', color.hex)\" :style=\"'background:'+ color.hex\"><\/button>\n                <\/div>\n            <\/template>\n            <template v-else>\n                <h5 class=\"header-title fs-6 m-0 pt-1 d-flex justify-content-between align-items-center\">{{ langs.options.color_picker }} <span class=\"d-flex align-items-center\">#<input id=\"pdapp-text-colorinput\" style=\"width: 100px;\" type=\"text\" class=\"form-control form-control-sm\" :value=\"hexColor(menuOptions.details[menuOptions.childID].color)\" @input=\"updateAttrColor($event.target.value, 'text')\"><\/span><\/h5>\n                <input type=\"text\" id=\"pdapp-text-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].color\" @input=\"updateTextStyle('color')\">\n            <\/template>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'arc'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"1000\" class=\"form-range\" :style=\"'background-size:'+ (menuOptions.details[menuOptions.childID].radius*100\/1000) +'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].radius\" @input=\"updateTextStyle('radius')\">\n            <input type=\"number\" min=\"0\" max=\"1000\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].radius\" @change=\"updateTextStyle('radius')\">\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing'\">\n            <input type=\"range\" step=\"1\" min=\"-10\" max=\"50\" class=\"form-range\" :style=\"'background-size:'+((parseInt(menuOptions.details[menuOptions.childID].letterSpacing)+10)*100\/60)+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @input=\"updateTextStyle('letterSpacing')\">\n            <input type=\"number\" min=\"-10\" max=\"50\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @change=\"updateTextStyle('letterSpacing')\">\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-2 p-2 flex-column w-100 pdapp-hide-palette\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'outline'\">\n            <input type=\"text\" id=\"pdapp-outline-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].stroke\" @input=\"updateTextStyle('outline')\">\n            <div class=\"d-flex align-items-center\">#<input id=\"pdapp-outline-colorinput\" style=\"width: 100px;\" type=\"text\" class=\"form-control form-control-sm\" :value=\"hexColor(menuOptions.details[menuOptions.childID].stroke)\" @input=\"updateAttrColor($event.target.value, 'outline')\"><\/div>\n            <div class=\"d-flex gap-2 align-items-center w-100\">\n                <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].strokeWidth+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @input=\"updateTextStyle('outline')\">\n                <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @change=\"updateTextStyle('outline')\">\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updateTextStyle('transparency')\">\n            <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updateTextStyle('transparency')\">\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden pdapp-menu-options-text\">\n        <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.style }}<\/h5>\n        <div class=\"pdapp-text-group d-flex flex-column w-100 gap-2 mb-2\">\n            <button type=\"button\" class=\"btn btn-light pdapp-h40\" @click=\"addNewText(settings.general.text.heading)\" v-if=\"settings.general.text.heading != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/heading.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.heading.text\">\n            <\/button>\n            <button type=\"button\" class=\"btn btn-light pdapp-h30\" @click=\"addNewText(settings.general.text.body)\" v-if=\"settings.general.text.body != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/body.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.body.text\">\n            <\/button>\n        <\/div>\n\n        <h5 class=\"header-title fs-6 m-0 p-0\" v-if=\"showSettingOption(true, ['arc'], 'text')\">{{ langs.options.text_arc }}<\/h5>\n        <div class=\"pdapp-text-group d-flex flex-column w-100 gap-2 mb-2\" v-if=\"showSettingOption(true, ['arc'], 'text')\">\n            <button type=\"button\" class=\"btn btn-light pdapp-h50\" @click=\"addNewText(settings.general.text.arc)\" v-if=\"settings.general.text.arc != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/arc.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.arc.text\">\n            <\/button>\n            <button type=\"button\" class=\"btn btn-light pdapp-h50\" @click=\"addNewText(settings.general.text.reversearc)\" v-if=\"settings.general.text.reversearc != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/reversearc.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.reversearc.text\">\n            <\/button>\n        <\/div>\n\n        <template v-if=\"listTextTemp.temps.length || loadTextTemp\">\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.text_templates }}<\/h5>\n            <div class=\"pdapp-text-group d-flex flex-column w-100 gap-2 pb-1 pdapp-text-templates\">\n                <template v-if=\"loadTextTemp\">\n                    <div class=\"pdapp-h120 w-100 position-relative\">\n                        <div class=\"pdapp-loading-mask\">\n                            <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                        <\/div>\n                    <\/div>\n                <\/template>\n                <template v-else>\n                    <div class=\"input-group input-group-merge\" v-if=\"listTextTemp.temps.length || listMenus.text.search != ''\" :class=\"responsiveLayout.width < 1200 ? 'input-group-sm' : ''\">\n                        <span class=\"input-group-text bg-white\" :class=\"1200 <= responsiveLayout.width ? 'ps-2 pe-1' : 'ps-1 pe-0'\">\n                            <i class=\"material-icons material-symbols-outlined\">search<\/i>\n                        <\/span>\n                        <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.text.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.text.search\" :placeholder=\"langs.options.search_templates\" @input=\"listMenus.text.page.paged = 1\">\n                        <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.text.search != ''\" @click=\"listMenus.text.search = ''\">\n                            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                        <\/button>\n                    <\/div>\n                    \n                    <button type=\"button\" class=\"btn btn-light pdapp-h40\" v-for=\"(text, tid) in listTextTemp.temps\" :key=\"tid\" @click=\"addTextTemplate(text)\">\n                        <img :src=\"pluginUrl +'assets\/images\/texts\/'+ text.thumb\" class=\"mh-100 mw-100\" :alt=\"text.text\">\n                    <\/button>\n                    <button v-if=\"listTextTemp.temps.length < listTextTemp.total\" type=\"button\" class=\"btn btn-light w-100\" @click=\"listMenus.text.page.paged++\">{{ langs.load_more }}<\/button>\n                <\/template>\n            <\/div>\n        <\/template>\n    <\/div>\n<\/template>            <\/template>\n\n            <template v-if=\"activeMenu == 'artwork'\">\n                <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n        <div class=\"pdapp-artwork-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent', 'color'], 'art')\">\n            <button type=\"button\" class=\"btn tooltip-bottom rounded-2 pdapp-artwork-type-transparency\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'art')\" :data-tooltip=\"langs.options.transparency\" @click.stop.prevent=\"dropdownPhoto('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-bottom rounded-2 pdapp-artwork-type-color\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'art')\" :data-tooltip=\"langs.options.edit_color\" @click.stop.prevent=\"dropdownPhoto('color')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">palette<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n        <\/div>\n\n        <div class=\"pdapp-artwork-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(true, ['copy', 'lock', 'flip'], 'art')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'art')\" :data-tooltip=\"langs.options.copy_artwork\" @click=\"copyArtwork()\">\n                <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n            <\/button>\n                \n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'art')\" :data-tooltip=\"langs.options.lock\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n            <\/button>\n                \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['flip'], 'art')\" :data-tooltip=\"langs.options.flip_artwork\" @click=\"flipPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoFlip ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">multiple_stop<\/i>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-artwork-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2 rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'art')\">\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_top\" @click=\"alignPhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_right\" @click=\"alignPhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignPhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_left\" @click=\"alignPhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignPhoto('centerAll')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                <\/button>\n            \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignPhoto('middle')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center\" @click=\"alignPhoto('center')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_inside\" @click=\"fitPhotoInside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_outside\" @click=\"fitPhotoOutside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                <\/button>\n            <\/div>\n        \n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_top\" @click=\"movePhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_bot\" @click=\"movePhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_left\" @click=\"movePhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_right\" @click=\"movePhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n        <button type=\"button\" class=\"btn btn-danger tooltip-top rounded-2 w-100 mb-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'art')\" :data-tooltip=\"langs.options.delete_artwork\" @click=\"deleteArtwork()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border\" :class=\"'pdapp-artwork-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"closePhotoDropdown()\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n            <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n        <\/div>\n        \n        <div class=\"pdapp-dropdown-box gap-1 p-2 d-flex flex-column w-100 gap-2 pdapp-hide-palette overflow-y-auto overflow-x-hidden\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color' && menuOptions.details[menuOptions.childID].colors.length\">\n            <div class=\"pdapp-color-item-box w-100\" v-for=\"(color, cid) in menuOptions.details[menuOptions.childID].colors\" :key=\"cid\">\n                <template v-if=\"artColor.colors.length\">\n                    <h5 class=\"header-title fs-6 m-0 pt-1 d-flex justify-content-between align-items-center\">{{ langs.options.color }} {{ cid + 1 }}<\/h5>\n                    <div class=\"pdapp-text-color d-flex w-100 gap-2 flex-wrap\">\n                        <button type=\"button\" v-for=\"(col, k) in artColor.colors\" :key=\"k\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"col.hex == color ? 'rounded-pill '+ getIconColor(col.hex) : 'rounded-2'\" :data-tooltip=\"col.title\" @click=\"pdappAddonUpdateColor('art', col.hex, color, cid)\" :style=\"'background:'+ col.hex\"><\/button>\n                    <\/div>\n                <\/template>\n                <template v-else>\n                    <input :id=\"'pdapp-edit-colorpicker-'+ cid\" type=\"text\" class=\"pdapp-edit-color\" class=\"form-control\" :data-color=\"color\" v-model=\"color\" style=\"display: none;\">\n                    <div class=\"d-flex align-items-center mt-2\">#<input :id=\"'pdapp-edit-colorinput-'+ cid\" style=\"width: 100px;\" type=\"text\" class=\"form-control form-control-sm\" :value=\"hexColor(color)\" @input=\"updateAttrColor($event.target.value, 'edit', cid)\"><\/div>\n                <\/template>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <div class=\"pdapp-menu-options-content pdapp-list-artworks d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden pdapp-menu-options-artwork\">\n        <ol class=\"breadcrumb mb-0\" v-if=\"1 < breadcrumbs.length\">\n            <li class=\"breadcrumb-item\" v-for=\"(bread, bid) in breadcrumbs\" :class=\"bread.to !== '' ? 'active' : ''\" :key=\"bid\">\n                <template v-if=\"bread.to === ''\">{{ bread.title }}<\/template>\n                <a v-else href=\"javascript: void(0);\" @click=\"openFolder(bread.to)\">{{ bread.title }}<\/a>\n            <\/li>\n        <\/ol>\n        <template v-if=\"listMenus.artwork.options.values.loadFolder\">\n            <div class=\"pdapp-folders w-100\">\n                <div class=\"row g-2 mt-0\">\n                    <div class=\"col-6 placeholder-glow my-1\">\n                        <div class=\"pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n                    <\/div>\n                    <div class=\"col-6 placeholder-glow my-1\">\n                        <div class=\"pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/template>\n        <template v-else>\n            <div class=\"pdapp-folders w-100 mt-n1 mb-1\" :class=\"listArtworks.arts.length || listMenus.artwork.options.values.search != '' ? 'border-bottom pb-2 mb-2' : ''\" v-if=\"artFolders[listMenus.artwork.options.values.activeFolder] != undefined && artFolders[listMenus.artwork.options.values.activeFolder].length\">\n                <div class=\"row g-2 mt-0\">\n                    <div class=\"col-6 my-1\" v-for=\"(folder, fid) in artFolders[listMenus.artwork.options.values.activeFolder]\" :key=\"fid\">\n                        <div class=\"card card-inverse text-white position-relative m-0 pdapp-folder rounded-2\" @click=\"openFolder(folder.id)\">\n                            <img :src=\"showImg(folder.thumb, folder.id, 'artf')\" :alt=\"getTitle(folder.title)\" class=\"card-img img-fluid rounded-2\">\n                            <div class=\"card-img-overlay p-1 d-flex flex-column gap-0 text-center justify-content-center align-items-center\">\n                                <h5 class=\"card-title fs-5 fw-bold m-0 text-hidden\">{{ getTitle(folder.title) }}<\/h5>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/template>\n\n        <div class=\"input-group input-group-merge\" v-if=\"listArtworks.arts.length || listMenus.artwork.options.values.search != ''\" :class=\"responsiveLayout.width < 1200 ? 'input-group-sm' : ''\">\n            <span class=\"input-group-text bg-white\" :class=\"1200 <= responsiveLayout.width ? 'ps-2 pe-1' : 'ps-1 pe-0'\">\n                <i class=\"material-icons material-symbols-outlined\">search<\/i>\n            <\/span>\n            <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.artwork.options.values.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.artwork.options.values.search\" :placeholder=\"langs.options.search_artworks\" @input=\"listMenus.artwork.options.values.page.paged = 1\">\n            <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.artwork.options.values.search != ''\" @click=\"listMenus.artwork.options.values.search = ''\">\n                <i class=\"material-icons material-symbols-outlined\">close<\/i>\n            <\/button>\n        <\/div>\n        \n        <template v-if=\"listMenus.artwork.options.values.loadArt == true\">\n            <div class=\"pdapp-h120 w-100 position-relative\">\n                <div class=\"pdapp-loading-mask\">\n                    <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                <\/div>\n            <\/div>\n        <\/template>\n        <template v-else>\n            <div class=\"pdapp-artworks row g-2 mt-0\" v-if=\"listArtworks.arts.length\">\n                <div class=\"col-6 my-1\" v-for=\"(art, aid) in listArtworks.arts\" :key=\"aid\">\n                    <button type=\"button\" class=\"pdapp-artwork flex-column m-0 btn waves-effect waves-light gap-0 p-0 w-100 position-relative btn-light\" @click=\"addArtwork(art)\">\n                        <span class=\"d-flex flex-auto h-100\">\n                            <img :src=\"showImg(art.thumb, art.id, 'art')\" :alt=\"getTitle(art.title)\" class=\"card-img-top img-fluid m-auto pdapp-mh140\">\n                        <\/span>\n                        <span class=\"pdapp-caption card-title text-primary p-1 m-0 fs-6\">{{ getTitle(art.title) }}<\/span>\n                        <div class=\"pdapp-loading-mask pdapp-loading-page\" v-if=\"listMenus.artwork.options.values.loadArt == art.id\">\n                            <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                        <\/div>\n                    <\/button>\n                <\/div>\n                <div class=\"col-12\" v-if=\"listArtworks.arts.length < listArtworks.total\">\n                    <button type=\"button\" class=\"btn btn-light w-100\" @click=\"listMenus.artwork.options.values.page.paged++\">{{ langs.load_more }}<\/button>\n                <\/div>\n            <\/div>\n            <div class=\"w-100 text-danger text-center\" v-if=\"artFolders[listMenus.artwork.options.values.activeFolder] == undefined && listArtworks.arts.length == 0\">{{ langs.options.artwork_not_found }}<\/div>\n        <\/template>\n    <\/div>\n<\/template>            <\/template>\n\n            <template v-if=\"activeMenu == 'photo'\">\n                <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n        <div class=\"pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['shape', 'transparent', 'filter', 'color'], 'photo')\">\n            <button type=\"button\" class=\"btn tooltip-bottom rounded-2 pdapp-photo-type-shape\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['shape'], 'photo')\" :data-tooltip=\"langs.options.shape_photo\" @click.stop.prevent=\"dropdownPhoto('shape')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'shape' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">interests<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n\n            <button type=\"button\" class=\"btn tooltip-bottom rounded-2 pdapp-photo-type-filter\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['filter'], 'photo')\" :data-tooltip=\"langs.options.filter_photo\" @click.stop.prevent=\"dropdownPhoto('filter')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'filter' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">photo_filter<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-bottom rounded-2 pdapp-photo-type-transparency\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'photo')\" :data-tooltip=\"langs.options.transparency\" @click.stop.prevent=\"dropdownPhoto('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-bottom rounded-2 pdapp-photo-type-color\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'photo')\" :data-tooltip=\"langs.options.edit_color\" @click.stop.prevent=\"dropdownPhoto('color')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">palette<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(true, ['crop', 'copy', 'lock', 'flip'], 'photo')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['crop'], 'photo')\" :data-tooltip=\"langs.options.crop_photo\" @click.stop.prevent=\"dropdownPhoto('crop', '')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'crop' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">crop<\/i>\n            <\/button>\n        \n            <button type=\"button\" class=\"btn btn-light tooltip-top rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'photo')\" :data-tooltip=\"langs.options.copy_photo\" @click=\"copyPhoto()\">\n                <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n            <\/button>\n                \n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'photo')\" :data-tooltip=\"langs.options.lock\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['flip'], 'photo')\" :data-tooltip=\"langs.options.flip_photo\" @click=\"flipPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoFlip ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">multiple_stop<\/i>\n            <\/button>\n        <\/div>\n\n        <div class=\"pdapp-photo-group btn-group position-relative w-100 d-flex align-items-center gap-2 flex-wrap rounded-0\" v-if=\"!menuOptions.details[menuOptions.childID].photoLock && (menuOptions.details[menuOptions.childID].clickUpload || menuOptions.details[menuOptions.childID].clickPhoto)\">\n            <button type=\"button\" class=\"btn w-100 tooltip-top rounded-2 btn-light align-items-center\" :data-tooltip=\"langs.options.replace_photo\" @click.stop.prevent=\"showReplacePhoto\">\n                <i class=\"material-icons material-symbols-outlined\">reset_image<\/i>\n                <span class=\"pdapp-caption d-md-block d-none w-auto ms-1\">{{ langs.options.replace_photo }}<\/span>\n            <\/button>\n            <input id=\"pdapp-upload-a-photo-replace\" type=\"file\" class=\"d-none\" :disabled=\"uploading\" @change=\"changePhotoReplace\" accept=\".jpg,.jpeg,.png\">\n        <\/div>\n        \n        <div class=\"pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'photo')\">\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_top\" @click=\"alignPhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_right\" @click=\"alignPhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignPhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_left\" @click=\"alignPhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignPhoto('centerAll')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                <\/button>\n            \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignPhoto('middle')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                <\/button>\n                    \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center\" @click=\"alignPhoto('center')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_inside\" @click=\"fitPhotoInside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_outside\" @click=\"fitPhotoOutside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                <\/button>\n            <\/div>\n\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_top\" @click=\"movePhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_bot\" @click=\"movePhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_left\" @click=\"movePhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_right\" @click=\"movePhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n        <button type=\"button\" class=\"btn btn-danger tooltip-top rounded-2 w-100 mb-2\" :data-tooltip=\"langs.options.delete_photo\" @click=\"deletePhoto()\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'photo')\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border\" :class=\"'pdapp-photo-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"closePhotoDropdown()\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n\n        <div class=\"pdapp-dropdown-box pdapp-shape-list d-flex align-items-center justify-content-center flex-wrap gap-2 p-2 w-100 overflow-y-auto overflow-x-hidden\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'shape'\">\n            <div class=\"pdapp-shape-item d-flex align-items-center justify-content-center position-relative\" :class=\"menuOptions.details[menuOptions.childID].photoShape == '' ? 'active' : ''\" @click=\"addShape('')\">\n                <div class=\"pdapp-shape\" :title=\"langs.options.normal\">\n                    <img :src=\"pluginUrl +'assets\/images\/shapes\/normal.png'\" :alt=\"langs.options.normal\" class=\"pdapp-img bg-light w-100\">\n                <\/div>\n                <span class=\"pdapp-shape-name\">{{ langs.options.normal }}<\/span>\n            <\/div>\n            <div class=\"pdapp-shape-item d-flex align-items-center justify-content-center position-relative\" v-for=\"(shape, sid) in shapePhoto\" :key=\"sid\" @click=\"addShape(shape)\" :class=\"menuOptions.details[menuOptions.childID].photoShape == shape.slug ? 'btn-primary' : 'btn-light'\">\n                <div class=\"pdapp-shape\" :title=\"shape.title\">\n                    <img :src=\"pluginUrl +'assets\/images\/shapes\/'+ shape.thumb\" :alt=\"shape.title\" class=\"pdapp-img bg-light w-100\">\n                <\/div>\n                <span class=\"pdapp-shape-name\">{{ shape.title }}<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box pdapp-filter-list d-flex flex-wrap overflow-y-auto overflow-x-hidden\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'filter'\">\n            <div class=\"pdapp-filter-item d-flex flex-column align-items-center justify-content-center position-relative\" :class=\"menuOptions.details[menuOptions.childID].photoFilter == '' ? 'active' : ''\" @click=\"addFilter('')\">\n                <div class=\"pdapp-filter position-relative d-flex w-100\" :title=\"langs.options.normal\">\n                    <img :src=\"menuOptions.details[menuOptions.childID].photo\" :alt=\"langs.options.normal\" class=\"pdapp-img\">\n                <\/div>\n                <span class=\"pdapp-filter-name\">{{ langs.options.normal }}<\/span>\n            <\/div>\n            <div class=\"pdapp-filter-item d-flex flex-column align-items-center justify-content-center position-relative\" v-for=\"(filter, fid) in filterPhoto\" :key=\"fid\" @click=\"addFilter(filter)\" :class=\"menuOptions.details[menuOptions.childID].photoFilter == filter.slug ? 'btn-primary' : 'btn-light'\">\n                <div class=\"pdapp-filter position-relative d-flex w-100\" :title=\"filter.title\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"position: absolute; width: 0px; height: 0px;\"><filter :id=\"'filter-svg-'+ fid\" filterUnits=\"objectBoundingBox\" primitiveUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feColorMatrix type=\"matrix\" :values=\"filter.value\"><\/feColorMatrix><\/filter><\/svg>\n                    <img :src=\"menuOptions.details[menuOptions.childID].photo\" :alt=\"filter.title\" class=\"pdapp-img bg-light\" :style=\"'filter: url(#filter-svg-'+ fid +')'\">\n                <\/div>\n                <span class=\"pdapp-filter-name\">{{ filter.title }}<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 w-100 align-items-center\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n            <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex flex-column gap-1 p-2 w-100 pdapp-hide-palette\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color' && menuOptions.details[menuOptions.childID].colors.length\">\n            <div class=\"pdapp-color-item-box w-100\" v-for=\"(color, cid) in menuOptions.details[menuOptions.childID].colors\" :key=\"cid\">\n                <input type=\"text\" class=\"pdapp-edit-color\" class=\"form-control\" :data-color=\"color\" v-model=\"color\" style=\"display: none;\">\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden\">\n        <template v-if=\"settings.layout.photo.allowUpload\">\n            <div class=\"pdapp-upload-box w-100\">\n                <label for=\"pdapp-upload-a-photo\" class=\"btn btn-primary waves-effect m-0 w-100\" :class=\"uploading ? 'disabled' : ''\">\n                    <span v-if=\"uploading\">\n                        <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"><\/span>\n                        {{ langs.options.uploading }}\n                    <\/span>\n                    <span v-else>\n                        <i class=\"material-icons material-symbols-outlined me-1\">cloud_upload<\/i>\n                        {{ langs.options.upload_a_photo }}\n                    <\/span>\n                <\/label>\n                <input id=\"pdapp-upload-a-photo\" type=\"file\" class=\"d-none\" :disabled=\"uploading\" @change=\"changePhoto\" :accept=\"settings.general.upload != 'undefined' ? '.'+ settings.general.upload.type.join(',.') : '.jpg'\">\n            <\/div>\n            <small class=\"pdapp-confirm-upload-desc\" v-if=\"confirmUpload.allow && confirmUpload.warning != ''\">{{ confirmUpload.warning }}<\/small>\n        <\/template>\n        <template v-if=\"settings.layout.photo.allowLibrary && settings.general.photo.key != ''\">\n            <div class=\"pdapp-text-space d-flex w-100 justify-content-center align-items-center position-relative pdapp-h25 p-0 m-0\">\n                <span class=\"sub-header m-0 text-uppercase\">{{ langs.options.or }}<\/span>\n            <\/div>\n\n            <div class=\"input-group input-group-merge mb-1\">\n                <span class=\"input-group-text bg-white ps-2 pe-1\">\n                    <i class=\"material-icons material-symbols-outlined\">search<\/i>\n                <\/span>\n                <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.photo.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.photo.search\" :placeholder=\"langs.options.search_free_photos_on +' '+settings.general.photo.library\" @change=\"findPhotos()\">\n                <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.photo.search != ''\" @click=\"listMenus.photo.search = '', findPhotos()\">\n                    <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                <\/button>\n            <\/div>\n            \n            <div class=\"pdapp-photo-libraries position-relative overflow-x-hidden w-100\">\n                <div class=\"pdapp-photo-list d-flex flex-wrap gap-1 justify-content-between w-100 m-0 p-0 pe-1\" v-if=\"0 < menuOptions.values.length\">\n                    <div class=\"pdapp-photo-item d-flex align-items-center justify-content-between rounded-2 position-relative gap-1\" v-for=\"(photo, pid) in menuOptions.values\" :key=\"pid\" @click=\"addPhoto(photo)\">\n                        <div class=\"pdapp-thumbnail bg-light rounded-2 d-flex position-relative w-100\" :title=\"photo.name\">\n                            <img :src=\"photo.thumb\" :alt=\"photo.name\" class=\"pdapp-img-thumbnail mw-100 w-100 rounded-2 pe-0 me-0\">\n                        <\/div>\n                        <a class=\"pdapp-author position-absolute overflow-hidden\" :href=\"photo.user.url\" target=\"_blank\">{{ photo.user.name }}<\/a>\n                    <\/div>\n\n                    <div class=\"col-12 my-1\"><button type=\"button\" class=\"btn btn-sm btn-light m-auto\" @click=\"getPhotos()\">{{ langs.load_more }}<\/button><\/div>\n                <\/div>\n                <div class=\"w-100 text-danger text-center\" v-else>{{ langs.options.photo_not_found }}<\/div>\n                <div class=\"pdapp-loading-photos w-100 position-absolute\" v-if=\"listMenus.photo.loading == 1\">\n                    <div class=\"pdapp-loading-mask\">\n                        <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/template>\n    <\/div>\n<\/template>            <\/template>\n\n            <template v-if=\"activeMenu == 'team'\">\n                <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n        <div class=\"pdapp-team-group border-bottom w-100 d-flex flex-column align-items-center rounded-0\" v-if=\"showSettingOption(true, ['font', 'size', 'color'], 'team')\">\n            <input type=\"text\" class=\"form-control mb-2\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateMember\">\n\n            <div class=\"pdapp-team-fonts btn-group position-relative w-100 gap-2 mb-2 flex-wrap\" v-if=\"showSettingOption(true, ['font', 'size', 'color'], 'team')\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-team-type-font\" :data-tooltip=\"langs.options.change_font\" v-if=\"showSettingOption(true, ['font'], 'team')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'font' ? 'btn-primary active' : 'btn-light'\" @click.stop.prevent=\"dropdownText('font')\">\n                    <span>{{ menuOptions.details[menuOptions.childID].fontFamily }}<\/span>\n                    <i class=\"material-icons material-symbols-outlined\">arrow_drop_down<\/i>\n                    <span class=\"dropdown-arrow-bot\"><\/span>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-team-type-size\" :data-tooltip=\"langs.options.font_size\" v-if=\"showSettingOption(true, ['size'], 'team')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'size' ? 'btn-primary active' : 'btn-light'\" @click.stop.prevent=\"dropdownText('size')\">\n                    <span>{{ menuOptions.details[menuOptions.childID].fontSize }}<\/span>\n                    <i class=\"material-icons material-symbols-outlined\">arrow_drop_down<\/i>\n                    <span class=\"dropdown-arrow-bot\"><\/span>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-team-type-color\" :data-tooltip=\"langs.options.text_color\" v-if=\"showSettingOption(true, ['color'], 'team')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'btn-primary active' : 'btn-light'\" @click.stop.prevent=\"dropdownText('color')\">\n                    <i class=\"material-icons material-symbols-outlined\">format_color_text<\/i>\n                    <span class=\"dropdown-arrow-bot\"><\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n            \n        <div class=\"pdapp-team-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(true, ['space', 'outline', 'transparent'], 'team')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-team-type-spacing\" v-if=\"showSettingOption(true, ['space'], 'team')\" :data-tooltip=\"langs.options.spacing\" @click.stop.prevent=\"dropdownText('spacing')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_letter_spacing<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-team-type-outline\" v-if=\"showSettingOption(true, ['outline'], 'team')\" :data-tooltip=\"langs.options.outline\" @click.stop.prevent=\"dropdownText('outline')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'outline' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">type_specimen<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-team-type-transparency\" v-if=\"showSettingOption(true, ['transparent'], 'team')\" :data-tooltip=\"langs.options.transparency\" @click.stop.prevent=\"dropdownText('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n        <\/div>\n\n        <div class=\"pdapp-team-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(true, ['style'], 'team')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['bold'], 'team')\" :data-tooltip=\"langs.options.bold\" @click=\"formatText('bold')\" :class=\"menuOptions.details[menuOptions.childID].fontWeight == '700' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_bold<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['italic'], 'team')\" :data-tooltip=\"langs.options.italic\" @click=\"formatText('italic')\" :class=\"menuOptions.details[menuOptions.childID].fontStyle == 'italic' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_italic<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['underline'], 'team')\" :data-tooltip=\"langs.options.underline\" @click=\"formatText('underline')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'underline' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_underlined<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['strike'], 'team')\" :data-tooltip=\"langs.options.line_through\" @click=\"formatText('through')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'line-through' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_strikethrough<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['uppercase'], 'team')\" :data-tooltip=\"langs.options.uppercase\" @click=\"formatText('uppercase')\" :class=\"menuOptions.details[menuOptions.childID].textTransform == 'uppercase' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">match_case<\/i>\n            <\/button>\n        <\/div>\n\n        <div class=\"pdapp-team-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2 rounded-0\" v-if=\"showSettingOption(true, ['move'], 'team')\">\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_top\" @click=\"alignText('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_right\" @click=\"alignText('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignText('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_left\" @click=\"alignText('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignText('centerAll')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignText('middle')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_center\" @click=\"alignText('center')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                <\/button>\n            <\/div>\n\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_top\" @click=\"moveText('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_bot\" @click=\"moveText('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_left\" @click=\"moveText('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_right\" @click=\"moveText('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n        \n        <button type=\"button\" class=\"btn btn-danger tooltip-top rounded-2 w-100 mb-2\" :data-tooltip=\"menuOptions.details[menuOptions.childID].team == 'name' ? langs.options.delete_name : langs.options.delete_number\" @click=\"deleteTeam()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border\" :class=\"'pdapp-team-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"closeTextDropdown()\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box p-2 d-flex flex-column gap-1\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'font'\">\n            <div class=\"input-group input-group-merge\">\n                <span class=\"input-group-text bg-white ps-2 pe-1\">\n                    <i class=\"material-icons material-symbols-outlined\">search<\/i>\n                <\/span>\n                <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"fontLibrary.find != '' ? 'border-end-0' : ''\" v-model=\"fontLibrary.find\" @input=\"fontLibrary.page.paged = 1\">\n                <button type=\"button\" class=\"input-group-text bg-white  text-danger ps-1 pe-2\" v-if=\"fontLibrary.find != ''\" @click=\"fontLibrary.find = ''\">\n                    <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                <\/button>\n            <\/div>\n            <div class=\"pdapp-font-categories d-flex gap-2 mw-100 overflow-x-auto overflow-y-hidden pb-1\">\n                <button type=\"button\" class=\"btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap text-capitalize\" :class=\"fontLibrary.category == '' ? 'btn-primary' : 'btn-light'\" @click=\"fontLibrary.category = '', fontLibrary.page.paged = 1\">{{ langs.options.all }}<\/button>\n                <button type=\"button\" class=\"btn btn-sm p-1 pt-0 pb-0 pdapp-h25 text-nowrap text-capitalize\" v-for=\"(category, idx) in listFonts.category\" :class=\"fontLibrary.category == category ? 'btn-primary' : 'btn-light'\" :key=\"idx\" @click=\"fontLibrary.category = category, fontLibrary.page.paged = 1\">{{ getCateFont(category) }}<\/button>\n            <\/div>\n            <div class=\"pdapp-font-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden\">\n                <button type=\"button\" class=\"pdapp-h30 btn d-flex p-1 rounded-2\" v-for=\"(font, idx) in listFonts.fonts\" @click=\"changeFont(font)\" :class=\"font.title == menuOptions.details[menuOptions.childID].fontFamily ? 'btn-primary' : 'btn-light'\">\n                    <img :src=\"pluginUrl +'assets\/images\/fonts\/'+ font.title.replaceAll(' ', '') +'.png'\" :alt=\"font.title\" class=\"mh-100 mw-100\">\n                <\/button>\n                <button type=\"button\" v-if=\"listFonts.fonts.length < listFonts.total\" class=\"btn btn-light rounded-2 w-100\" @click=\"fontLibrary.page.paged++\">{{ langs.load_more }}<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box p-2 d-flex flex-column gap-1\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'size'\">\n            <input type=\"number\" min=\"6\" step=\"1\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].fontSize\" @change=\"updateTextSize('')\">\n            <div class=\"pdapp-size-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden\">\n                <button type=\"button\" v-for=\"(size, idx) in fontsize\" :key=\"idx\" class=\"btn rounded-2\" :class=\"menuOptions.details[menuOptions.childID].fontSize == size ? 'btn-primary' : 'btn-light'\" @click=\"updateTextSize(size)\">{{size}}<\/button>\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box p-2 d-flex flex-column gap-1 overflow-y-auto overflow-x-hidden\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color'\">\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.fill_style }}<\/h5>\n            <div class=\"pdapp-team-fillstyle d-flex w-100 gap-2\">\n                <button type=\"button\" @click=\"gradientText('normal')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'normal' ? 'border-1 border-primary rounded-pill' : 'border'\" :data-tooltip=\"langs.options.solid_color\" :style=\"'background:'+ menuOptions.details[menuOptions.childID].color\"><\/button>\n                <button type=\"button\" @click=\"gradientText('hor')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'hor' ? 'border-1 border-primary rounded-pill' : 'border'\" :data-tooltip=\"langs.options.hor_gradient\" :style=\"'background:linear-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\"><\/button>\n                <button type=\"button\" @click=\"gradientText('ver')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'ver' ? 'border-1 border-primary rounded-pill' : 'border'\" :data-tooltip=\"langs.options.ver_gradient\" :style=\"'background:linear-gradient(to right, '+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\"><\/button>\n                <button type=\"button\" @click=\"gradientText('radial')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'radial' ? 'border-1 border-primary rounded-pill' : 'border'\" :data-tooltip=\"langs.options.rad_gradient\" :style=\"'background:radial-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\"><\/button>\n            <\/div>\n            <h5 class=\"header-title fs-6 m-0 pt-1\">{{ langs.options.color_picker }}<\/h5>\n            <input type=\"text\" id=\"pdapp-text-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].color\" @input=\"updateTextStyle('color')\">\n        <\/div>\n\n        <div class=\"d-flex p-2 gap-1 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing'\">\n            <input type=\"range\" step=\"1\" min=\"-10\" max=\"50\" class=\"form-range\" :style=\"'background-size:'+((parseInt(menuOptions.details[menuOptions.childID].letterSpacing)+10)*100\/60)+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @input=\"updateTextStyle('letterSpacing')\">\n            <input type=\"number\" min=\"-10\" max=\"50\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @change=\"updateTextStyle('letterSpacing')\">\n        <\/div>\n\n        <div class=\"d-flex p-2 gap-2 flex-column w-100 pdapp-hide-palette\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'outline'\">\n            <input type=\"text\" id=\"pdapp-outline-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].stroke\" @input=\"updateTextStyle('outline')\">\n            <div class=\"d-flex gap-2 align-items-center w-100\">\n                <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].strokeWidth+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @input=\"updateTextStyle('outline')\">\n                <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @change=\"updateTextStyle('outline')\">\n            <\/div>\n        <\/div>\n        \n        <div class=\"d-flex p-2 gap-1 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updateTextStyle('transparency')\">\n            <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updateTextStyle('transparency')\">\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden\">\n        <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.your_team }}<\/h5>\n        <div class=\"pdapp-team-add d-flex flex-column w-100 gap-1 mb-2\">\n            <button v-if=\"menuOptions.values.name != undefined && menuOptions.values.name == ''\" type=\"button\" class=\"btn btn-primary pdapp-waves-effect w-100\" @click=\"addYourName()\">\n                <i class=\"material-icons material-symbols-outlined\">add<\/i>\n                {{ langs.options.add_your_name }}\n            <\/button>\n            <button v-if=\"menuOptions.values.number != undefined\" type=\"button\" class=\"btn btn-primary pdapp-waves-effect w-100\" @click=\"addYourNumber()\">\n                <i class=\"material-icons material-symbols-outlined\">add<\/i>\n                {{ langs.options.add_your_number }}\n            <\/button>\n        <\/div>\n\n        <template v-if=\"menuOptions.values.teams.length\">\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.team_members }}<\/h5>\n            <div class=\"table-responsive mb-1 p-0 w-100\">\n                <table class=\"table table-sm mb-0 min-w-100\">\n                    <thead class=\"table-light\">\n                        <tr>\n                            <th width=\"30px\" class=\"align-middle text-center\">#<\/th>\n                            <th v-if=\"menuOptions.values.teams[0].name != undefined && menuOptions.values.name != ''\">{{ langs.options.name }}<\/th>\n                            <th v-if=\"menuOptions.values.teams[0].number != undefined && 0 < menuOptions.values.number.length\">{{ langs.options.number }}<\/th>\n                        <\/tr>\n                    <\/thead>\n                    <tbody>\n                        <tr v-for=\"(team, tid) in menuOptions.values.teams\" :key=\"tid\">\n                            <td class=\"align-middle text-center\">{{ tid+1 }}<\/td>\n                            <td v-if=\"team.name != undefined && menuOptions.values.name != ''\">\n                                <input type=\"text\" class=\"form-control form-control-sm\" v-model=\"team.name\" :placeholder=\"langs.options.name_desc\" @input=\"updateTeam()\" @click=\"activeMember(tid)\">\n                            <\/td>\n                            <td v-if=\"team.number != undefined && 0 < menuOptions.values.number.length\">\n                                <input type=\"text\" class=\"form-control form-control-sm\" v-model=\"team.number\" :placeholder=\"langs.options.member_desc\" @input=\"updateTeam()\" @click=\"activeMember(tid)\">\n                            <\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n\n            <button type=\"button\" class=\"btn btn-light pdapp-waves-effect w-100\" @click=\"confirmMembers('edit')\">\n                <i class=\"material-icons material-symbols-outlined\">manage_accounts<\/i>\n                {{ langs.options.edit_your_members }}\n            <\/button>\n        <\/template>\n    <\/div>\n<\/template>            <\/template>\n\n            <template v-if=\"activeMenu == 'qrcode'\">\n                <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n        <select class=\"form-select w-100\" v-model=\"menuOptions.details[menuOptions.childID].qrtype\" @change=\"changeQrcodeType\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['type'], 'qrcode')\">\n            <option v-for=\"(value, key) in qrcodeTypes\" :value=\"value.key\" :key=\"key\">{{ value.text }}<\/option>\n        <\/select>\n        \n        <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'text', ['edit'], 'qrcode')\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" :placeholder=\"settings.general.qrcode.text\">\n        \n        <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'url', ['edit'], 'qrcode')\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"https:\/\/www.yourdomain.com\">\n        \n        <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'phone', ['edit'], 'qrcode')\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"+1234567890\">\n        \n        <div class=\"d-flex flex-column gap-2 w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'sms', ['edit'], 'qrcode')\">\n            <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"+1234567890\">\n            <textarea id=\"form-control-message-qrcode\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].message\" @input=\"updateQrcode()\" :placeholder=\"langs.options.qrcode_message\"><\/textarea>\n        <\/div>\n\n        <div class=\"d-flex flex-column gap-2 w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'mail', ['edit'], 'qrcode')\">\n            <input id=\"form-control-edit-qrcode\" type=\"email\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"example@example.com\">\n            <input id=\"form-control-object-qrcode\" type=\"text\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].subject\" @input=\"updateQrcode()\" :placeholder=\"langs.options.qrcode_subject\">\n            <textarea id=\"form-control-message-qrcode\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].message\" @input=\"updateQrcode()\" :placeholder=\"langs.options.qrcode_message\"><\/textarea>\n        <\/div>\n\n        <div class=\"pdapp-hide-palette w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'qrcode')\">\n            <input type=\"text\" id=\"pdapp-qrcode-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].color\" @change=\"updateQrcode()\">\n        <\/div>\n        \n        <div class=\"pdapp-qrcode-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['level', 'background', 'transparent'], 'qrcode')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-qrcode-type-ecl\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['level'], 'qrcode')\" :data-tooltip=\"langs.options.ecl\" @click.stop.prevent=\"dropdownQrcode('ecl')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'ecl' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">construction<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n                \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-qrcode-type-background\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['background'], 'qrcode')\" :data-tooltip=\"langs.options.background\" @click.stop.prevent=\"dropdownQrcode('background')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'background' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_color_fill<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-qrcode-type-transparency\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'qrcode')\" :data-tooltip=\"langs.options.transparency\" @click.stop.prevent=\"dropdownPhoto('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-qrcode-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(true, ['copy', 'lock'], 'qrcode')\">\n            <button type=\"button\" class=\"btn btn-light tooltip-top rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'qrcode')\" :data-tooltip=\"langs.options.copy_qrcode\" @click=\"copyQrcode()\">\n                <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n            <\/button>\n                \n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'qrcode')\" :data-tooltip=\"langs.options.lock\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-qrcode-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2 rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'qrcode')\">\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_top\" @click=\"alignPhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_right\" @click=\"alignPhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignPhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_left\" @click=\"alignPhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignPhoto('centerAll')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignPhoto('middle')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                <\/button>\n                    \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center\" @click=\"alignPhoto('center')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_inside\" @click=\"fitPhotoInside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_outside\" @click=\"fitPhotoOutside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                <\/button>\n            <\/div>\n\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_top\" @click=\"movePhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_bot\" @click=\"movePhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_left\" @click=\"movePhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_right\" @click=\"movePhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <button type=\"button\" class=\"btn btn-danger tooltip-top rounded-2 w-100 mb-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'qrcode')\" :data-tooltip=\"langs.options.delete_qrcode\" @click=\"deleteQrcode()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border\" :class=\"'pdapp-qrcode-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"closePhotoDropdown()\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box d-flex gap-1 w-100 p-2 btn-group w-100 flex-wrap\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'ecl'\">\n            <button type=\"button\" class=\"btn rounded-2\":class=\"menuOptions.details[menuOptions.childID].ecl == 'L' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'L')\">L<\/button>\n            <button type=\"button\" class=\"btn rounded-2\":class=\"menuOptions.details[menuOptions.childID].ecl == 'M' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'M')\">M<\/button>\n            <button type=\"button\" class=\"btn rounded-2\":class=\"menuOptions.details[menuOptions.childID].ecl == 'H' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'H')\">H<\/button>\n            <button type=\"button\" class=\"btn rounded-2\":class=\"menuOptions.details[menuOptions.childID].ecl == 'Q' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'Q')\">Q<\/button>\n        <\/div>\n\n        <div id=\"pdapp-qrcode-bg-box\" class=\"pdapp-dropdown-box d-flex flex-column gap-1 w-100 p-2 overflow-y-auto overflow-x-hidden\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'background'\">\n            <div class=\"form-check form-switch gap-1 d-flex align-items-center\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"pdapp-qrcode-background\" :checked=\"menuOptions.details[menuOptions.childID].background == 'transparent' ? true : false\" @change=\"changeUpdateQrcode('background', '')\">\n                <label class=\"form-check-label ms-1\" for=\"pdapp-qrcode-background\">{{ langs.options.transparent_background }}<\/label>\n            <\/div>\n            <div class=\"pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-n1\" v-if=\"menuOptions.details[menuOptions.childID].background != 'transparent'\">\n                <input type=\"text\" id=\"pdapp-qrcode-bg-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].background\" @change=\"changeUpdateQrcode('background', '')\">\n            <\/div>\n            <div class=\"d-flex gap-2 align-items-center w-100\">\n                <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].padding+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].padding\" @input=\"updateQrcode()\">\n                <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].padding\" @input=\"updateQrcode()\">\n            <\/div>\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-1 align-items-center w-100 p-2\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n            <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n        <\/div>\n    <\/div>\n<\/template>\n<template v-else>\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden\">\n        <button type=\"button\" class=\"btn btn-primary pdapp-waves-effect w-100\" @click=\"addQrcode()\">\n            <i class=\"material-icons material-symbols-outlined\">add<\/i>\n            {{ langs.options.add_qrcode }}\n        <\/button>\n    <\/div>\n<\/template>            <\/template>\n\n            <template v-if=\"activeMenu == 'barcode'\">\n                <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n        <input type=\"text\" class=\"form-control\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['edit'], 'barcode')\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"checkBarcode()\" :placeholder=\"langs.options.barcode_text\">\n        \n        <select class=\"form-select\" v-model=\"menuOptions.details[menuOptions.childID].format\" @change=\"checkBarcode()\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['type'], 'barcode')\">\n            <optgroup v-for=\"(barcode, key) in barcodeTypes\" :key=\"key\" :label=\"barcode.type.toUpperCase()\">\n                <option v-for=\"(code, nkey) in barcode.values\" :key=\"nkey\" :value=\"code\">{{ code.toUpperCase() }}<\/option>\n            <\/optgroup>\n        <\/select>\n        \n        <input type=\"text\" class=\"form-control\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].format == 'EAN13-lastchar', ['edit'], 'barcode')\" v-model=\"menuOptions.details[menuOptions.childID].lastChar\" @change=\"checkBarcode()\" :placeholder=\"langs.options.barcode_lastChar\">\n        \n        <div class=\"pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-n1\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'barcode')\">\n            <input type=\"text\" id=\"pdapp-barcode-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].lineColor\" @change=\"updateBarcode()\">\n        <\/div>\n\n        <div class=\"pdapp-barcode-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['width', 'height', 'background', 'transparent'], 'barcode')\">\n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-barcode-type-width\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['width'], 'barcode')\" :data-tooltip=\"langs.options.barcode_width\" @click.stop.prevent=\"dropdownBarcode('width')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'width' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_letter_spacing<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-barcode-type-height\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['height'], 'barcode')\" :data-tooltip=\"langs.options.barcode_height\" @click.stop.prevent=\"dropdownBarcode('height')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'height' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">height<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-barcode-type-background\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['background'], 'barcode')\" :data-tooltip=\"langs.options.background\" @click.stop.prevent=\"dropdownBarcode('background')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'background' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">format_color_fill<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n            \n            <button type=\"button\" class=\"btn tooltip-top rounded-2 pdapp-barcode-type-transparency\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'barcode')\" :data-tooltip=\"langs.options.transparency\" @click.stop.prevent=\"dropdownPhoto('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n                <span class=\"dropdown-arrow-bot\"><\/span>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-barcode-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0\" v-if=\"showSettingOption(true, ['copy', 'lock', 'text'], 'barcode')\">\n            <button type=\"button\" class=\"btn btn-light tooltip-top rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'barcode')\" :data-tooltip=\"langs.options.copy_barcode\" @click=\"copyBarcode()\">\n                <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n            <\/button>\n                \n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'barcode')\" :data-tooltip=\"langs.options.lock\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n            <\/button>\n\n            <button type=\"button\" class=\"btn tooltip-top rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['text'], 'barcode')\" :data-tooltip=\"langs.options.show_text\" @click=\"changeUpdateBarcode('displayValue', !menuOptions.details[menuOptions.childID].displayValue)\" :class=\"menuOptions.details[menuOptions.childID].displayValue ? 'btn-light' : 'btn-primary'\">\n                <i class=\"material-icons material-symbols-outlined\">font_download_off<\/i>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-barcode-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2 rounded-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'barcode')\">\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_top\" @click=\"alignPhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_right\" @click=\"alignPhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignPhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_left\" @click=\"alignPhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignPhoto('centerAll')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                <\/button>\n\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignPhoto('middle')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                <\/button>\n                    \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.align_center\" @click=\"alignPhoto('center')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_inside\" @click=\"fitPhotoInside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_outside\" @click=\"fitPhotoOutside()\">\n                    <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                <\/button>\n            <\/div>\n            <div class=\"w-100 btn-group gap-2 flex-wrap\">\n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_top\" @click=\"movePhoto('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_bot\" @click=\"movePhoto('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_left\" @click=\"movePhoto('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.move_right\" @click=\"movePhoto('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <button type=\"button\" class=\"btn btn-danger tooltip-top rounded-2 w-100 mb-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'barcode')\" :data-tooltip=\"langs.options.delete_barcode\" @click=\"deleteQrcode()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border\" :class=\"'pdapp-barcode-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"closePhotoDropdown()\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'width'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"10\" class=\"form-range\" :style=\"'background-size:'+(menuOptions.details[menuOptions.childID].width*10)+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].width\" @change=\"updateBarcode()\">\n            <input type=\"number\" min=\"0\" max=\"10\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].width\" @change=\"updateBarcode()\">\n        <\/div>\n\n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'height'\">\n            <input type=\"range\" step=\"1\" min=\"1\" :max=\"menuOptions.details[menuOptions.childID].height*1.5\" class=\"form-range\" :style=\"'background-size:'+(menuOptions.details[menuOptions.childID].height*100\/(menuOptions.details[menuOptions.childID].height*1.5))+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].height\" @change=\"updateBarcode()\">\n            <input type=\"number\" min=\"1\" :max=\"menuOptions.details[menuOptions.childID].height*1.5\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].height\" @change=\"updateBarcode()\">\n        <\/div>\n\n        <div id=\"pdapp-barcode-bg-box\" class=\"pdapp-dropdown-box gap-1 p-2 d-flex flex-column overflow-y-auto overflow-x-hidden\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'background'\">\n            <div class=\"form-check form-switch gap-1 d-flex align-items-center\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"pdapp-barcode-background\" :checked=\"menuOptions.details[menuOptions.childID].background == 'transparent' ? true : false\" @change=\"changeUpdateBarcode('background', '')\">\n                <label class=\"form-check-label ms-1\" for=\"pdapp-barcode-background\">{{ langs.options.transparent_background }}<\/label>\n            <\/div>\n            <div class=\"pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-n1\" v-if=\"menuOptions.details[menuOptions.childID].background != 'transparent'\">\n                <input type=\"text\" id=\"pdapp-barcode-bg-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].background\" @change=\"changeUpdateBarcode('background', '')\">\n            <\/div>\n            <div class=\"d-flex gap-2 align-items-center w-100\">\n                <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].margin+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].margin\" @change=\"updateBarcode()\">\n                <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].margin\" @input=\"updateBarcode()\">\n            <\/div>\n        <\/div>\n        \n        <div class=\"pdapp-dropdown-box d-flex gap-1 p-2 align-items-center w-100\" v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n            <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n            <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n        <\/div>\n    <\/div>\n<\/template>\n<template v-else>\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start gap-1 px-1 overflow-y-auto overflow-x-hidden\">\n        <button type=\"button\" class=\"btn btn-primary pdapp-waves-effect w-100\" @click=\"addBarcode()\">\n            <i class=\"material-icons material-symbols-outlined\">add<\/i>\n            {{ langs.options.add_barcode }}\n        <\/button>\n    <\/div>\n<\/template>\n<div class=\"pdapp-barcode-svg d-none\">\n    <svg id=\"pdapp-barcode-box\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"><\/svg>\n<\/div>            <\/template>\n\n            <template v-if=\"activeMenu == 'layer'\">\n                <div class=\"pdapp-menu-options-content d-flex flex-column align-items-start px-1 overflow-y-auto overflow-x-hidden w-100\">\n    <div class=\"pdapp-layer-list d-flex flex-column gap-2 w-100\" v-if=\"0 < menuOptions.values.length\">\n        <button type=\"button\" class=\"pdapp-layer-item btn btn-light rounded-2 justify-content-between p-0 gap-1 pdapp-h50 w-100\" v-for=\"(layer, lid) in menuOptions.values\" :key=\"lid\" @click.stop.prevent=\"setActiveLayer(layer)\">\n            <span class=\"pdapp-layer-text px-1 text-hidden\" v-if=\"layer.type == 'text'\" :title=\"layer.type\">{{ layer.value }}<\/span>\n            <div class=\"pdapp-layer-thumbnail w-100\" v-else :title=\"layer.type\">\n                <img :src=\"layer.value\" :alt=\"layer.type\" class=\"pdapp-img pdapp-h50 px-1 rounded-2\">\n            <\/div>\n            <div class=\"pdapp-layer-groupbtn d-flex flex-column gap-1 justify-content-center align-items-center me-1\" v-if=\"1 < menuOptions.values.length\">\n                <span class=\"btn btn-sm btn-secondary pdapp-w20 pdapp-h20\" @click.stop.prevent=\"moveLayer(layer.id, 'up')\"><i class=\"material-icons material-symbols-outlined\">expand_less<\/i><\/span>\n                <span class=\"btn btn-sm btn-secondary pdapp-w20 pdapp-h20\" @click.stop.prevent=\"moveLayer(layer.id, 'down')\"><i class=\"material-icons material-symbols-outlined\">expand_more<\/i><\/span>\n            <\/div>\n        <\/button>\n    <\/div>\n    <div class=\"w-100 text-danger text-center\" v-else>{{ langs.options.layer_empty }}<\/div>\n<\/div>            <\/template>\n        <\/template>\n    <\/div>\n<\/template>\n<template v-else>\n    <template v-if=\"activeMenu != null || (activeMenu == null && groupItem.show)\">\n    <div :class=\"activeMenu != null && menuOptions.childID == null && groupItem.show == false ? 'modal fade show d-block' : 'pdapp-menu-mobile-options position-absolute card m-0'\">\n        <div :class=\"activeMenu != null && menuOptions.childID == null && groupItem.show == false ? 'modal-dialog modal-dialog-scrollable modal-full-width' : 'pdapp-menu-mobile-detail w-100 h-100'\">\n            <div :class=\"activeMenu != null && menuOptions.childID == null && groupItem.show == false ? 'modal-content' : 'pdapp-menu-mobile-content w-100 h-100'\">\n                <div :class=\"activeMenu != null && menuOptions.childID == null && groupItem.show == false ? 'modal-header pt-1 pb-1' : 'pdapp-menu-mobile-header d-flex gap-1 justify-content-between align-items-center'\">\n                    <template v-if=\"activeMenu != null && menuOptions.childID == null && groupItem.show == false\">\n    <h4 class=\"modal-title\">{{ listMenus[activeMenu].title }}<\/h4>\n    <button type=\"button\" class=\"btn p-0 m-0 pdapp-w30 pdapp-h30 text-danger ps-1\" @click=\"activeMenu = null\">\n        <i class=\"material-icons material-symbols-outlined fs-3\">close<\/i>\n    <\/button>\n<\/template>\n<template v-else>\n    <template v-if=\"groupItem.show\">\n        <button type=\"button\" class=\"btn btn-danger btn-sm waves-effect waves-light w-100 p-1 rounded-pill\" @click=\"closeGroup()\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">close<\/i>\n        <\/button>\n    <\/template>\n    <template v-else>\n        <button type=\"button\" class=\"btn btn-danger btn-sm waves-effect waves-light w-100 p-1 rounded-pill\" @click=\"closeMenuOption()\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">close<\/i>\n        <\/button>\n    <\/template>\n<\/template>                <\/div>\n                <div :class=\"activeMenu != null && menuOptions.childID == null && groupItem.show == false ? 'modal-body ' + 'pdapp-menu-options-'+activeMenu : 'pdapp-menu-mobile-body position-relative w-100 p-1 pe-0'\">\n                    <template v-if=\"groupItem.show\">\n                        <div class=\"pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1\" @click.stop.prevent=\"\">\n    <button type=\"button\" v-if=\"settings.layout.photo.crop || settings.layout.photo.copy || settings.layout.photo.lock || (settings.layout.photo.flip && menuOptions.details[menuOptions.childID].editColor == false)\" class=\"list-group-item pdapp-group-type-color list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownGroup('color')\" :class=\"groupItem.active == 'color' ? 'active' : ''\">\n        <i class=\"material-icons material-symbols-outlined\">palette<\/i>\n        <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.edit_color }}<\/span>\n        <span class=\"dropdown-arrow-right\"><\/span>\n    <\/button>\n\n    <button type=\"button\" class=\"list-group-item pdapp-group-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownGroup('align')\" :class=\"groupItem.active == 'align' ? 'active' : ''\">\n        <i class=\"material-icons material-symbols-outlined\">format_align_justify<\/i>\n        <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.align_group }}<\/span>\n        <span class=\"dropdown-arrow-right\"><\/span>\n    <\/button>\n\n    <button type=\"button\" class=\"list-group-item pdapp-group-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownGroup('move')\" :class=\"groupItem.active == 'move' ? 'active' : ''\">\n        <i class=\"material-icons material-symbols-outlined\">open_with<\/i>\n        <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.move_group }}<\/span>\n        <span class=\"dropdown-arrow-right\"><\/span>\n    <\/button>\n\n    <button type=\"button\" class=\"list-group-item pdapp-group-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownGroup('more')\" :class=\"groupItem.active == 'more' ? 'active' : ''\">\n        <i class=\"material-icons material-symbols-outlined\">more_horiz<\/i>\n        <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.more }}<\/span>\n        <span class=\"dropdown-arrow-right\"><\/span>\n    <\/button>\n\n    <button type=\"button\" class=\"list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0\" @click=\"deleteGroup()\">\n        <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n        <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.delete_group }}<\/span>\n    <\/button>\n<\/div>\n\n<div class=\"pdapp-menu-options position-absolute card m-0 shadow-lg border\" :class=\"'pdapp-group-dropdown-'+ groupItem.active\" v-if=\"groupItem.active != undefined && groupItem.active != ''\" @click.stop.prevent=\"\">\n    <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"dropdownGroup('')\">\n        <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n        <i class=\"material-icons material-symbols-outlined close-menu-ver\">south<\/i>\n    <\/button>\n\n    <div class=\"pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden\">\n        <template v-if=\"groupItem.active == 'color'\">\n            <div class=\"p-2 d-flex flex-column gap-1 w-100 overflow-x-hidden overflow-y-auto\">\n                <div class=\"pdapp-hide-palette d-flex flex-column gap-2\">\n                    <input v-for=\"(color, cid) in groupItem.colors\" :key=\"cid\" type=\"text\" class=\"pdapp-edit-color\" class=\"form-control\" :data-color=\"color\" v-model=\"color\" style=\"display: none;\">\n                <\/div>\n            <\/div>\n        <\/template>\n\n        <template v-if=\"groupItem.active == 'align'\">\n            <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignGroup('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignGroup('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignGroup('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignGroup('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignGroup('centerAll')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                <\/button>\n                \n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignGroup('middle')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignGroup('center')\">\n                    <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                <\/button>\n            <\/div>\n        <\/template>\n\n        <template v-if=\"groupItem.active == 'move'\">\n            <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveGroup('top')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveGroup('bot')\">\n                    <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveGroup('left')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveGroup('right')\">\n                    <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                <\/button>\n            <\/div>\n        <\/template>\n\n        <template v-if=\"groupItem.active == 'more'\">\n            <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                <button type=\"button\" class=\"btn btn-light rounded-2 pdapp-btn-copy\" @click=\"copyGroup()\">\n                    <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn rounded-2\" @click=\"setGroup()\" :class=\"groupItem.isGroup ? 'btn-primary' : 'btn-light'\">\n                    <i class=\"material-icons material-symbols-outlined\" v-if=\"groupItem.isGroup\">ad_group_off<\/i>\n                    <i class=\"material-icons material-symbols-outlined\" v-else>ad_group<\/i>\n                <\/button>\n            <\/div>\n        <\/template>\n    <\/div>\n<\/div>                    <\/template>\n\n                    <template v-else>\n                        <template v-if=\"activeMenu == 'product'\">\n                            <div class=\"input-group input-group-merge\" v-if=\"listProducts.prods.length || listMenus.product.options.values.search != ''\">\n    <span class=\"input-group-text bg-white ps-2 pe-1\">\n        <i class=\"material-icons material-symbols-outlined\">search<\/i>\n    <\/span>\n    <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.product.options.values.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.product.options.values.search\" :placeholder=\"langs.options.search_products\">\n    <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.product.options.values.search != ''\" @click=\"listMenus.product.options.values.search = ''\">\n        <i class=\"material-icons material-symbols-outlined\">close<\/i>\n    <\/button>\n<\/div>\n\n<template v-if=\"listMenus.product.options.values.loadProd == true\">\n    <div class=\"pdapp-h120 w-100 position-relative mt-1\">\n        <div class=\"pdapp-loading-mask\">\n            <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n        <\/div>\n    <\/div>\n<\/template>\n<template v-else>\n    <div class=\"pdapp-products row g-2 mt-0\" v-if=\"listProducts.prods.length\">\n        <div class=\"col-6 col-sm-4 col-md-3 my-1\" v-for=\"(prod, tid) in listProducts.prods\" :key=\"tid\">\n            <button type=\"button\" class=\"pdapp-product m-0 btn gap-0 p-0 w-100 h-100 position-relative btn-light flex-column\" :class=\"prod.wid == productID ? 'border-primary' : ''\" @click=\"changeProductDesign(prod)\">\n                <span class=\"d-flex flex-auto h-100\">\n                    <img :src=\"showImg(prod.thumb, prod.id, 'product')\" :alt=\"prod.title\" class=\"card-img-top img-fluid m-auto\">\n                <\/span>\n                <span class=\"pdapp-caption card-title text-primary p-1 m-0 fs-6\">{{ prod.title }}<\/span>\n                <div class=\"pdapp-loading-mask\" v-if=\"listMenus.product.options.values.loadProd == prod.id\">\n                    <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                <\/div>\n            <\/button>\n        <\/div>\n        <div class=\"col-12\" v-if=\"listProducts.prods.length < listProducts.total\">\n            <button type=\"button\" class=\"btn btn-light position-relative w-100\" @click=\"listMenus.product.options.values.page.paged++\">{{ langs.load_more }}<\/button>\n        <\/div>\n    <\/div>\n<\/template>                        <\/template>\n\n                        <template v-if=\"activeMenu == 'template'\">\n                            <ol class=\"breadcrumb mb-1\" v-if=\"1 < breadcrumbs.length\">\n    <li class=\"breadcrumb-item\" v-for=\"(bread, bid) in breadcrumbs\" :class=\"bread.to !== '' ? 'active' : ''\" :key=\"bid\">\n        <template v-if=\"bread.to === ''\">{{ bread.title }}<\/template>\n        <a v-else href=\"javascript: void(0);\" @click=\"openFolder(bread.to)\">{{ bread.title }}<\/a>\n    <\/li>\n<\/ol>\n<template v-if=\"listMenus.template.options.values.loadFolder\">\n    <div class=\"pdapp-folders w-100\">\n        <div class=\"row g-2\">\n            <div class=\"col-6 col-sm-4 col-md-2 placeholder-glow\">\n                <div class=\"pdapp-folder pdapp-h80 w-100 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n            <\/div>\n            <div class=\"col-6 col-sm-4 col-md-2 placeholder-glow\">\n                <div class=\"pdapp-folder pdapp-h80 w-100 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n<template v-else>\n    <div class=\"pdapp-folders w-100 mb-2\" v-if=\"tempFolders[listMenus.template.options.values.activeFolder] != undefined && tempFolders[listMenus.template.options.values.activeFolder].length\">\n        <div class=\"row g-2\">\n            <div class=\"col-6 col-sm-4 col-md-3 col-lg-2 my-1\" v-for=\"(folder, fid) in tempFolders[listMenus.template.options.values.activeFolder]\" :key=\"fid\">\n                <div class=\"card card-inverse text-white position-relative m-0 pdapp-folder rounded-2\" @click=\"openFolder(folder.id)\">\n                    <img :src=\"showImg(folder.thumb, folder.id, 'tempf')\" :alt=\"getTitle(folder.title)\" class=\"card-img img-fluid rounded-2\">\n                    <div class=\"card-img-overlay p-1 d-flex flex-column gap-0 text-center justify-content-center align-items-center\">\n                        <h5 class=\"card-title fs-4 fw-bold m-0 text-hidden\">{{ getTitle(folder.title) }}<\/h5>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n\n<div class=\"input-group input-group-merge\" v-if=\"listTemplates.temps.length || listMenus.template.options.values.search != ''\">\n    <span class=\"input-group-text bg-white ps-2 pe-1\">\n        <i class=\"material-icons material-symbols-outlined\">search<\/i>\n    <\/span>\n    <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.template.options.values.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.template.options.values.search\" :placeholder=\"langs.options.search_templates\">\n    <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.template.options.values.search != ''\" @click=\"listMenus.template.options.values.search = ''\">\n        <i class=\"material-icons material-symbols-outlined\">close<\/i>\n    <\/button>\n<\/div>\n\n<template v-if=\"listMenus.template.options.values.loadTemp == true\">\n    <div class=\"pdapp-h120 w-100 position-relative mt-1\">\n        <div class=\"pdapp-loading-mask\">\n            <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n        <\/div>\n    <\/div>\n<\/template>\n<template v-else>\n    <div class=\"pdapp-templates row g-2 mt-0\" v-if=\"listTemplates.temps.length\">\n        <div class=\"col-6 col-sm-4 col-md-3 my-1\" v-for=\"(temp, tid) in listTemplates.temps\" :key=\"tid\">\n            <button type=\"button\" class=\"pdapp-template m-0 btn gap-0 p-0 w-100 h-100 position-relative btn-light flex-column\" @click=\"addTemplate(temp)\">\n                <span class=\"d-flex flex-auto h-100\">\n                    <img :src=\"showImg(temp.thumb, temp.id, 'temp')\" :alt=\"getTitle(temp.title)\" class=\"card-img-top img-fluid m-auto\">\n                <\/span>\n                <span class=\"pdapp-caption card-title text-primary p-1 m-0 fs-6\">{{ getTitle(temp.title) }}<\/span>\n                <div class=\"pdapp-loading-mask\" v-if=\"listMenus.template.options.values.loadTemp == temp.id\">\n                    <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                <\/div>\n            <\/button>\n        <\/div>\n        <div class=\"col-12\" v-if=\"listTemplates.temps.length < listTemplates.total\">\n            <button type=\"button\" class=\"btn btn-light position-relative w-100\" @click=\"listMenus.template.options.values.page.paged++\">{{ langs.load_more }}<\/button>\n        <\/div>\n    <\/div>\n    <div class=\"w-100 text-danger text-center\" v-if=\"tempFolders[listMenus.template.options.values.activeFolder] == undefined && listTemplates.temps.length == 0\">{{ langs.options.template_not_found }}<\/div>\n<\/template>                        <\/template>\n\n                        <template v-if=\"activeMenu == 'text'\">\n                            <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1\" @click.stop.prevent=\"\">\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['edit'], 'text')\" class=\"list-group-item pdapp-text-type-edit list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('edit')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'edit' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">edit_note<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.edit_text }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['font'], 'text')\" class=\"list-group-item pdapp-text-type-font list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('font')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'font' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">font_download<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.change_font }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['size'], 'text')\" class=\"list-group-item pdapp-text-type-size list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('size')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'size' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_size<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.font_size }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['color'], 'text')\" class=\"list-group-item pdapp-text-type-color list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('color')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_color_text<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.color }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['arc'], 'text')\" class=\"list-group-item pdapp-text-type-arc list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('arc')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'arc' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">line_curve<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.arc_radius }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['space'], 'text')\" class=\"list-group-item pdapp-text-type-spacing list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('spacing')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_letter_spacing<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.spacing }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['outline'], 'text')\" class=\"list-group-item pdapp-text-type-outline list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('outline')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'outline' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">type_specimen<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.outline }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['transparent'], 'text')\" class=\"list-group-item pdapp-text-type-transparency list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.transparency }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['style'], 'text')\" class=\"list-group-item pdapp-text-type-format list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('format')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'format' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_shapes<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.format }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['move'], 'text')\" class=\"list-group-item pdapp-text-type-align list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('align')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'align' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_align_justify<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.align_text }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['move'], 'text')\" class=\"list-group-item pdapp-text-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('move')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'move' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">open_with<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.move_text }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['copy', 'lock', 'flip'], 'text')\" class=\"list-group-item pdapp-text-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('more')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'more' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">more_horiz<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.more }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" class=\"list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['delete'], 'text')\" @click=\"deleteText()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.delete }}<\/span>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options position-absolute card m-0 shadow-lg border\" :class=\"'pdapp-text-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"dropdownText('')\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">south<\/i>\n        <\/button>\n\n        <div class=\"pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden\">\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'edit'\">\n                <div class=\"p-1 w-100\">\n                    <input type=\"text\" class=\"form-control\" :value=\"menuOptions.details[menuOptions.childID].text\" @input=\"menuOptions.details[menuOptions.childID].text = $event.target.value; updateText()\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'font'\">\n                <div class=\"p-1 d-flex flex-column gap-2 w-100\">\n                    <div class=\"input-group input-group-merge\">\n                        <span class=\"input-group-text bg-white ps-2 pe-1\">\n                            <i class=\"material-icons material-symbols-outlined\">search<\/i>\n                        <\/span>\n                        <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"fontLibrary.find != '' ? 'border-end-0' : ''\" :value=\"fontLibrary.find\" @input=\"fontLibrary.find = $event.target.value; fontLibrary.page.paged = 1\">\n                        <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"fontLibrary.find != ''\" @click=\"fontLibrary.find = ''\">\n                            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                        <\/button>\n                    <\/div>\n                    <div class=\"pdapp-font-categories d-flex gap-2 mw-100 overflow-x-auto overflow-y-hidden flex-shrink-0 pb-1\">\n                        <button type=\"button\" class=\"btn btn-sm p-1 py-0 text-nowrap rounded-2 text-capitalize\" :class=\"fontLibrary.category == '' ? 'btn-primary' : 'btn-light'\" @click=\"fontLibrary.category = '', fontLibrary.page.paged = 1\">{{ langs.options.all }}<\/button>\n                        <button type=\"button\" class=\"btn btn-sm p-1 py-0 text-nowrap rounded-2 text-capitalize\" v-for=\"(category, idx) in listFonts.category\" :class=\"fontLibrary.category == category ? 'btn-primary' : 'btn-light'\" :key=\"idx\" @click=\"fontLibrary.category = category, fontLibrary.page.paged = 1\">{{ getCateFont(category) }}<\/button>\n                    <\/div>\n                    <div class=\"pdapp-font-list btn-group flex-wrap gap-2 w-100 overflow-x-hidden overflow-y-auto\">\n                        <button type=\"button\" class=\"btn btn-sm pdapp-h30 rounded-2\" v-for=\"(font, idx) in listFonts.fonts\" @click=\"changeFont(font)\" :class=\"font.title == menuOptions.details[menuOptions.childID].fontFamily ? 'btn-primary' : 'btn-light'\">\n                            <img :src=\"pluginUrl +'assets\/images\/fonts\/'+ font.title.replaceAll(' ', '') +'.png'\" :alt=\"font.title\" class=\"mh-100 mw-100\">\n                        <\/button>\n                        <button type=\"button\" v-if=\"listFonts.fonts.length < listFonts.total\" class=\"btn btn-light rounded-2 w-100\" @click=\"fontLibrary.page.paged++\">{{ langs.load_more }}<\/button>\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'size'\">\n                <div class=\"p-1 d-flex flex-column gap-2 w-100\">\n                    <input type=\"number\" min=\"6\" step=\"1\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].fontSize\" @change=\"updateTextSize('')\">\n                    <div class=\"pdapp-size-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden\">\n                        <button type=\"button\" v-for=\"(size, idx) in fontsize\" :key=\"idx\" class=\"btn btn-sm rounded-2\" :class=\"menuOptions.details[menuOptions.childID].fontSize == size ? 'btn-primary' : 'btn-light'\" @click=\"updateTextSize(size)\">{{size}}<\/button>\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color'\">\n                <div class=\"p-2 d-flex flex-column gap-1 w-100 overflow-x-hidden overflow-y-auto pdapp-hide-palette\">\n                    <h5 class=\"header-title pdapp-text-fillstyle-title fs-6 m-0 p-0\">{{ langs.options.fill_style }}<\/h5>\n                    <div class=\"pdapp-text-fillstyle d-flex w-100 gap-2\">\n                        <button type=\"button\" @click=\"gradientText('normal')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'normal' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.solid_color\" :style=\"'background:'+ menuOptions.details[menuOptions.childID].color\">\n                            <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'normal'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                        <\/button>\n                        <button type=\"button\" @click=\"gradientText('hor')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'hor' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.hor_gradient\" :style=\"'background:linear-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\">\n                            <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'hor'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                        <\/button>\n                        <button type=\"button\" @click=\"gradientText('ver')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'ver' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.ver_gradient\" :style=\"'background:linear-gradient(to right, '+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\">\n                            <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'ver'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                        <\/button>\n                        <button type=\"button\" @click=\"gradientText('radial')\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"menuOptions.details[menuOptions.childID].colorType == 'radial' ? 'rounded-pill' : 'rounded-2'\" :data-tooltip=\"langs.options.rad_gradient\" :style=\"'background:radial-gradient('+ menuOptions.details[menuOptions.childID].color+ ', transparent)'\">\n                            <span v-if=\"menuOptions.details[menuOptions.childID].colorType == 'radial'\" class=\"d-block w-100 h-100\" :class=\"getIconColor(menuOptions.details[menuOptions.childID].color)\"><\/span>\n                        <\/button>\n                    <\/div>\n                    <template v-if=\"textColor.colors.length\">\n                        <h5 class=\"header-title fs-6 m-0 pt-1 d-flex justify-content-between align-items-center\">{{ langs.options.text_color }}<\/h5>\n                        <div class=\"pdapp-text-color d-flex w-100 gap-2 flex-wrap\">\n                            <button type=\"button\" v-for=\"(color, k) in textColor.colors\" :key=\"k\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"color.hex == menuOptions.details[menuOptions.childID].color ? 'rounded-pill '+ getIconColor(color.hex) : 'rounded-2'\" :data-tooltip=\"color.title\" @click=\"pdappAddonUpdateColor('text', color.hex)\" :style=\"'background:'+ color.hex\"><\/button>\n                        <\/div>\n                    <\/template>\n                    <template v-else>\n                        <h5 class=\"header-title fs-6 m-0 pt-1 d-flex justify-content-between align-items-center\">{{ langs.options.color_picker }} <span class=\"d-flex align-items-center\">#<input id=\"pdapp-text-colorinput\" style=\"width: 100px;\" type=\"text\" class=\"form-control form-control-sm\" :value=\"hexColor(menuOptions.details[menuOptions.childID].color)\" @input=\"updateAttrColor($event.target.value, 'text')\"><\/span><\/h5>\n                        <input type=\"text\" id=\"pdapp-text-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].color\" @input=\"updateTextStyle('color')\">\n                    <\/template>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'arc'\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"1000\" class=\"form-range\" :style=\"'background-size:'+ (menuOptions.details[menuOptions.childID].radius*100\/1000) +'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].radius\" @input=\"updateTextStyle('radius')\">\n                    <input type=\"number\" min=\"0\" max=\"1000\" class=\"form-control form-control-sm pdapp-w60 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].radius\" @change=\"updateTextStyle('radius')\">\n                <\/div>\n            <\/template>\n            \n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing'\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"-10\" max=\"50\" class=\"form-range\" :style=\"'background-size:'+((parseInt(menuOptions.details[menuOptions.childID].letterSpacing)+10)*100\/60)+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @input=\"updateTextStyle('letterSpacing')\">\n                    <input type=\"number\" min=\"-10\" max=\"50\" class=\"form-control form-control-sm pdapp-w60 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @change=\"updateTextStyle('letterSpacing')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'outline'\">\n                <div class=\"p-1 d-flex gap-2 flex-column pdapp-hide-palette w-100\">\n                    <input type=\"text\" id=\"pdapp-outline-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].stroke\" @input=\"updateTextStyle('outline')\">\n                    <div class=\"d-flex align-items-center\">#<input id=\"pdapp-outline-colorinput\" style=\"width: 100px;\" type=\"text\" class=\"form-control form-control-sm\" :value=\"hexColor(menuOptions.details[menuOptions.childID].stroke)\" @input=\"updateAttrColor($event.target.value, 'outline')\"><\/div>\n                    <div class=\"d-flex gap-2 align-items-center\">\n                        <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].strokeWidth+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @input=\"updateTextStyle('outline')\">\n                        <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w60 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @change=\"updateTextStyle('outline')\">\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updateTextStyle('transparency')\">\n                    <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w60 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updateTextStyle('transparency')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'format'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.bold\" @click=\"formatText('bold')\" :class=\"menuOptions.details[menuOptions.childID].fontWeight == '700' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_bold<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.italic\" @click=\"formatText('italic')\" :class=\"menuOptions.details[menuOptions.childID].fontStyle == 'italic' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_italic<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.underline\" @click=\"formatText('underline')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'underline' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_underlined<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.strike\" @click=\"formatText('through')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'line-through' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_strikethrough<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.uppercase\" @click=\"formatText('uppercase')\" :class=\"menuOptions.details[menuOptions.childID].textTransform == 'uppercase' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">match_case<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'align'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('centerAll')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('middle')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('center')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'move'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'more'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['copy'], 'text')\" @click=\"copyText()\">\n                        <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'text')\" @click=\"lockText()\" :class=\"menuOptions.details[menuOptions.childID].textLock ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].textLock\">lock<\/i>\n                        <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['flip'], 'text')\" @click=\"flipText()\" :class=\"menuOptions.details[menuOptions.childID].textFlip ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">multiple_stop<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.style }}<\/h5>\n    <div class=\"pdapp-text-group row g-2 mb-2 mt-0 align-items-center\">\n        <div class=\"col-12 col-sm-6 my-1\">\n            <button type=\"button\" class=\"btn btn-light pdapp-h40 w-100\" @click=\"addNewText(settings.general.text.heading)\" v-if=\"settings.general.text.heading != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/heading.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.heading.text\">\n            <\/button>\n        <\/div>\n\n        <div class=\"col-12 col-sm-6 my-1\">\n            <button type=\"button\" class=\"btn btn-light pdapp-h30 w-100\" @click=\"addNewText(settings.general.text.body)\" v-if=\"settings.general.text.body != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/body.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.body.text\">\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <h5 class=\"header-title fs-6 m-0 p-0\" v-if=\"showSettingOption(true, ['arc'], 'text')\">{{ langs.options.text_arc }}<\/h5>\n    <div class=\"pdapp-text-group row g-2 mb-2 mt-0 align-items-center\" v-if=\"showSettingOption(true, ['arc'], 'text')\">\n        <div class=\"col-12 col-sm-6 my-1\">\n            <button type=\"button\" class=\"btn btn-light pdapp-h50 w-100\" @click=\"addNewText(settings.general.text.arc)\" v-if=\"settings.general.text.arc != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/arc.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.arc.text\">\n            <\/button>\n        <\/div>\n\n        <div class=\"col-12 col-sm-6 my-1\">\n            <button type=\"button\" class=\"btn btn-light pdapp-h50 w-100\" @click=\"addNewText(settings.general.text.reversearc)\" v-if=\"settings.general.text.reversearc != undefined\">\n                <img :src=\"pluginUrl +'assets\/images\/texts\/reversearc.png'\" class=\"mh-100 mw-100\" :alt=\"settings.general.text.reversearc.text\">\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <template v-if=\"listTextTemp.temps.length || listMenus.text.search != '' || loadTextTemp\">\n        <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.text_templates }}<\/h5>\n        <div class=\"pdapp-text-group row g-2 mt-0 align-items-center pdapp-text-templates\">\n            <template v-if=\"loadTextTemp\">\n                <div class=\"pdapp-h120 col-12 w-100 position-relative\">\n                    <div class=\"pdapp-loading-mask\">\n                        <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                    <\/div>\n                <\/div>\n            <\/template>\n            <template v-else>\n                <div class=\"input-group col-12 input-group-merge mt-1\" v-if=\"listTextTemp.temps.length || listMenus.text.search != ''\" :class=\"responsiveLayout.width < 1200 ? 'input-group-sm' : ''\">\n                    <span class=\"input-group-text bg-white\" :class=\"1200 <= responsiveLayout.width ? 'ps-2 pe-1' : 'ps-1 pe-0'\">\n                        <i class=\"material-icons material-symbols-outlined\">search<\/i>\n                    <\/span>\n                    <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.text.search != '' ? 'border-end-0' : ''\" :value=\"listMenus.text.search\" @input=\"listMenus.text.search = $event.target.value; listMenus.text.page.paged = 1\" :placeholder=\"langs.options.search_templates\">\n                    <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.text.search != ''\" @click=\"listMenus.text.search = ''\">\n                        <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                    <\/button>\n                <\/div>\n                \n                <div class=\"col-12 col-sm-6 col-md-4\" v-for=\"(text, tid) in listTextTemp.temps\" :key=\"tid\">\n                    <button type=\"button\" class=\"btn btn-light pdapp-h40 w-100\" @click=\"addTextTemplate(text)\">\n                        <img :src=\"pluginUrl +'assets\/images\/texts\/'+ text.thumb\" class=\"mh-100 mw-100\" :alt=\"text.text\">\n                    <\/button>\n                <\/div>\n                <div class=\"col-12\" v-if=\"listTextTemp.temps.length < listTextTemp.total\">\n                    <button type=\"button\" class=\"btn btn-light w-100\" @click=\"listMenus.text.page.paged++\">{{ langs.load_more }}<\/button>\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/template>\n<\/template>                        <\/template>\n\n                        <template v-if=\"activeMenu == 'artwork'\">\n                            <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1\" @click.stop.prevent=\"\">\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'art')\" class=\"list-group-item pdapp-photo-type-transparency list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.transparency }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'art')\" class=\"list-group-item pdapp-photo-type-color list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('color')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">palette<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.edit_color }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'art')\" class=\"list-group-item pdapp-photo-type-align list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('align')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'align' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_align_justify<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.align_photo }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'art')\" class=\"list-group-item pdapp-photo-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('move')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'move' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">open_with<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.move_photo }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['copy', 'lock', 'flip'], 'art')\" class=\"list-group-item pdapp-photo-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('more')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'more' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">more_horiz<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.more }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" class=\"list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'art')\" @click=\"deleteArtwork()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.delete }}<\/span>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options position-absolute card m-0 shadow-lg border\" :class=\"'pdapp-photo-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"dropdownPhoto('')\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">south<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden\">\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n                    <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color' && menuOptions.details[menuOptions.childID].colors.length\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100 pdapp-hide-palette flex-wrap\">\n                    <div class=\"pdapp-color-item-box w-100\" v-for=\"(color, cid) in menuOptions.details[menuOptions.childID].colors\" :key=\"cid\">\n                        <template v-if=\"artColor.colors.length\">\n                            <h5 class=\"header-title fs-6 m-0 pt-1 d-flex justify-content-between align-items-center\">{{ langs.options.color }} {{ cid + 1 }}<\/h5>\n                            <div class=\"pdapp-text-color d-flex w-100 gap-2 flex-wrap\">\n                                <button type=\"button\" v-for=\"(col, k) in artColor.colors\" :key=\"k\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"col.hex == color ? 'rounded-pill '+ getIconColor(col.hex) : 'rounded-2'\" :data-tooltip=\"col.title\" @click=\"pdappAddonUpdateColor('art', col.hex, color, cid)\" :style=\"'background:'+ col.hex\"><\/button>\n                            <\/div>\n                        <\/template>\n                        <template v-else>\n                            <input :id=\"'pdapp-edit-colorpicker-'+ cid\" type=\"text\" class=\"pdapp-edit-color\" class=\"form-control\" :data-color=\"color\" v-model=\"color\" style=\"display: none;\">\n                            <div class=\"d-flex align-items-center mt-2\">#<input :id=\"'pdapp-edit-colorinput-'+ cid\" style=\"width: 100px;\" type=\"text\" class=\"form-control form-control-sm\" :value=\"hexColor(color)\" @input=\"updateAttrColor($event.target.value, 'edit', cid)\"><\/div>\n                        <\/template>\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'align'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('centerAll')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('middle')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('center')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2 btn-light\" @click=\"fitPhotoInside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn rounded-2 btn-light\" @click=\"fitPhotoOutside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'move'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'more'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'art')\" @click=\"copyArtwork()\">\n                        <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n                    <\/button>\n                        \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'art')\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                        <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['flip'], 'art')\" @click=\"flipPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoFlip ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">multiple_stop<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <ol class=\"breadcrumb mb-1\" v-if=\"1 < breadcrumbs.length\">\n        <li class=\"breadcrumb-item\" v-for=\"(bread, bid) in breadcrumbs\" :class=\"bread.to !== '' ? 'active' : ''\" :key=\"bid\">\n            <template v-if=\"bread.to === ''\">{{ bread.title }}<\/template>\n            <a v-else href=\"javascript: void(0);\" @click=\"openFolder(bread.to)\">{{ bread.title }}<\/a>\n        <\/li>\n    <\/ol>\n    <template v-if=\"listMenus.artwork.options.values.loadFolder\">\n        <div class=\"pdapp-folders w-100 mt-n1 mb-1\">\n            <div class=\"row g-2 mt-0\">\n                <div class=\"col-6 col-sm-4 col-md-2 placeholder-glow my-1\">\n                    <div class=\"pdapp-folder pdapp-h80 w-100 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n                <\/div>\n                <div class=\"col-6 col-sm-4 col-md-2 placeholder-glow my-1\">\n                    <div class=\"pdapp-folder pdapp-h80 w-100 placeholder bg-secondary rounded-2 position-relative\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-folders w-100 mt-n1 mb-1\" :class=\"listArtworks.arts.length || listMenus.artwork.options.values.search != '' ? 'border-bottom pb-2 mb-2' : ''\" v-if=\"artFolders[listMenus.artwork.options.values.activeFolder] != undefined && artFolders[listMenus.artwork.options.values.activeFolder].length\">\n            <div class=\"row g-2 mt-0\">\n                <div class=\"col-6 col-sm-4 col-md-3 col-lg-2 my-1\" v-for=\"(folder, fid) in artFolders[listMenus.artwork.options.values.activeFolder]\" :key=\"fid\">\n                    <div class=\"card card-inverse text-white position-relative m-0 pdapp-folder rounded-2\" @click=\"openFolder(folder.id)\">\n                        <img :src=\"showImg(folder.thumb, folder.id, 'artf')\" :alt=\"getTitle(folder.title)\" class=\"card-img img-fluid rounded-2\">\n                        <div class=\"card-img-overlay p-1 d-flex flex-column gap-0 text-center justify-content-center align-items-center\">\n                            <h5 class=\"card-title fs-4 fw-bold m-0 text-hidden\">{{ getTitle(folder.title) }}<\/h5>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n\n    <div class=\"input-group input-group-merge\" v-if=\"listArtworks.arts.length || listMenus.artwork.options.values.search != ''\">\n        <span class=\"input-group-text bg-white ps-2 pe-1\">\n            <i class=\"material-icons material-symbols-outlined\">search<\/i>\n        <\/span>\n        <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.artwork.options.values.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.artwork.options.values.search\" :placeholder=\"langs.options.search_artworks\" @input=\"listMenus.artwork.options.values.page.paged = 1\">\n        <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.artwork.options.values.search != ''\" @click=\"listMenus.artwork.options.values.search = ''\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n    <\/div>\n\n    <template v-if=\"listMenus.artwork.options.values.loadArt == true\">\n        <div class=\"pdapp-h120 w-100 position-relative\">\n            <div class=\"pdapp-loading-mask\">\n                <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-artworks row g-2 mt-0\" v-if=\"listArtworks.arts.length\">\n            <div class=\"col-6 col-sm-4 col-md-3 my-1\" v-for=\"(art, aid) in listArtworks.arts\" :key=\"aid\">\n                <button type=\"button\" class=\"pdapp-artwork flex-column m-0 btn waves-effect waves-light gap-0 p-0 w-100 position-relative btn-light\" @click=\"addArtwork(art)\">\n                    <span class=\"d-flex flex-auto h-100\">\n                        <img :src=\"showImg(art.thumb, art.id, 'art')\" :alt=\"getTitle(art.title)\" class=\"card-img-top img-fluid m-auto\">\n                    <\/span>\n                    <span class=\"pdapp-caption card-title text-primary p-1 m-0 fs-6\">{{ getTitle(art.title) }}<\/span>\n                    <div class=\"pdapp-loading-mask pdapp-loading-page\" v-if=\"listMenus.artwork.options.values.loadArt == art.id\">\n                        <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                    <\/div>\n                <\/button>\n            <\/div>\n            <div class=\"col-12\" v-if=\"listArtworks.arts.length < listArtworks.total\">\n                <button type=\"button\" class=\"btn btn-light position-relative w-100\" @click=\"listMenus.artwork.options.values.page.paged++\">{{ langs.load_more }}<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"w-100 text-danger text-center\" v-if=\"artFolders[listMenus.artwork.options.values.activeFolder] == undefined && listArtworks.arts.length == 0\">{{ langs.options.artwork_not_found }}<\/div>\n    <\/template>\n<\/template>                        <\/template>\n\n                        <template v-if=\"activeMenu == 'photo'\">\n                            <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <input id=\"pdapp-upload-a-photo-replace\" type=\"file\" class=\"d-none\" :disabled=\"uploading\" @change=\"changePhotoReplace\" accept=\".jpg,.jpeg,.png\">\n    <div class=\"pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1\" @click.stop.prevent=\"\">\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['shape'], 'photo')\" class=\"list-group-item pdapp-photo-type-shape list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('shape')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'shape' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">interests<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.shape_photo }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['filter'], 'photo')\" class=\"list-group-item pdapp-photo-type-filter list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('filter')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'filter' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">photo_filter<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.filter_photo }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'photo')\" class=\"list-group-item pdapp-photo-type-transparency list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.transparency }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'photo')\" class=\"list-group-item pdapp-photo-type-color list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('color')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">palette<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.edit_color }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['crop'], 'photo')\" class=\"list-group-item pdapp-photo-type-crop list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('crop', '')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'crop' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">crop<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.crop_photo }}<\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"!menuOptions.details[menuOptions.childID].photoLock && (menuOptions.details[menuOptions.childID].clickUpload || menuOptions.details[menuOptions.childID].clickPhoto)\" class=\"list-group-item pdapp-photo-type-replace list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"showReplacePhoto\">\n            <i class=\"material-icons material-symbols-outlined\">reset_image<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.replace_photo }}<\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'photo')\" class=\"list-group-item pdapp-photo-type-align list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('align')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'align' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_align_justify<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.align_photo }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'photo')\" class=\"list-group-item pdapp-photo-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('move')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'move' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">open_with<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.move_photo }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['copy', 'lock', 'flip'], 'photo')\" class=\"list-group-item pdapp-photo-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownPhoto('more')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'more' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">more_horiz<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.more }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" class=\"list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'photo')\" @click=\"deletePhoto()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.delete }}<\/span>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options position-absolute card m-0 shadow-lg border\" :class=\"'pdapp-photo-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"dropdownPhoto('')\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">south<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden\">\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'shape'\">\n                <div class=\"p-1 d-flex gap-2 w-100 flex-wrap justify-content-center\">\n                    <div class=\"pdapp-shape-item d-flex align-items-center justify-content-center position-relative\" :class=\"menuOptions.details[menuOptions.childID].photoShape == '' ? 'active' : ''\" @click=\"addShape('')\">\n                        <div class=\"pdapp-shape\" :title=\"langs.options.normal\">\n                            <img :src=\"pluginUrl +'assets\/images\/shapes\/normal.png'\" :alt=\"langs.options.normal\" class=\"pdapp-img bg-light\">\n                        <\/div>\n                        <span class=\"pdapp-shape-name\">{{ langs.options.normal }}<\/span>\n                    <\/div>\n                    <div class=\"pdapp-shape-item d-flex align-items-center justify-content-center position-relative\" v-for=\"(shape, sid) in shapePhoto\" :key=\"sid\" @click=\"addShape(shape)\" :class=\"menuOptions.details[menuOptions.childID].photoShape == shape.slug ? 'btn-primary' : 'btn-light'\">\n                        <div class=\"pdapp-shape\" :title=\"shape.title\">\n                            <img :src=\"pluginUrl +'assets\/images\/shapes\/'+ shape.thumb\" :alt=\"shape.title\" class=\"pdapp-img bg-light\">\n                        <\/div>\n                        <span class=\"pdapp-shape-name\">{{ shape.title }}<\/span>\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'filter'\">\n                <div class=\"pdapp-filter-list d-flex flex-column w-100 p-0 m-0 overflow-x-hidden overflow-y-auto\">\n                    <div class=\"pdapp-filter-item d-flex flex-column align-items-center justify-content-center position-relative\" :class=\"menuOptions.details[menuOptions.childID].photoFilter == '' ? 'active' : ''\" @click=\"addFilter('')\">\n                        <div class=\"pdapp-filter position-relative d-flex w-100\" :title=\"langs.options.normal\">\n                            <img :src=\"menuOptions.details[menuOptions.childID].photo\" :alt=\"langs.options.normal\" class=\"pdapp-img\">\n                        <\/div>\n                        <span class=\"pdapp-filter-name\">{{ langs.options.normal }}<\/span>\n                    <\/div>\n                    <div class=\"pdapp-filter-item d-flex flex-column align-items-center justify-content-center position-relative\" v-for=\"(filter, fid) in filterPhoto\" :key=\"fid\" @click=\"addFilter(filter)\" :class=\"menuOptions.details[menuOptions.childID].photoFilter == filter.slug ? 'btn-primary' : 'btn-light'\">\n                        <div class=\"pdapp-filter position-relative d-flex w-100\" :class=\"'pdapp-filter-'+ filter.slug\" :title=\"filter.title\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"position: absolute; width: 0px; height: 0px;\"><filter :id=\"'filter-svg-'+ fid\" filterUnits=\"objectBoundingBox\" primitiveUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feColorMatrix type=\"matrix\" :values=\"filter.value\"><\/feColorMatrix><\/filter><\/svg>\n                            <img :src=\"menuOptions.details[menuOptions.childID].photo\" :alt=\"filter.title\" class=\"pdapp-img bg-light\" :style=\"'filter: url(#filter-svg-'+ fid +')'\">\n                        <\/div>\n                        <span class=\"pdapp-filter-name\">{{ filter.title }}<\/span>\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n                    <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color' && menuOptions.details[menuOptions.childID].colors.length\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100 pdapp-hide-palette flex-wrap\">\n                    <div class=\"pdapp-color-item-box w-100\" v-for=\"(color, cid) in menuOptions.details[menuOptions.childID].colors\" :key=\"cid\">\n                        <input type=\"text\" class=\"pdapp-edit-color\" class=\"form-control\" :data-color=\"color\" v-model=\"color\" style=\"display: none;\">\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'align'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('centerAll')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('middle')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('center')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2 btn-light\" @click=\"fitPhotoInside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn rounded-2 btn-light\" @click=\"fitPhotoOutside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'move'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'more'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'photo')\" @click=\"copyPhoto()\">\n                        <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n                    <\/button>\n                        \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'photo')\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                        <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['flip'], 'photo')\" @click=\"flipPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoFlip ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">multiple_stop<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <template v-if=\"settings.layout.photo.allowUpload\">\n        <div class=\"pdapp-upload-box w-100\">\n            <label for=\"pdapp-upload-a-photo\" class=\"btn btn-primary waves-effect m-0 w-100\" :class=\"uploading ? 'disabled' : ''\">\n                <span v-if=\"uploading\">\n                    <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"><\/span>\n                    {{ langs.options.uploading }}\n                <\/span>\n                <span v-else>\n                    <i class=\"material-icons material-symbols-outlined me-1\">cloud_upload<\/i>\n                    {{ langs.options.upload_a_photo }}\n                <\/span>\n            <\/label>\n            <input id=\"pdapp-upload-a-photo\" type=\"file\" class=\"d-none\" :disabled=\"uploading\" @change=\"changePhoto\" :accept=\"settings.general.upload != 'undefined' ? '.'+ settings.general.upload.type.join(',.') : '.jpg'\">\n        <\/div>\n        <small class=\"pdapp-confirm-upload-desc\" v-if=\"confirmUpload.allow && confirmUpload.warning != ''\">{{ confirmUpload.warning }}<\/small>\n    <\/template>\n    <template v-if=\"settings.layout.photo.allowLibrary && settings.general.photo.key != ''\">\n        <div class=\"pdapp-text-space d-flex w-100 justify-content-center align-items-center position-relative pdapp-h25 p-0 m-0\">\n            <span class=\"sub-header m-0 text-uppercase\">{{ langs.options.or }}<\/span>\n        <\/div>\n\n        <div class=\"input-group input-group-merge mb-1\">\n            <span class=\"input-group-text bg-white ps-2 pe-1\">\n                <i class=\"material-icons material-symbols-outlined\">search<\/i>\n            <\/span>\n            <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.photo.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.photo.search\" :placeholder=\"langs.options.search_free_photos_on +' '+settings.general.photo.library\" @change=\"findPhotos()\">\n            <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.photo.search != ''\" @click=\"listMenus.photo.search = '', findPhotos()\">\n                <i class=\"material-icons material-symbols-outlined\">close<\/i>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-photo-libraries position-relative overflow-x-hidden\">\n            <div class=\"pdapp-photo-list row\" v-if=\"0 < menuOptions.values.length\">\n                <div class=\"col-12 col-sm-6 col-md-4 mt-1\" v-for=\"(photo, pid) in menuOptions.values\" :key=\"pid\">\n                    <div class=\"pdapp-photo-item d-flex align-items-center justify-content-between rounded-2 position-relative gap-1\" @click=\"addPhoto(photo)\">\n                        <div class=\"pdapp-thumbnail bg-light rounded-2 d-flex position-relative w-100\" :title=\"photo.name\">\n                            <img :src=\"photo.thumb\" :alt=\"photo.name\" class=\"pdapp-img-thumbnail mw-100 w-100 rounded-2 pe-0 me-0\">\n                        <\/div>\n                        <a class=\"pdapp-author position-absolute overflow-hidden\" :href=\"photo.user.url\" target=\"_blank\">{{ photo.user.name }}<\/a>\n                    <\/div>\n                <\/div>\n                <div class=\"col-12 my-1\"><button type=\"button\" class=\"btn btn-sm btn-light m-auto\" @click=\"getPhotos()\">{{ langs.load_more }}<\/button><\/div>\n            <\/div>\n            <div class=\"w-100 text-danger text-center\" v-else>{{ langs.options.photo_not_found }}<\/div>\n            <div class=\"pdapp-loading-photos w-100 position-absolute\" v-if=\"listMenus.photo.loading == 1\">\n                <div class=\"pdapp-loading-mask\">\n                    <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n<\/template>                        <\/template>\n\n                        <template v-if=\"activeMenu == 'team'\">\n                            <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"list-group-item pdapp-team-type-edit list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('edit')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'edit' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">edit_note<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.edit_team }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['font'], 'team')\" class=\"list-group-item pdapp-team-type-font list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('font')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'font' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">font_download<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.change_font }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['size'], 'team')\" class=\"list-group-item pdapp-team-type-size list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('size')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'size' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_size<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.font_size }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['color'], 'team')\" class=\"list-group-item pdapp-team-type-color list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('color')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'color' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_color_text<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.color }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['space'], 'team')\" class=\"list-group-item pdapp-team-type-spacing list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('spacing')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_letter_spacing<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.spacing }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['outline'], 'team')\" class=\"list-group-item pdapp-team-type-outline list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('outline')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'outline' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">type_specimen<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.outline }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['transparent'], 'team')\" class=\"list-group-item pdapp-team-type-transparency list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.transparency }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['style'], 'team')\" class=\"list-group-item pdapp-team-type-format list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('format')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'format' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_shapes<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.format }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n        \n        <button type=\"button\" v-if=\"showSettingOption(true, ['move'], 'team')\" class=\"list-group-item pdapp-team-type-align list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('align')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'align' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_align_justify<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.align_text }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['move'], 'team')\" class=\"list-group-item pdapp-team-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownText('move')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'move' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">open_with<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.move_text }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" class=\"list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0\" @click=\"deleteTeam()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.delete }}<\/span>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options position-absolute card m-0 shadow-lg border\" :class=\"'pdapp-team-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"dropdownText('')\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">south<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden\">\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'edit'\">\n                <div class=\"p-1 w-100\">\n                    <input type=\"text\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateMember\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'font'\">\n                <div class=\"p-1 d-flex flex-column gap-2 w-100\">\n                    <div class=\"input-group input-group-merge\">\n                        <span class=\"input-group-text bg-white ps-2 pe-1\">\n                            <i class=\"material-icons material-symbols-outlined\">search<\/i>\n                        <\/span>\n                        <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"fontLibrary.find != '' ? 'border-end-0' : ''\" v-model=\"fontLibrary.find\" @input=\"fontLibrary.page.paged = 1\">\n                        <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"fontLibrary.find != ''\" @click=\"fontLibrary.find = ''\">\n                            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                        <\/button>\n                    <\/div>\n                    <div class=\"pdapp-font-categories d-flex gap-2 mw-100 overflow-x-auto overflow-y-hidden flex-shrink-0 pb-1\">\n                        <button type=\"button\" class=\"btn btn-sm p-1 py-0 text-nowrap rounded-2 text-capitalize\" :class=\"fontLibrary.category == '' ? 'btn-primary' : 'btn-light'\" @click=\"fontLibrary.category = '', fontLibrary.page.paged = 1\">{{ langs.options.all }}<\/button>\n                        <button type=\"button\" class=\"btn btn-sm p-1 py-0 text-nowrap rounded-2 text-capitalize\" v-for=\"(category, idx) in listFonts.category\" :class=\"fontLibrary.category == category ? 'btn-primary' : 'btn-light'\" :key=\"idx\" @click=\"fontLibrary.category = category, fontLibrary.page.paged = 1\">{{ getCateFont(category) }}<\/button>\n                    <\/div>\n                    <div class=\"pdapp-font-list btn-group flex-wrap gap-2 w-100 overflow-x-hidden overflow-y-auto\">\n                        <button type=\"button\" class=\"btn btn-sm pdapp-h30 rounded-2\" v-for=\"(font, idx) in listFonts.fonts\" @click=\"changeFont(font)\" :class=\"font.title == menuOptions.details[menuOptions.childID].fontFamily ? 'btn-primary' : 'btn-light'\">\n                            <img :src=\"pluginUrl +'assets\/images\/fonts\/'+ font.title.replaceAll(' ', '') +'.png'\" :alt=\"font.title\" class=\"mh-100 mw-100\">\n                        <\/button>\n                        <button type=\"button\" v-if=\"listFonts.fonts.length < listFonts.total\" class=\"btn btn-light rounded-2 w-100\" @click=\"fontLibrary.page.paged++\">{{ langs.load_more }}<\/button>\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'size'\">\n                <div class=\"p-1 d-flex flex-column gap-2 w-100\">\n                    <input type=\"number\" min=\"6\" step=\"1\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].fontSize\" @change=\"updateTextSize('')\">\n                    <div class=\"pdapp-size-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden\">\n                        <button type=\"button\" v-for=\"(size, idx) in fontsize\" :key=\"idx\" class=\"btn rounded-2\" :class=\"menuOptions.details[menuOptions.childID].fontSize == size ? 'btn-primary' : 'btn-light'\" @click=\"updateTextSize(size)\">{{size}}<\/button>\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'color'\">\n                <div class=\"p-2 d-flex flex-column gap-1 w-100 overflow-x-hidden overflow-y-auto pdapp-hide-palette\">\n                    <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.fill_style }}<\/h5>\n                    <input type=\"text\" id=\"pdapp-text-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].color\" @input=\"updateTextStyle('color')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'spacing'\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"-10\" max=\"50\" class=\"form-range\" :style=\"'background-size:'+((parseInt(menuOptions.details[menuOptions.childID].letterSpacing)+10)*100\/60)+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @input=\"updateTextStyle('letterSpacing')\">\n                    <input type=\"number\" min=\"-10\" max=\"50\" class=\"form-control form-control-sm pdapp-w60 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].letterSpacing\" @change=\"updateTextStyle('letterSpacing')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'outline'\">\n                <div class=\"p-1 d-flex gap-2 flex-column pdapp-hide-palette w-100\">\n                    <input type=\"text\" id=\"pdapp-outline-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].stroke\" @input=\"updateTextStyle('outline')\">\n                    <div class=\"d-flex gap-2 align-items-center\">\n                        <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].strokeWidth+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @input=\"updateTextStyle('outline')\">\n                        <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w60 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].strokeWidth\" @change=\"updateTextStyle('outline')\">\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n                <div class=\"p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updateTextStyle('transparency')\">\n                    <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w60 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updateTextStyle('transparency')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'format'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.bold\" @click=\"formatText('bold')\" :class=\"menuOptions.details[menuOptions.childID].fontWeight == '700' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_bold<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.italic\" @click=\"formatText('italic')\" :class=\"menuOptions.details[menuOptions.childID].fontStyle == 'italic' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_italic<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.underline\" @click=\"formatText('underline')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'underline' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_underlined<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.strike\" @click=\"formatText('through')\" :class=\"menuOptions.details[menuOptions.childID].textDecoration == 'line-through' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">format_strikethrough<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"settings.layout.text.uppercase\" @click=\"formatText('uppercase')\" :class=\"menuOptions.details[menuOptions.childID].textTransform == 'uppercase' ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\">match_case<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'align'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('centerAll')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('middle')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignText('center')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'move'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"moveText('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <h5 class=\"header-title fs-6 m-0 p-0 mb-1\">{{ langs.options.your_team }}<\/h5>\n    <div class=\"pdapp-team-add d-flex w-100 gap-1 mb-2\" :class=\"responsiveLayout.showMenu ? 'flex-column' : 'btn-group gap-2'\">\n        <button v-if=\"menuOptions.values.name != undefined && menuOptions.values.name == ''\" type=\"button\" class=\"btn btn-primary pdapp-waves-effect rounded-2\" :class=\"responsiveLayout.showMenu ? 'w-100' : ''\" @click=\"addYourName()\">\n            <i class=\"material-icons material-symbols-outlined\">add<\/i>\n            {{ langs.options.add_your_name }}\n        <\/button>\n        <button v-if=\"menuOptions.values.number != undefined\" type=\"button\" class=\"btn btn-primary pdapp-waves-effect rounded-2\" :class=\"responsiveLayout.showMenu ? 'w-100' : ''\" @click=\"addYourNumber()\">\n            <i class=\"material-icons material-symbols-outlined\">add<\/i>\n            {{ langs.options.add_your_number }}\n        <\/button>\n    <\/div>\n\n    <template v-if=\"menuOptions.values.teams.length\">\n        <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.options.team_members }}<\/h5>\n        <div class=\"table-responsive mb-1 p-0 w-100\">\n            <table class=\"table table-sm mb-0 min-w-100\">\n                <thead class=\"table-light\">\n                    <tr>\n                        <th width=\"30px\" class=\"align-middle text-center\">#<\/th>\n                        <th v-if=\"menuOptions.values.teams[0].name != undefined && menuOptions.values.name != ''\">{{ langs.options.name }}<\/th>\n                        <th v-if=\"menuOptions.values.teams[0].number != undefined && 0 < menuOptions.values.number.length\">{{ langs.options.number }}<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr v-for=\"(team, tid) in menuOptions.values.teams\" :key=\"tid\">\n                        <td class=\"align-middle text-center\">{{ tid+1 }}<\/td>\n                        <td v-if=\"team.name != undefined && menuOptions.values.name != ''\">\n                            <input type=\"text\" class=\"form-control form-control-sm\" v-model=\"team.name\" :placeholder=\"langs.options.name_desc\" @input=\"updateTeam()\" @click=\"activeMember(tid)\">\n                        <\/td>\n                        <td v-if=\"team.number != undefined && 0 < menuOptions.values.number.length\">\n                            <input type=\"text\" class=\"form-control form-control-sm\" v-model=\"team.number\" :placeholder=\"langs.options.member_desc\" @input=\"updateTeam()\" @click=\"activeMember(tid)\">\n                        <\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n\n        <button type=\"button\" class=\"btn btn-light pdapp-waves-effect\" :class=\"responsiveLayout.showMenu ? 'w-100' : 'm-auto'\" @click=\"confirmMembers('edit')\">\n            <i class=\"material-icons material-symbols-outlined\">manage_accounts<\/i>\n            {{ langs.options.edit_your_members }}\n        <\/button>\n    <\/template>\n<\/template>                        <\/template>\n\n                        <template v-if=\"activeMenu == 'qrcode'\">\n                            <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1\" @click.stop.prevent=\"\">\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['edit', 'type', 'color'], 'qrcode')\" class=\"list-group-item pdapp-qrcode-type-edit list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownQrcode('edit')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'edit' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">edit_note<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.edit_qrcode }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['level'], 'qrcode')\" class=\"list-group-item pdapp-qrcode-type-ecl list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownQrcode('ecl')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'ecl' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">construction<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.ecl }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['background'], 'qrcode')\" class=\"list-group-item pdapp-qrcode-type-background list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownQrcode('background')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'background' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_color_fill<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.background }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'qrcode')\" class=\"list-group-item pdapp-qrcode-type-transparency list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownQrcode('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.transparency }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'qrcode')\" class=\"list-group-item pdapp-qrcode-type-align list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownQrcode('align')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'align' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_align_justify<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.align_qrcode }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'qrcode')\" class=\"list-group-item pdapp-qrcode-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownQrcode('move')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'move' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">open_with<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.move_qrcode }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['copy', 'lock'], 'qrcode')\" class=\"list-group-item pdapp-qrcode-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownQrcode('more')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'more' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">more_horiz<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.more }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'qrcode')\" class=\"list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0\" @click=\"deleteQrcode()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.delete_qrcode }}<\/span>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options position-absolute card m-0 shadow-lg border\" :class=\"'pdapp-qrcode-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"dropdownQrcode('')\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">south<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden\">\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'edit'\">\n                <div class=\"pdapp-qrcode-edit p-1 d-flex gap-2 w-100 flex-wrap justify-content-center\">\n                    <select v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['type'], 'qrcode')\" class=\"form-select\" v-model=\"menuOptions.details[menuOptions.childID].qrtype\" @change=\"changeQrcodeType\">\n                        <option v-for=\"(value, key) in qrcodeTypes\" :value=\"value.key\" :key=\"key\">{{ value.text }}<\/option>\n                    <\/select>\n                    \n                    <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'text', ['edit'], 'qrcode')\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" :placeholder=\"settings.general.qrcode.text\">\n                    \n                    <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'url', ['edit'], 'qrcode')\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"https:\/\/www.yourdomain.com\">\n                    \n                    <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'phone', ['edit'], 'qrcode')\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"+1234567890\">\n                    \n                    <div class=\"d-flex flex-column gap-2 w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'sms', ['edit'], 'qrcode')\">\n                        <input id=\"form-control-edit-qrcode\" type=\"text\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"+1234567890\">\n                        <textarea id=\"form-control-message-qrcode\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].message\" @input=\"updateQrcode()\" :placeholder=\"langs.options.qrcode_message\"><\/textarea>\n                    <\/div>\n\n                    <div class=\"d-flex flex-column gap-2 w-100\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].qrtype == 'mail', ['edit'], 'qrcode')\">\n                        <input id=\"form-control-edit-qrcode\" type=\"email\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"updateQrcode()\" placeholder=\"example@example.com\">\n                        <input id=\"form-control-object-qrcode\" type=\"text\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].subject\" @input=\"updateQrcode()\" :placeholder=\"langs.options.qrcode_subject\">\n                        <textarea id=\"form-control-message-qrcode\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].message\" @input=\"updateQrcode()\" :placeholder=\"langs.options.qrcode_message\"><\/textarea>\n                    <\/div>\n\n                    <div class=\"pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-1\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'qrcode')\">\n                        <input type=\"text\" id=\"pdapp-qrcode-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].color\" @change=\"updateQrcode()\">\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'ecl'\">\n                <div class=\"pdapp-qrcode-ecl btn-group gap-1 d-flex flex-wrap w-100 p-1 m-0 overflow-x-hidden overflow-y-auto\">\n                    <button type=\"button\" class=\"btn rounded-2\" :class=\"menuOptions.details[menuOptions.childID].ecl == 'L' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'L')\">L<\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" :class=\"menuOptions.details[menuOptions.childID].ecl == 'M' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'M')\">M<\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" :class=\"menuOptions.details[menuOptions.childID].ecl == 'H' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'H')\">H<\/button>\n                    <button type=\"button\" class=\"btn rounded-2\" :class=\"menuOptions.details[menuOptions.childID].ecl == 'Q' ? 'btn-primary' : 'btn-light'\" @click=\"changeUpdateQrcode('ecl', 'Q')\">Q<\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'background'\">\n                <div class=\"pdapp-qrcode-background p-1 d-flex gap-2 flex-column w-100\">\n                    <div class=\"form-check form-switch gap-1 d-flex align-items-center\">\n                        <input type=\"checkbox\" class=\"form-check-input\" id=\"pdapp-qrcode-background\" :checked=\"menuOptions.details[menuOptions.childID].background == 'transparent' ? true : false\" @change=\"changeUpdateQrcode('background', '')\">\n                        <label class=\"form-check-label ms-1\" for=\"pdapp-qrcode-background\">{{ langs.options.transparent_background }}<\/label>\n                    <\/div>\n                    <div class=\"pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-n1\" v-if=\"menuOptions.details[menuOptions.childID].background != 'transparent'\">\n                        <input type=\"text\" id=\"pdapp-qrcode-bg-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].background\" @change=\"changeUpdateQrcode('background', '')\">\n                    <\/div>\n                    <div class=\"d-flex gap-2 align-items-center w-100\">\n                        <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].padding+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].padding\" @input=\"updateQrcode()\">\n                        <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].padding\" @input=\"updateQrcode()\">\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n                <div class=\"pdapp-qrcode-transparency p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n                    <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'align'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_top\" @click=\"alignPhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_right\" @click=\"alignPhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_bot\" @click=\"alignPhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_left\" @click=\"alignPhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_center_all\" @click=\"alignPhoto('centerAll')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_middle\" @click=\"alignPhoto('middle')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.align_center\" @click=\"alignPhoto('center')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_inside\" @click=\"fitPhotoInside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn tooltip-top rounded-2 btn-light\" :data-tooltip=\"langs.options.fit_outside\" @click=\"fitPhotoOutside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'move'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_top\" @click=\"movePhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_bot\" @click=\"movePhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_left\" @click=\"movePhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" :data-tooltip=\"langs.options.move_right\" @click=\"movePhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'more'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'qrcode')\" :data-tooltip=\"langs.options.copy_qrcode\" @click=\"copyQrcode()\">\n                        <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n                    <\/button>\n                        \n                    <button type=\"button\" class=\"btn tooltip-top btn-light rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'qrcode')\" :data-tooltip=\"langs.options.lock\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                        <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <button type=\"button\" class=\"btn btn-primary waves-effect m-0 w-100\" @click=\"addQrcode()\">\n        <i class=\"material-icons material-symbols-outlined\">add<\/i>\n        {{ langs.options.add_qrcode }}\n    <\/button>\n<\/template>\n                        <\/template>\n\n                        <template v-if=\"activeMenu == 'barcode'\">\n                            <template v-if=\"menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined\">\n    <div class=\"pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1\" @click.stop.prevent=\"\">\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['edit', 'type', 'color'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-edit list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('edit')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'edit' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">edit_note<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.edit_barcode }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['width'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-width list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('width')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'width' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_letter_spacing<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.barcode_width }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['height'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-height list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('height')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'height' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">height<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.barcode_height }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['background'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-background list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('background')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'background' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_color_fill<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.background }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['transparent'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-transparency list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('transparency')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">gradient<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.transparency }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-align list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('align')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'align' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">format_align_justify<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.align_barcode }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['move'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('move')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'move' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">open_with<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.move_barcode }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(true, ['copy', 'lock'], 'barcode')\" class=\"list-group-item pdapp-barcode-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column\" @click=\"dropdownBarcode('more')\" :class=\"menuOptions.details[menuOptions.childID].dropdown == 'more' ? 'active' : ''\">\n            <i class=\"material-icons material-symbols-outlined\">more_horiz<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.options.more }}<\/span>\n            <span class=\"dropdown-arrow-right\"><\/span>\n        <\/button>\n\n        <button type=\"button\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['delete'], 'barcode')\" class=\"list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0\" @click=\"deleteQrcode()\">\n            <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n            <span class=\"text-uppercase pdapp-caption d-md-block d-none\">{{ langs.delete_barcode }}<\/span>\n        <\/button>\n    <\/div>\n\n    <div class=\"pdapp-menu-options position-absolute card m-0 shadow-lg border\" :class=\"'pdapp-barcode-dropdown-'+ menuOptions.details[menuOptions.childID].dropdown\" v-if=\"menuOptions.details[menuOptions.childID].dropdown != undefined && menuOptions.details[menuOptions.childID].dropdown != ''\" @click.stop.prevent=\"\">\n        <button type=\"button\" class=\"btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown\" @click=\"dropdownBarcode('')\">\n            <i class=\"material-icons material-symbols-outlined close-menu-hor\">keyboard_backspace<\/i>\n            <i class=\"material-icons material-symbols-outlined close-menu-ver\">south<\/i>\n        <\/button>\n        \n        <div class=\"pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden\">\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'edit'\">\n                <div class=\"pdapp-barcode-edit p-1 d-flex gap-2 w-100 flex-wrap justify-content-center\">\n                    <input type=\"text\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['edit'], 'barcode')\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].text\" @input=\"checkBarcode()\" :placeholder=\"langs.options.barcode_text\">\n            \n                    <select class=\"form-select\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['type'], 'barcode')\" v-model=\"menuOptions.details[menuOptions.childID].format\" @change=\"checkBarcode()\">\n                        <optgroup v-for=\"(barcode, key) in barcodeTypes\" :key=\"key\" :label=\"barcode.type.toUpperCase()\">\n                            <option v-for=\"(code, nkey) in barcode.values\" :key=\"nkey\" :value=\"code\">{{ code.toUpperCase() }}<\/option>\n                        <\/optgroup>\n                    <\/select>\n                    \n                    <input type=\"text\" class=\"form-control\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock && menuOptions.details[menuOptions.childID].format == 'EAN13-lastchar', ['edit'], 'barcode')\" v-model=\"menuOptions.details[menuOptions.childID].lastChar\" @change=\"checkBarcode()\" :placeholder=\"langs.options.barcode_lastChar\">\n        \n                    <div class=\"pdapp-qrcode-colorbox pdapp-hide-palette w-100 mb-1\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['color'], 'barcode')\">\n                        <input type=\"text\" id=\"pdapp-barcode-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].lineColor\" @change=\"updateBarcode()\">\n                    <\/div>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'width'\">\n                <div class=\"pdapp-barcode-width p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"10\" class=\"form-range\" :style=\"'background-size:'+(menuOptions.details[menuOptions.childID].width*10)+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].width\" @change=\"updateBarcode()\">\n                    <input type=\"number\" min=\"1\" max=\"10\" class=\"form-control form-control-sm pdapp-w70 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].width\" @change=\"updateBarcode()\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'height'\">\n                <div class=\"pdapp-barcode-height p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"1\" :max=\"menuOptions.details[menuOptions.childID].height*1.5\" class=\"form-range\" :style=\"'background-size:'+(menuOptions.details[menuOptions.childID].height*100\/(menuOptions.details[menuOptions.childID].height*1.5))+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].height\" @change=\"updateBarcode()\">\n                    <input type=\"number\" min=\"1\" :max=\"menuOptions.details[menuOptions.childID].height*1.5\" class=\"form-control form-control-sm pdapp-w70 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].height\" @change=\"updateBarcode()\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'background'\">\n                <div id=\"pdapp-barcode-bg-box\" class=\"pdapp-barcode-background p-1 d-flex gap-2 flex-column w-100\">\n                    <div class=\"form-check form-switch gap-1 d-flex align-items-center\">\n                        <input type=\"checkbox\" class=\"form-check-input\" id=\"pdapp-barcode-background\" :checked=\"menuOptions.details[menuOptions.childID].background == 'transparent' ? true : false\" @change=\"changeUpdateBarcode('background', '')\">\n                        <label class=\"form-check-label ms-1\" for=\"pdapp-barcode-background\">{{ langs.options.transparent_background }}<\/label>\n                    <\/div>\n                    <div class=\"pdapp-barcode-colorbox pdapp-hide-palette w-100 mb-n1\" v-if=\"menuOptions.details[menuOptions.childID].background != 'transparent'\">\n                        <input type=\"text\" id=\"pdapp-barcode-bg-colorpicker\" class=\"form-control\" v-model=\"menuOptions.details[menuOptions.childID].background\" @change=\"changeUpdateBarcode('background', '')\">\n                    <\/div>\n                    <div class=\"d-flex gap-2 align-items-center w-100\">\n                        <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].margin+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].margin\" @change=\"updateBarcode()\">\n                        <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].margin\" @input=\"updateBarcode()\">\n                    <\/div>\n                <\/div>\n            <\/template>\n            \n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'transparency'\">\n                <div class=\"pdapp-barcode-transparency p-1 d-flex gap-2 align-items-center w-100\">\n                    <input type=\"range\" step=\"1\" min=\"0\" max=\"100\" class=\"form-range\" :style=\"'background-size:'+menuOptions.details[menuOptions.childID].transparency+'% 100%;'\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @input=\"updatePhotoStyle('transparency')\">\n                    <input type=\"number\" min=\"0\" max=\"100\" class=\"form-control form-control-sm pdapp-w70 pe-0 me-2\" v-model=\"menuOptions.details[menuOptions.childID].transparency\" @change=\"updatePhotoStyle('transparency')\">\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'align'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_top<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_right<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_bottom<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('centerAll')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_flex_center<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('middle')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_vertical_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"alignPhoto('center')\">\n                        <i class=\"material-icons material-symbols-outlined\">align_horizontal_center<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn rounded-2 btn-light\" @click=\"fitPhotoInside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_page<\/i>\n                    <\/button>\n                    \n                    <button type=\"button\" class=\"btn rounded-2 btn-light\" @click=\"fitPhotoOutside()\">\n                        <i class=\"material-icons material-symbols-outlined\">fit_screen<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'move'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('top')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_less<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('bot')\">\n                        <i class=\"material-icons material-symbols-outlined\">expand_more<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('left')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_left<\/i>\n                    <\/button>\n                    <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"movePhoto('right')\">\n                        <i class=\"material-icons material-symbols-outlined\">chevron_right<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n\n            <template v-if=\"menuOptions.details[menuOptions.childID].dropdown == 'more'\">\n                <div class=\"p-1 btn-group flex-wrap gap-2 w-100\">\n                    <button type=\"button\" class=\"btn btn-light rounded-2 pdapp-btn-copy\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['copy'], 'barcode')\" v-if=\"settings.layout.barcode.copy\" @click=\"copyBarcode()\">\n                        <i class=\"material-icons material-symbols-outlined\">content_copy<\/i>\n                    <\/button>\n                        \n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"showSettingOption(true, ['lock'], 'barcode')\" v-if=\"settings.layout.barcode.lock\" @click=\"lockPhoto()\" :class=\"menuOptions.details[menuOptions.childID].photoLock ? 'btn-primary' : 'btn-light'\">\n                        <i class=\"material-icons material-symbols-outlined\" v-if=\"menuOptions.details[menuOptions.childID].photoLock\">lock<\/i>\n                        <i class=\"material-icons material-symbols-outlined\" v-else>lock_open<\/i>\n                    <\/button>\n\n                    <button type=\"button\" class=\"btn rounded-2\" v-if=\"showSettingOption(!menuOptions.details[menuOptions.childID].photoLock, ['text'], 'barcode')\" v-if=\"settings.layout.barcode.text\" @click=\"changeUpdateBarcode('displayValue', !menuOptions.details[menuOptions.childID].displayValue)\" :class=\"menuOptions.details[menuOptions.childID].displayValue ? 'btn-light' : 'btn-primary'\">\n                        <i class=\"material-icons material-symbols-outlined\">font_download_off<\/i>\n                    <\/button>\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/template>\n\n<template v-else>\n    <button type=\"button\" class=\"btn btn-primary waves-effect m-0 w-100\" @click=\"addBarcode()\">\n        <i class=\"material-icons material-symbols-outlined\">add<\/i>\n        {{ langs.options.add_barcode }}\n    <\/button>\n<\/template>\n<div class=\"pdapp-barcode-svg d-none\">\n    <svg id=\"pdapp-barcode-box\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"><\/svg>\n<\/div>                        <\/template>\n\n                        <template v-if=\"activeMenu == 'layer'\">\n                            <div class=\"pdapp-layer-list d-flex flex-column gap-2 w-100\" v-if=\"0 < menuOptions.values.length\">\n    <button type=\"button\" class=\"pdapp-layer-item btn btn-light rounded-2 justify-content-between p-0 gap-1 pdapp-h50 w-100\" v-for=\"(layer, lid) in menuOptions.values\" :key=\"lid\" @click.stop.prevent=\"setActiveLayer(layer)\">\n        <span class=\"pdapp-layer-text px-1 text-hidden\" v-if=\"layer.type == 'text'\" :title=\"layer.type\">{{ layer.value }}<\/span>\n        <div class=\"pdapp-layer-thumbnail w-100\" v-else :title=\"layer.type\">\n            <img :src=\"layer.value\" :alt=\"layer.type\" class=\"pdapp-img pdapp-h50 rounded-2 px-1\">\n        <\/div>\n        <div class=\"pdapp-layer-groupbtn d-flex flex-column gap-1 justify-content-center align-items-center me-1\" v-if=\"1 < menuOptions.values.length\">\n            <span class=\"btn btn-sm btn-secondary pdapp-w20 pdapp-h20\" @click.stop.prevent=\"moveLayer(layer.id, 'up')\"><i class=\"material-icons material-symbols-outlined\">expand_less<\/i><\/span>\n            <span class=\"btn btn-sm btn-secondary pdapp-w20 pdapp-h20\" @click.stop.prevent=\"moveLayer(layer.id, 'down')\"><i class=\"material-icons material-symbols-outlined\">expand_more<\/i><\/span>\n        <\/div>\n    <\/button>\n<\/div>\n<div class=\"w-100 text-danger text-center\" v-else>{{ langs.options.layer_empty }}<\/div>                        <\/template>\n                    <\/template>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div v-if=\"activeMenu != null && menuOptions.childID == null && groupItem.show == false\" class=\"modal-backdrop fade show\" @click=\"activeMenu = null\"><\/div>\n    <\/div>\n<\/template><\/template><\/template>\n<template v-else>\n    <div class=\"pdapp-menus list-group border-none gap-2 placeholder-glow p-1\">\n    <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary active\" :class=\"{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}\">&nbsp;<\/button>\n    <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary\" :class=\"{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}\">&nbsp;<\/button>\n    <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary\" :class=\"{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}\">&nbsp;<\/button>\n    <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary\" :class=\"{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}\">&nbsp;<\/button>\n    <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary\" :class=\"{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}\">&nbsp;<\/button>\n    <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary\" :class=\"{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}\">&nbsp;<\/button>\n    <button type=\"button\" class=\"list-group-item list-group-item-action d-flex align-items-center gap-1 p-2 ps-1 pe-1 rounded-2 border d-flex flex-column placeholder bg-secondary\" :class=\"{'pdapp-w80 pdapp-h70': responsiveLayout.screenSize == 'desktop', 'pdapp-w50 pdapp-h50': responsiveLayout.screenSize == 'mobile', 'pdapp-w70 pdapp-h60': responsiveLayout.screenSize == 'tablet'}\">&nbsp;<\/button>\n<\/div>\n<div class=\"pdapp-menu-options flex-column align-items-center gap-2 border-start d-lg-flex d-none\">\n    <div class=\"d-block w-100 placeholder-glow px-1\">\n        <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n    <\/div>\n    <div class=\"pdapp-menu-options-content d-flex flex-column align-items-center gap-2 px-1 overflow-y-auto overflow-x-hidden\">\n        <div class=\"d-flex flex-column gap-2 placeholder-glow w-100 mb-1\">\n            <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h40 rounded-2\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h30 rounded-2\"><\/div>\n        <\/div>\n\n        <div class=\"d-flex flex-column gap-2 placeholder-glow w-100 mb-1\">\n            <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h50 rounded-2\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h50 rounded-2\"><\/div>\n        <\/div>\n\n        <div class=\"d-flex flex-column gap-2 placeholder-glow w-100\">\n            <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h40 rounded-2\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h40 rounded-2\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h40 rounded-2\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h40 rounded-2\"><\/div>\n            <div class=\"bg-secondary placeholder w-100 pdapp-h40 rounded-2\"><\/div>\n        <\/div>\n    <\/div>\n<\/div><\/template>                <\/div>\n                <div class=\"pdapp-center-layout position-relative\">\n                    <div class=\"pdapp-studio-box d-flex flex-column h-100 gap-1\">\n    <template v-if=\"isLoaded\">\n    <div class=\"pdapp-studio-topbar d-flex justify-content-between align-items-center gap-2\" v-if=\"1200 <= responsiveLayout.width\">\n        <div class=\"pdapp-topbar-toolbar d-flex align-items-center gap-1 pdapp-product-size-box\" v-if=\"areaActive.id != undefined\">\n            <div class=\"input-group input-group-sm tooltip-top d-flex flex-nowrap\" :data-tooltip=\"langs.toolbar.product_size\">\n                <span class=\"input-group-text ps-1 pe-1\">W<\/span>\n                <input type=\"number\" min=\"0\" step=\"any\" class=\"form-control pdapp-w50 ps-1 pe-0\" :value=\"areaActive.width\" :disabled=\"!product.unit.edit\" @change=\"updatePrintSize($event, 'width')\">\n            <\/div>\n            <div class=\"input-group input-group-sm tooltip-top d-flex flex-nowrap\" :data-tooltip=\"langs.toolbar.product_size\">\n                <span class=\"input-group-text ps-1 pe-1\">H<\/span>\n                <input type=\"number\" min=\"0\" step=\"any\" class=\"form-control pdapp-w50 ps-1 pe-0\" :value=\"areaActive.height\" :disabled=\"!product.unit.edit\" @change=\"updatePrintSize($event, 'height')\">\n            <\/div>\n            <i class=\"material-icons material-symbols-outlined\" v-if=\"product.unit.edit\">link<\/i>\n            <i class=\"material-icons material-symbols-outlined\" v-else>lock<\/i>\n            <select class=\"form-select form-select-sm\" :disabled=\"!product.unit.edit\" @change=\"updatePrintSize($event, 'unit')\">\n                <option v-for=\"(unit, idx) in sizeUnit\" :key=\"idx\" :value=\"unit\" :selected=\"product.unit.type == unit\">{{ unit.toUpperCase() }}<\/option>\n            <\/select>\n        <\/div>\n        \n        <div class=\"pdapp-topbar-toolbar d-flex align-items-center position-relative gap-1\">\n            <button type=\"button\" class=\"btn btn-sm btn-light tooltip-top border\" :data-tooltip=\"langs.toolbar.select_all_design\" @click=\"selectAllGroup\">\n                <i class=\"material-icons material-symbols-outlined\">select_all<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn btn-sm btn-warning tooltip-top\" :data-tooltip=\"langs.toolbar.reset_design\" v-if=\"settings.layout.reset.allow\" @click=\"resetAllDesign\">\n                <i class=\"material-icons material-symbols-outlined\">restart_alt<\/i>\n            <\/button>\n            <div class=\"d-block position-relative\" v-if=\"!responsiveLayout.showCart && modalCart.show != true && (1 < productDataPX.colors.length || (productDataPX.colors.length == 1 && (productDataPX.colors[0].type == 'picker' || 1 < productDataPX.colors[0].values.length)))\">\n                <button type=\"button\" class=\"btn btn-sm tooltip-top-left border\" :class=\"dropdownMenu == 'product_color' ? 'btn-primary active' : 'btn-light'\" :data-tooltip=\"langs.toolbar.product_color\" @click=\"showProductColor\">\n                    <i class=\"material-icons material-symbols-outlined\">format_color_fill<\/i>\n                    <span class=\"dropdown-arrow-bot\"><\/span>\n                <\/button>\n                <div class=\"pdapp-topbar-options position-absolute card shadow-lg p-1 border\" v-if=\"dropdownMenu == 'product_color'\">\n                    <div class=\"pdapp-topbar-colorbox d-flex flex-column w-100 pdapp-hide-palette\" v-for=\"(color, cid) in productDataPX.colors\" :key=\"cid\">\n                        <h5 class=\"header-title fs-6 m-0 py-1\">{{ color.title }}<\/h5>\n                        <i class=\"material-icons material-symbols-outlined btn-close-dropbox\" @click=\"showProductColor\">close<\/i>\n                        <div class=\"pdapp-colorpicker\" v-if=\"color.type == 'picker'\">\n                            <input type=\"text\" :id=\"'pdapp-product-colorpicker-'+ color.id\" class=\"form-control\" v-model=\"color.active\" @input=\"changeProductColor(color.id, color.active, cid)\">\n                        <\/div>\n                        <div class=\"pdapp-listcolor d-flex flex-wrap w-100 gap-2\" v-else>\n                            <button type=\"button\" class=\"btn p-0 waves-effect waves-light border pdapp-w30 pdapp-h30 tooltip-top\" v-for=\"(val, k) in color.values\" :key=\"k\" :class=\"val.hex == color.active ? 'rounded-pill '+ getIconColor(val.hex) : 'rounded-2'\" :data-tooltip=\"val.title\" @click=\"changeProductColor(color.id, val.hex, cid)\" :style=\"'background:'+ val.hex\"><\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n<template v-else>\n    <div class=\"pdapp-studio-topbar d-xl-flex d-none justify-content-between align-items-center gap-2\">\n        <div class=\"pdapp-topbar-toolbar d-flex align-items-center gap-1\">\n            <div class=\"p-0 placeholder-glow w-100 d-flex align-items-center\">\n                <div class=\"bg-secondary placeholder pdapp-h30 pdapp-w80 rounded-2\"><\/div>\n            <\/div>\n            <div class=\"p-0 placeholder-glow w-100 d-flex align-items-center\">\n                <div class=\"bg-secondary placeholder pdapp-h30 pdapp-w80 rounded-2\"><\/div>\n            <\/div>\n            <div class=\"p-0 placeholder-glow w-100 d-flex align-items-center\">\n                <div class=\"bg-secondary placeholder pdapp-w30\"><\/div>\n            <\/div>\n            <div class=\"p-0 placeholder-glow w-100 d-flex align-items-center\">\n                <div class=\"bg-secondary placeholder pdapp-h30 pdapp-w80 rounded-2\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"pdapp-topbar-toolbar d-flex align-items-center gap-1\">\n            <div class=\"p-0 placeholder-glow w-100 d-flex align-items-center\">\n                <div class=\"bg-secondary placeholder pdapp-h30 pdapp-w50 rounded-2\"><\/div>\n            <\/div>\n            <div class=\"p-0 placeholder-glow w-100 d-flex align-items-center\">\n                <div class=\"bg-secondary placeholder pdapp-h30 pdapp-w50 rounded-2\"><\/div>\n            <\/div>\n            <div class=\"p-0 placeholder-glow w-100 d-flex align-items-center\">\n                <div class=\"bg-secondary placeholder pdapp-h30 pdapp-w50 rounded-2\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>    <div id=\"pdapp-studio\" class=\"d-flex position-relative overflow-hidden\" data-width=\"0\" data-height=\"0\">\n    <template v-if=\"isLoaded\">\n        <div id=\"pdapp-viewer-area\" class=\"pdapp-studio-area d-inline-block position-relative overflow-auto\" :data-ratio=\"productDataPX.unit.ratio\" :data-zoom=\"productDataPX.unit.zoom\">\n            <template v-for=\"(productView, vid) in productDataPX.views\">\n                <div class=\"pdapp-viewport position-relative overflow-hidden\" v-if=\"productBoxStyle[vid] != undefined && productBoxStyle[vid].viewPort != undefined\" :key=\"vid\" :class=\"activeProduct.view == vid ? 'active' : '', (modalCart.show && !responsiveLayout.showCart) || dropdownMenu == 'product_color' ? 'pdapp-isCart' : ''\" :id=\"'pdapp-viewport-'+ productView.id\" :data-view=\"productView.id\" :data-viewtitle=\"productView.title\" :style=\"productBoxStyle[vid].viewPort\">\n                    <div v-for=\"(background, bkey) in productView.backgrounds\" :key=\"bkey\" :id=\"'pdapp-background-'+ productView.id +'-'+ background.id\" :class=\"'pdapp-background-img pdapp-background-img-'+ background.id\" :style=\"productBoxStyle[vid] != undefined ? productBoxStyle[vid].backgrounds[bkey] : ''\">\n                        <img preserveAspectRatio=\"none\" :data-view=\"background.id\" :data-color=\"productColors[background.id]\" class=\"pdapp-product-img\" :src=\"showImg(background.image, productDataPX.id, 'product')\">\n                    <\/div>\n\n                    <div v-if=\"productView.mask != undefined && productView.mask.image != undefined\" class=\"pdapp-mask-img\" :style=\"productBoxStyle[vid].mask != undefined ? productBoxStyle[vid].mask : ''\">\n                        <img preserveAspectRatio=\"none\" class=\"pdapp-product-img\" :src=\"showImg(productView.mask.image, productDataPX.id, 'product')\">\n                    <\/div>\n\n                    <div v-for=\"(layer, lid) in productView.layers\" :style=\"productBoxStyle[vid] != undefined ? productBoxStyle[vid].layers[lid] : ''\" :key=\"lid\" :class=\"lid == activeProduct.area ? 'pdapp-viewport-area active' : 'pdapp-viewport-area'\" :id=\"'pdapp-viewport-area-'+productView.id +'-'+ layer.id\" :data-view=\"layer.id\" :data-viewtitle=\"layer.title\" @click=\"changeProductArea(lid)\">\n                        <span class=\"pdapp-border-area\" :style=\"productBoxStyle[vid].borders[lid]\"><\/span>\n                        <div class=\"pdapp-text-arc\" :style=\"'width: '+(layer.width*svgViewboxRatio)+'px; height: '+(layer.height*svgViewboxRatio)+'px;'\"><\/div>\n                        <div class=\"pdapp-selecto-ref\"><\/div>\n                        <svg class=\"pdapp-selecto-area\" width=\"100%\" height=\"100%\" :data-width=\"layer.width\" :data-height=\"layer.height\" x=\"0\" y=\"0\" :view-box.camel=\"'0 0 '+ (layer.width*svgViewboxRatio) +' '+ (layer.height*svgViewboxRatio) \" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" :style=\"layer.radius != '' ? 'border-radius:'+ layer.radius +'%' : ''\" :class=\"activeProduct.area == layer.id ? 'active' : ''\"><\/svg>\n                        <img v-if=\"layer.mask != ''\" :id=\"'pdapp-area-mask-'+productView.id +'-'+ layer.id\" class=\"pdapp-area-mask-img\" :data-color=\"productColors[productView.backgrounds[0].id]\" :src=\"showImg(layer.mask, productDataPX.id, 'product')\">\n                    <\/div>\n                <\/div>\n            <\/template>\n        <\/div>\n        <div class=\"pdapp-undo-btn d-none gap-1\" v-if=\"settings.layout.undo.allow\">\n            <button type=\"button\" class=\"btn btn-sm btn-light tooltip-top border\" :class=\"history.active < 0 ? 'disabled' : ''\" :disabled=\"history.active < 0\" :data-tooltip=\"langs.toolbar.undo\" @click=\"doHistory('undo')\">\n                <i class=\"material-icons material-symbols-outlined\">undo<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn btn-sm btn-light tooltip-top border\" :class=\"history.values.length-1 <= history.active ? 'disabled' : ''\" :disabled=\"history.values.length-1 <= history.active\" :data-tooltip=\"langs.toolbar.redo\" @click=\"doHistory('redo')\">\n                <i class=\"material-icons material-symbols-outlined\">redo<\/i>\n            <\/button>\n        <\/div>\n        <div class=\"pdapp-tool-group d-none align-items-center position-absolute gap-1\">\n            <button type=\"button\" class=\"btn btn-sm btn-light tooltip-top border\" :data-tooltip=\"langs.toolbar.select_all_design\" @click=\"selectAllGroup\">\n                <i class=\"material-icons material-symbols-outlined\">select_all<\/i>\n            <\/button>\n            <button type=\"button\" class=\"btn btn-sm btn-warning tooltip-top\" :data-tooltip=\"langs.toolbar.reset_design\" v-if=\"settings.layout.reset.allow\" @click=\"resetAllDesign\">\n                <i class=\"material-icons material-symbols-outlined\">restart_alt<\/i>\n            <\/button>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-studio-area d-inline-block position-relative placeholder-glow\">\n            <div class=\"pdapp-viewport bg-secondary placeholder\"><\/div>\n        <\/div>\n        <div class=\"pdapp-undo-btn d-none gap-1 placeholder-glow\">\n            <div class=\"pdapp-w30 pdapp-h30 placeholder bg-secondary rounded-2\"><\/div>\n            <div class=\"pdapp-w30 pdapp-h30 placeholder bg-secondary rounded-2\"><\/div>\n        <\/div>\n    <\/template>\n<\/div>    <div class=\"pdapp-studio-botbar d-flex justify-content-between align-items-center gap-2 py-1\">\n    <template v-if=\"isLoaded\">\n        <div class=\"pdapp-botbar-item d-flex gap-2 position-relative\">\n            <button type=\"button\" id=\"pdapp-rulerbar\" v-if=\"settings.layout.ruler.allow\" class=\"btn btn-sm tooltip-top d-none d-lg-block\" :class=\"showRuler ? 'active btn-primary' : 'btn-light border'\" :data-tooltip=\"langs.toolbar.ruler\" @click=\"toggleShowRuler\">\n                <i class=\"material-icons material-symbols-outlined\">straighten<\/i>\n            <\/button>\n            <div class=\"pdapp-undo-btn d-flex gap-1\" v-if=\"settings.layout.undo.allow\">\n                <button type=\"button\" class=\"btn btn-sm btn-light tooltip-top border\" :class=\"history.active < 0 ? 'disabled' : ''\" :disabled=\"history.active < 0\" :data-tooltip=\"langs.toolbar.undo\" @click=\"doHistory('undo')\">\n                    <i class=\"material-icons material-symbols-outlined\">undo<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-sm btn-light tooltip-top border\" :class=\"history.values.length-1 <= history.active  ? 'disabled' : ''\" :disabled=\"history.values.length-1 <= history.active\" :data-tooltip=\"langs.toolbar.redo\" @click=\"doHistory('redo')\">\n                    <i class=\"material-icons material-symbols-outlined\">redo<\/i>\n                <\/button>\n            <\/div>\n            <button type=\"button\" class=\"btn btn-sm btn-light tooltip-top border\" :data-tooltip=\"langs.toolbar.preview\" @click=\"previewScreen\" v-if=\"settings.layout.preview.allow\">\n                <i class=\"material-icons material-symbols-outlined\">visibility<\/i>\n            <\/button>\n            <div class=\"d-flex align-items-center gap-1\" v-if=\"settings.layout.zoom.allow\">\n                <i class=\"material-icons material-symbols-outlined d-none d-xl-block\">search<\/i>\n                <input type=\"range\" step=\"2\" min=\"0\" max=\"300\" v-model=\"product.unit.zoom\" class=\"form-range d-none d-lg-block\" :style=\"'background-size: '+ product.unit.zoom*100\/300 +'% 100%;'\" @input=\"zoomLimit(10)\">\n                <div class=\"btn btn-sm tooltip-top position-relative pdapp-btn-zoom d-none d-lg-block\" :class=\"dropdownMenu == 'zoom' ? 'btn-primary' : 'btn-light border'\" @click=\"dropdownMenu == 'zoom' ? dropdownMenu = '' : dropdownMenu = 'zoom'\" :data-tooltip=\"langs.toolbar.zoom\">\n                    <i class=\"material-icons material-symbols-outlined d-block d-xl-none\">search<\/i>\n                    <span class=\"d-none d-xl-block\">{{ product.unit.zoom }}%<\/span>\n                    <span class=\"dropdown-arrow-top\"><\/span>\n                    <div class=\"pdapp-botbar-options position-absolute card shadow-lg list-group mb-0\" v-if=\"dropdownMenu == 'zoom'\">\n                        <button type=\"button\" class=\"list-group-item list-group-item-action p-1 pdapp-w100 text-center\" v-for=\"(zoom, zid) in listZoom\" :key=\"zid\" :class=\"product.unit.zoom == zoom ? 'text-white bg-primary' : ''\" @click=\"product.unit.zoom = zoom\">{{ zoom }}%<\/button>\n                    <\/div>\n                <\/div>\n                <input type=\"range\" step=\"2\" min=\"0\" max=\"200\" v-model=\"product.unit.zoom\" class=\"form-range d-block d-lg-none form-range-mobile\" :style=\"'background-size: '+ product.unit.zoom*100\/200 +'% 100%;'\" @input=\"zoomLimit(20)\">\n            <\/div>\n            <button type=\"button\" class=\"btn btn-sm tooltip-top d-none d-xl-block\" :class=\"isFullScreen ? 'btn-primary' : 'btn-light border'\" :data-tooltip=\"isFullScreen ? langs.toolbar.exit_expand_fullscreen : langs.toolbar.expand_fullscreen\" @click=\"toggleFullScreen\" v-if=\"settings.layout.fullscreen.allow\">\n                <i class=\"material-icons material-symbols-outlined\" v-if=\"isFullScreen\">fullscreen_exit<\/i>\n                <i class=\"material-icons material-symbols-outlined\" v-else>fullscreen<\/i>\n            <\/button>\n        <\/div>\n        \n        <div class=\"pdapp-botbar-item pdapp-area-viewport position-relative\">\n            <div class=\"btn-group\" v-if=\"1 < productDataPX.views.length || (product.advanced != undefined && product.advanced.viewcopy != undefined && product.advanced.customview != undefined && product.advanced.customview)\">\n                <template v-for=\"(view, vid) in productDataPX.views\">\n                    <button type=\"button\" :key=\"vid\" v-if=\"(activeProduct.view-2 == vid && activeProduct.view == productDataPX.views.length-1) || activeProduct.view-1 == vid || activeProduct.view == vid || activeProduct.view+1 == vid || (activeProduct.view == 0 && vid-2 == 0)\" class=\"btn btn-sm tooltip-top-left\" :data-tooltip=\"langs.toolbar.click_to_select +' '+ view.title\" :class=\"activeProduct.view == vid ? 'btn-primary' : 'btn-light border'\" :disabled=\"loadaddview\" @click.stop.prevent=\"changeProductView(vid)\">\n                        <span>{{ view.title }}<\/span><span v-if=\"0 < customViewNumber[vid]\"> {{ customViewNumber[vid] }}<\/span>\n                        <span class=\"dropdown-arrow-top\" v-if=\"productDataPX.views != undefined && productDataPX.views[activeProduct.view] != undefined && 1 < productDataPX.views[activeProduct.view].layers.length\"><\/span>\n                        <span class=\"btn btn-sm p-0 rounded-pill d-flex justify-content-center align-items-center btn-danger btn-view-close\" @click.stop.prevent=\"removeView(vid)\" v-if=\"activeProduct.view != vid && view.type != undefined && view.type == 'addmore'\">\n                            <span class=\"material-symbols-outlined\">close<\/span>\n                        <\/span>\n                    <\/button>\n                    <button type=\"button\" v-if=\"product.advanced != undefined && product.advanced.viewcopy != undefined && ((product.advanced.viewcopy < getViewInd && getViewInd == vid) || (getViewInd <= product.advanced.viewcopy && product.advanced.viewcopy == vid)) && product.advanced.customview != undefined && product.advanced.customview && 0 < product.advanced.maxview\" class=\"btn btn-sm tooltip-top-left btn-info px-1 d-flex align-items-center justify-content-center\" :data-tooltip=\"langs.toolbar.add_more_view\" :disabled=\"loadaddview\" :class=\"loadaddview ? 'disabled' : ''\" @click=\"addMoreView\">\n                        <span class=\"material-symbols-outlined\" v-if=\"loadaddview\">more_horiz<\/span>\n                        <span class=\"material-symbols-outlined\" v-else>add<\/span>\n                    <\/button>\n                <\/template>\n            <\/div>\n            \n            <div class=\"pdapp-area-viewbox btn-group shadow-lg\" v-if=\"productDataPX.views != undefined && productDataPX.views[activeProduct.view] != undefined && 1 < productDataPX.views[activeProduct.view].layers.length\">\n                <template v-for=\"(layer, lid) in productDataPX.views[activeProduct.view].layers\">\n                    <button type=\"button\" :key=\"lid\" v-if=\"activeProduct.area-1 == lid || activeProduct.area == lid || activeProduct.area+1 == lid\" class=\"btn btn-sm tooltip-top-left\" :disabled=\"loadaddview\" :data-tooltip=\"langs.toolbar.click_to_select +' '+ layer.title\" :class=\"activeProduct.area == lid ? 'btn-primary' : 'btn-light border'\" @click=\"changeProductView(lid, 'area')\">\n                        <span>{{ layer.title }}<\/span>\n                    <\/button>\n                <\/template>\n            <\/div>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-botbar-item d-flex gap-2 position-relative placeholder-glow\">\n            <div class=\"pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2 d-none d-lg-block\"><\/div>\n            <div class=\"pdapp-undo-btn d-flex gap-1\">\n                <div class=\"pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2\"><\/div>\n                <div class=\"pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2\"><\/div>\n            <\/div>\n            <div class=\"pdapp-w40 pdapp-h30 placeholder bg-secondary rounded-2\"><\/div>\n            <div class=\"d-flex align-items-center gap-1 d-lg-none\">\n                <div class=\"pdapp-w30 pdapp-h30 d-none d-lg-block placeholder bg-secondary rounded-2\"><\/div>\n                <div class=\"pdapp-w80 placeholder d-none d-lg-block bg-secondary\"><\/div>\n                <div class=\"pdapp-w40 pdapp-h30 placeholder bg-secondary rounded-2\"><\/div>\n            <\/div>\n            <div class=\"pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2 d-none d-xl-block\"><\/div>\n        <\/div>\n        \n        <div class=\"pdapp-botbar-item d-flex align-items-center btn-group placeholder-glow pdapp-area-viewport\">\n            <div class=\"pdapp-w50 pdapp-h30 placeholder btn bg-secondary\"><\/div>\n            <div class=\"pdapp-w50 pdapp-h30 placeholder btn bg-secondary\"><\/div>\n        <\/div>\n    <\/template>\n<\/div><\/div>                <\/div>\n                <div class=\"pdapp-right-layout position-relative\">\n                    <div :class=\"responsiveLayout.showCart ? 'pdapp-cart-layout border-start h-100' : 'modal modal-cart fade show d-block'\" role=\"dialog\" v-if=\"modalCart.show || responsiveLayout.showCart\">\n    <template v-if=\"isLoaded\">\n        <div class=\"pdapp-cart-box\" :class=\"responsiveLayout.showCart ? 'h-100' : 'modal-dialog modal-md modal-right justify-content-start h-auto'\" v-if=\"settings.layout.quote.allow || settings.layout.addcart.allow\">\n            <div :class=\"responsiveLayout.showCart ? 'd-flex flex-column' : 'modal-content'\">\n                <div :class=\"responsiveLayout.showCart ? 'w-100 modal-header' : 'modal-header py-1 px-2'\">\n                    <h4 :class=\"responsiveLayout.showCart ? 'modal-title fs-5 py-1 px-2 border-bottom w-100' : 'header-title fs-5 m-0 py-1'\">\n                        <template v-if=\"responsiveLayout.showCart\">\n                            <template v-if=\"productCart.step == 0\">{{ langs.topbar.select_variants }}<\/template>\n                            <template v-else>{{ langs.topbar.add_to_cart }}<\/template>\n                        <\/template>\n                        <template v-else>\n                            <template v-if=\"productCart.step == 0\">{{ langs.topbar.select_variants }}<\/template>\n                            <template v-else>{{ modalCart.title }}<\/template>\n                        <\/template>\n                    <\/h4>\n                    <button type=\"button\" v-if=\"!responsiveLayout.showCart\" class=\"btn p-0 m-0 pdapp-w30 pdapp-h30 text-danger ps-1\" @click=\"modalCart.show = false\">\n                        <i class=\"material-icons material-symbols-outlined fs-3\">close<\/i>\n                    <\/button>\n                <\/div>\n\n                <div class=\"modal-body p-0\">\n                    <template v-if=\"productCart.step == 0\">\n                        <div class=\"pdapp-cart-variants d-flex flex-column align-items-start gap-1 overflow-y-auto overflow-x-hidden p-1\">\n    <div class=\"pdapp-cart-group w-100 d-flex flex-column gap-1\" v-if=\"1 < productDataPX.colors.length || (productDataPX.colors.length == 1 && (productDataPX.colors[0].type == 'picker' || 1 < productDataPX.colors[0].values.length))\">\n        <h4 class=\"header-title fs-5 m-0 p-0\">{{ langs.topbar.colors }}<\/h4>\n        <div class=\"pdapp-hide-palette w-100 d-flex flex-column gap-1\" v-for=\"(color, cid) in productDataPX.colors\" :key=\"cid\">\n            <h5 class=\"header-title fs-6 m-0 p-0 d-flex justify-content-between align-items-center\">{{ color.title }} <span class=\"d-flex align-items-center\" v-if=\"color.type == 'picker'\">#<input :id=\"'pdapp-product-colorinput-'+ color.id\" style=\"width: 100px;\" type=\"text\" class=\"form-control form-control-sm\" :value=\"hexColor(color.active)\" @input=\"updateProductColor($event.target.value, color.id, cid)\"><\/span><\/h5>\n            <input v-if=\"color.type == 'picker'\" type=\"text\" :id=\"'pdapp-product-colorpicker-'+ color.id\" class=\"form-control\" v-model=\"color.active\" @input=\"changeProductColor(color.id, color.active, cid)\">\n            \n            <div class=\"pdapp-cart-color d-flex w-100 gap-2 flex-wrap\" v-else>\n                <button type=\"button\" v-for=\"(val, k) in color.values\" :key=\"k\" class=\"btn p-0 waves-effect waves-light pdapp-w30 pdapp-h30 tooltip-top border\" :class=\"val.hex == color.active ? 'rounded-pill '+ getIconColor(val.hex) : 'rounded-2'\" :data-tooltip=\"val.title\" @click=\"changeProductColor(color.id, val.hex, cid)\" :style=\"'background:'+ val.hex\"><\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"pdapp-cart-group w-100 d-flex flex-column gap-1 mt-2\" v-for=\"(extra, eid) in product.extras\" :key=\"eid\">\n        <h4 class=\"header-title fs-5 m-0 p-0\">{{ extra.title }}<\/h4>\n        <div class=\"pdapp-extras-attrs w-100 d-flex flex-column gap-1\">\n            <div class=\"form-check d-flex align-items-center gap-1\" v-for=\"(value, vid) in extra.values\" :key=\"vid\">\n                <input type=\"radio\" :id=\"'pdapp-extra-field'+ eid +'-'+vid\" v-model=\"extra.active\" :value=\"vid\" class=\"form-check-input\">\n                <label class=\"form-check-label fs-6 mb-0\" :for=\"'pdapp-extra-field'+ eid +'-'+vid\">{{ value }}<\/label>\n            <\/div>\n        <\/div>\n    <\/div>\n        <div class=\"pdapp-cart-group w-100 d-flex flex-column gap-1 pt-1 mt-1\">\n        <h4 class=\"header-title fs-5 m-0 p-0\" v-if=\"1 < cartSize.length\">{{ langs.topbar.quantity }}<\/h4>\n        <template v-if=\"productCart.team.items.length\">\n            <div class=\"pdapp-cart-teams w-100 d-flex align-items-center justify-content-between gap-1\">\n                <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.topbar.qty_for_a_member }}<\/h5>\n                <input type=\"number\" step=\"1\" min=\"0\" :max=\"cartTeamStock\" :disabled=\"cartTeamStock == 0\" class=\"form-control form-control-sm pe-0 pdapp-w70\" v-model=\"productCart.team.qty\">\n            <\/div>\n            <div class=\"pdapp-cart-teams w-100 d-flex align-items-center justify-content-between gap-1\">\n                <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.topbar.team_members }}<\/h5>\n                <h5 class=\"header-title fs-6 m-0 p-0\">{{ productCart.team.items.length }}<\/h5>\n            <\/div>\n            <div class=\"pdapp-cart-teams w-100 d-flex align-items-center justify-content-between gap-1 mt-1\">\n                <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.topbar.total_qty }}<\/h5>\n                <h5 class=\"header-title fs-6 m-0 p-0\">{{ productCart.team.items.length * productCart.team.qty }}<\/h5>\n            <\/div>\n        <\/template>\n        <div class=\"pdapp-cart-sizes d-flex align-items-center justify-content-between gap-2 w-100 flex-wrap\" v-else>\n            <template v-if=\"cartSize.length == 1\">\n                <h4 class=\"header-title fs-5 m-0 p-0\">{{ langs.topbar.quantity }}<\/h4>\n                <input type=\"number\" step=\"1\" min=\"0\" :max=\"cartSize[0].stock\" class=\"form-control tooltip-top pdapp-w80 pe-0\" :data-tooltip=\"cartSize[0].stock ? langs.topbar.outofstock : langs.topbar.available+ ': '+ cartSize[0].stock\" :disabled=\"cartSize[0].stock == 0\" v-model=\"cartSize[0].value\">\n            <\/template>\n            <template v-else>\n                <div v-for=\"(size, pid) in cartSize\" :key=\"pid\" class=\"pdapp-product-size d-flex flex-column align-items-center gap-1 tooltip-top\" :data-tooltip=\"size.stock == 0 ? langs.topbar.outofstock : langs.topbar.available+ ': '+ size.stock\">\n                    <h5 class=\"header-title fs-6 m-0 p-0\">{{ size.title }} <small v-if=\"size.price != 0\">(+{{ size.price }})<\/small><\/h5>\n                    <input type=\"number\" step=\"1\" min=\"0\" :max=\"size.stock\" class=\"form-control pe-0\" :disabled=\"size.stock == 0\" v-model=\"size.value\">\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n    <mark class=\"d-flex align-items-center gap-1 text-white bg-info w-100 py-0\" v-if=\"productCart.help != ''\"><i class=\"material-icons material-symbols-outlined fs-5\">help<\/i> {{ productCart.help }}<\/mark>\n<\/div>                    <\/template>\n                    <template v-if=\"productCart.step == 1\">\n                        <div class=\"pdapp-cart-variants d-flex flex-column gap-2 overflow-y-auto overflow-x-hidden p-1\">\n    <div class=\"pdapp-cart-items w-100 d-flex flex-column gap-1\" v-if=\"productCart.items.length\">\n        <div class=\"pdapp-cart-item d-flex align-items-center w-100\" v-for=\"(cart, cid) in productCart.items\" :key=\"cid\" :class=\"0 < cid ? 'border-top pt-1' : ''\">\n            <div class=\"d-flex flex-column gap-1\">\n                <template v-if=\"cart.thumb[0] != ''\">\n                    <a class=\"pdapp-cart-thumbnail d-block pdapp-w70 me-2\" target=\"_blank\" v-for=\"(thum, tid) in cart.thumb\" href=\"thum\" :key=\"tid\">\n                        <img class=\"img-thumbnail pdapp-w70 bg-light\" :src=\"thum\" alt=\"Cart Item\"\/>\n                    <\/a>\n                <\/template>\n            <\/div>\n\n            <div class=\"pdapp-cart-options d-flex flex-column gap-1 flex-fill\">\n                <div class=\"d-block\" v-for=\"(option, oid) in cart.options\" :key=\"oid\">{{ option }}<\/div>\n                <div class=\"d-block\" v-if=\"productCart.team.items.length == 0\">\n                    <span>\n                        <template v-if=\"cart.sizes.length == 1\">{{ langs.topbar.quantity }}<\/template>\n                        <template v-else>{{ langs.topbar.sizes }}<\/template>: <\/span>\n                    <span v-if=\"cart.sizes.length == 1\">{{ cart.sizes[0].value }}<\/span>\n                    <span v-if=\"1 < cart.sizes.length\" v-for=\"(size, sid) in cart.sizes\" :key=\"sid\">{{ size.title }}-{{ size.value }}<template v-if=\"sid < cart.sizes.length-1\">, <\/template><\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"pdapp-cart-action d-flex flex-column align-items-end gap-1 pdapp-w30\" v-if=\"productCart.team.items.length == 0\">\n                <button type=\"button\" class=\"btn btn-sm btn-info tooltip-left rounded-pill p-0 pdapp-w25 pdapp-h25\" :data-tooltip=\"langs.topbar.edit_var\" @click=\"editCart(cart)\">\n                    <i class=\"material-icons material-symbols-outlined\">edit<\/i>\n                <\/button>\n                <button type=\"button\" class=\"btn btn-sm btn-danger tooltip-left rounded-pill p-0 pdapp-w25 pdapp-h25\" :data-tooltip=\"langs.topbar.remove_from_list\" @click=\"removeCart(cid)\">\n                    <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <button v-if=\"productCart.team.items.length == 0 && cartID == ''\" class=\"btn btn-primary btn-cart\" @click=\"loadCartSize\">{{ langs.topbar.add_more_other_variants }}<\/button>\n    <div class=\"pdapp-cart-teams d-flex flex-column gap-1\" v-if=\"productCart.team.items.length != 0\">\n        <div class=\"pdapp-cart-team d-flex gap-2 w-100 align-items-center justify-content-between py-1 bg-light\">\n            <h5 class=\"header-title fs-6 m-0 p-0 flex-fill\">{{ langs.topbar.name_number }}<\/h5>\n            <h5 class=\"header-title fs-6 m-0 p-0 pdapp-w80 text-center me-1\" v-if=\"1 < cartSize.length\">{{ langs.topbar.size }}<\/h5>\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.topbar.quantity }}<\/h5>\n        <\/div>\n        <div class=\"pdapp-cart-team d-flex gap-2 w-100 justify-content-between align-items-center\" v-for=\"(team, tid) in productCart.team.items\" :key=\"tid\">\n            <div class=\"flex-fill d-flex flex-column gap-1 pdapp-w100\">\n                <h5 class=\"header-title fs-6 m-0 p-0 pdapp-caption pdapp-w120 text-start\" v-if=\"team.name != undefined\">{{ team.name }}<\/h5>\n                <h5 class=\"header-title fs-6 m-0 p-0 pdapp-caption pdapp-w120 text-start\" v-if=\"team.number != undefined\">{{ team.number }}<\/h5>\n            <\/div>\n            <select v-if=\"1 < cartTeamSize[tid].length\" class=\"form-select form-select-sm flex-fill\" v-model=\"team.size.size\">\n                <optgroup :label=\"langs.topbar.instock\">\n                    <template v-for=\"(size, sid) in cartTeamSize[tid]\">\n                        <option v-if=\"0 < size.stock\" :key=\"sid\" :value=\"sid\">{{ size.title }}<template v-if=\"size.price != 0\">({{ size.price }})<\/template><\/small><\/option>\n                    <\/template>\n                <\/optgroup>\n                <optgroup :label=\"langs.topbar.outofstock\">\n                    <template v-for=\"(size, sid) in cartTeamSize[tid]\">\n                        <option v-if=\"size.stock == 0\" :key=\"sid\" :value=\"sid\" :disabled=\"size.stock == 0\">{{ size.title }}<template v-if=\"size.price != 0\">({{ size.price }})<\/template><\/small><\/option>\n                    <\/template>\n                <\/optgroup>\n            <\/select>\n            <input type=\"number\" step=\"1\" min=\"0\" :max=\"cartTeamSize[tid][team.size.size].stock\" class=\"form-control form-control-sm flex-fill pe-0\" :disabled=\"cartTeamSize[tid][team.size.size].stock == 0\" v-model=\"team.size.qty\">\n        <\/div>\n    <\/div>\n\n    <div class=\"form-group\">\n        <label class=\"form-label fs-5\">{{ langs.topbar.your_note }}<\/label>\n        <textarea rows=\"2\" class=\"form-control form-control-sm\" :placeholder=\"langs.topbar.your_note\" v-model=\"productCart.note\"><\/textarea>\n    <\/div>\n\n    <\/div>                        <div class=\"pdapp-cart-qty border-top w-100 d-flex gap-2 flex-column p-1 mt-2\">\n    <div class=\"d-flex justify-content-between align-items-center w-100 gap-2\">\n        <template v-if=\"1 < cartQty\">\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.topbar.quantity }}<\/h5>\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ cartQty }} {{ langs.topbar.items }}<\/h5>\n        <\/template>\n        <template v-else>\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ langs.topbar.quantity }}<\/h5>\n            <h5 class=\"header-title fs-6 m-0 p-0\">{{ cartQty }} {{ langs.topbar.item }}<\/h5>\n        <\/template>\n    <\/div>\n    <div class=\"d-flex flex-column w-100 gap-1\" v-if=\"productCart.error != ''\">\n        <mark class=\"d-flex align-items-center gap-1 text-white bg-warning py-0\"><i class=\"material-icons material-symbols-outlined fs-5\">warning<\/i> <span>{{ productCart.error }}<\/span><\/mark>\n    <\/div>\n<\/div>                    <\/template>\n\n                    <div class=\"pdapp-cart-prices border-top w-100 d-flex gap-2 flex-column p-1\">\n    <div class=\"d-flex justify-content-between align-items-center w-100 gap-2\">\n        <h4 class=\"header-title fs-5 m-0 p-0\">{{ langs.topbar.price }}<\/h4>\n        <div class=\"pdapp-price d-flex gap-1 align-items-baseline\">\n            <span class=\"fs-3 text-success fw-bold\" v-html=\"priceFormat(getPrice.sale)\"><\/span>\n            <del class=\"fs-5 text-danger fw-bold\" v-if=\"getPrice.sale != getPrice.price\" v-html=\"priceFormat(getPrice.price)\"><\/del>\n        <\/div>\n    <\/div>\n    <div class=\"d-flex flex-column w-100 gap-1\" v-if=\"getPrice.discount != ''\">\n        <mark class=\"d-flex align-items-center gap-1 text-white bg-success py-0\"><i class=\"material-icons material-symbols-outlined fs-5\">info<\/i> <span v-html=\"getPrice.discount\"><\/span><\/mark>\n    <\/div>\n<\/div>                <\/div>\n                \n                <div class=\"modal-footer py-1 px-1 justify-content-between\">\n                    <template v-if=\"productCart.step == 0\">\n                        <button v-if=\"!responsiveLayout.showCart && modalCart.show\" type=\"button\" class=\"btn btn-light\" @click=\"modalCart.show = false\">{{ langs.cancel }}<\/button>\n                        <span v-else><\/span>\n                        <button type=\"button\" class=\"btn btn-primary\" @click=\"addListCart()\" :disabled=\"cartQuantity == 0 && cartQty == 0 || (productCart.team.items.length && cartQuantity < product.advanced.minQty)\">{{ langs.topbar.continue }}<\/button>\n                    <\/template>\n                    <template v-if=\"productCart.step == 1\">\n                        <button type=\"button\" class=\"btn btn-light\" @click=\"cartBack\">{{ langs.back }}<\/button>\n                        <button type=\"button\" class=\"btn btn-warning\" @click=\"addToCart('quote')\" :disabled=\"cartQty == 0 || cartQty < product.advanced.minQty || productCart.loading || waitDesign\" v-if=\"settings.layout.quote.allow && !settings.layout.addcart.allow\">\n                            <span v-if=\"productCart.loading\">{{ langs.topbar.sending_quote }}<\/span>\n                            <span v-else>{{ langs.topbar.request_a_quote }}<\/span>\n                        <\/button>\n                        <button type=\"button\" class=\"btn btn-primary\" @click=\"addToCart('cart')\" :disabled=\"cartQty == 0 || cartQty < product.advanced.minQty || productCart.loading || waitDesign\" v-if=\"settings.layout.addcart.allow\">\n                            <span v-if=\"productCart.loading\">{{ langs.topbar.adding_cart }}<\/span>\n                            <span v-else>{{ langs.topbar.add_to_cart }}<\/span>\n                        <\/button>\n                    <\/template>\n                <\/div>\n                <div class=\"d-flex flex-column gap-1 mx-1 pb-1\" v-if=\"productCart.step == 1 && settings.layout.quote.allow && settings.layout.addcart.allow\">\n                    <div class=\"pdapp-text-space d-flex w-100 justify-content-center align-items-center position-relative pdapp-h25 p-0 m-0\">\n                        <span class=\"sub-header m-0 text-uppercase\">{{ langs.options.or }}<\/span>\n                    <\/div>\n                    <button type=\"button\" class=\"btn btn-warning\" @click=\"addToCart('quote')\" :disabled=\"cartQty == 0 || cartQty < product.advanced.minQty || productCart.loading || waitDesign\">\n                        <span v-if=\"productCart.loading\">{{ langs.topbar.sending_quote }}<\/span>\n                        <span v-else>{{ langs.topbar.request_a_quote }}<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    <template v-else>\n        <div class=\"pdapp-cart-box d-flex flex-column gap-2 justify-content-start h-auto p-1 h-100\">\n            <div class=\"modal-title d-block w-100 placeholder-glow\">\n                <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n            <\/div>\n\n            <div class=\"pdapp-cart-variants d-flex flex-column align-items-center overflow-y-auto overflow-x-hidden gap-2\">\n                <div class=\"d-flex flex-column gap-2 placeholder-glow w-100 mb-1\">\n                    <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n                    <div class=\"bg-secondary placeholder w-100 pdapp-h70\"><\/div>\n                <\/div>\n\n                <div class=\"d-flex flex-column gap-2 placeholder-glow w-100 mb-1\">\n                    <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n                    <div class=\"bg-secondary placeholder w-100 pdapp-h30\"><\/div>\n                    <div class=\"bg-secondary placeholder w-100 pdapp-h30\"><\/div>\n                <\/div>\n\n                <div class=\"d-flex flex-column gap-2 placeholder-glow w-100\">\n                    <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h20\"><\/div>\n                    <div class=\"btn-group gap-2 w-100\">\n                        <div class=\"bg-secondary placeholder pdapp-h30 w-100 rounded-2\"><\/div>\n                        <div class=\"bg-secondary placeholder pdapp-h30 w-100 rounded-2\"><\/div>\n                        <div class=\"bg-secondary placeholder pdapp-h30 w-100 rounded-2\"><\/div>\n                        <div class=\"bg-secondary placeholder pdapp-h30 w-100 rounded-2\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"modal-footer d-flex gap-2 justify-content-between placeholder-glow mt-1\">\n                <div class=\"bg-secondary placeholder pdapp-w60 pdapp-h30 rounded-2\"><\/div>\n                <div class=\"bg-secondary placeholder pdapp-w80 pdapp-h30 rounded-2\"><\/div>\n            <\/div>\n        <\/div>\n    <\/template>\n    <div class=\"modal-backdrop fade show\" v-if=\"!responsiveLayout.showCart\" @click=\"modalCart.show = false\"><\/div>\n<\/div>                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"pdapp-app-extend\">\n            <div class=\"modal fade show d-block\" role=\"dialog\" v-if=\"modal.show\">\n    <div class=\"modal-dialog modal-dialog-scrollable\" :class=\"modal.size == undefined ? 'modal-md' : 'modal-'+ modal.size\">\n        <div class=\"modal-content\" :class=\"'modal-type-'+ modal.type\">\n            <div class=\"modal-header pt-1 pb-1\" v-if=\"modal.header\">\n                <h4 class=\"modal-title\" v-if=\"modal.title != ''\">{{ modal.title }}<\/h4>\n                <button class=\"btn btn-secondary btn-sm p-0 px-1 rounded-4\" v-if=\"modal.type == 'yourDesign'\" @click=\"openDesign('edit')\">{{ customerMail }}<\/button>\n                <button type=\"button\" class=\"btn p-0 m-0 pdapp-w30 pdapp-h30 text-danger ps-1\" @click=\"modal.show = false\">\n                    <i class=\"material-icons material-symbols-outlined fs-3\">close<\/i>\n                <\/button>\n            <\/div>\n\n            <template v-if=\"modal.type == 'crop'\">\n    <div class=\"modal-body\">\n        <div class=\"pdapp-cropbox\">\n            <div class=\"pdapp-croparea\">\n                <img class=\"pdapp-cropimage\" :src=\"modal.data.blob\" :data-width=\"modal.data.width\" :data-height=\"modal.data.height\" :data-newW=\"modal.data.newW\" :data-newH=\"modal.data.newH\">\n                <div class=\"pdapp-cropmask\" :style=\"'background-image: url('+ modal.data.blob +');'\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"modal-footer pb-1 pt-1 justify-content-between align-items-center gap-2\">\n        <div class=\"d-flex\">\n            <select v-if=\"!modal.replace\" class=\"form-select d-flex align-items-center justify-content-center\" v-model=\"modal.data.ratio\" @change=\"changeCropRatio\">\n                <option v-for=\"(ratio, rid) in listCropRatio\" :key=\"rid\" :value=\"ratio\">\n                    <template v-if=\"ratio == 'area_ratio' || ratio == 'free_ratio'\">{{ langs.options[ratio] }}<\/template>\n                    <template v-else>{{ ratio }}<\/template>\n                <\/option>\n            <\/select>\n        <\/div>\n        <div class=\"d-flex gap-1 m-0\">\n            <button v-if=\"!modal.replace\" type=\"button\" class=\"btn btn-light d-lg-block d-none\" @click=\"modal.show = false\">{{ langs.cancel }}<\/button>\n            <div class=\"d-flex gap-1 align-items-center\">\n                <button type=\"button\" class=\"btn btn-light\" @click=\"useOriginPhoto()\" v-if=\"!modal.replace\">{{ langs.options.use_origin_photo }}<\/button>\n                <button id=\"pdapp-crop-btn\" type=\"button\" class=\"btn btn-primary\" @click=\"cropPhoto()\" :disabled=\"waitDesign\">\n                    <span v-if=\"waitDesign\" class=\"spinner-border spinner-border-sm\"><\/span>\n                    <span v-else>{{ langs.options.crop }}<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n            <div class=\"modal-body\" v-if=\"modal.type == 'replacePhoto'\">\n    <template v-if=\"menuOptions.details[menuOptions.childID].clickUpload\">\n        <div class=\"pdapp-upload-box w-100\">\n            <label for=\"pdapp-upload-a-photo-replace\" class=\"btn btn-primary waves-effect m-0 w-100\" :class=\"uploading ? 'disabled' : ''\">\n                <span v-if=\"uploading\">\n                    <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"><\/span>\n                    {{ langs.options.uploading }}\n                <\/span>\n                <span v-else>\n                    <i class=\"material-icons material-symbols-outlined me-1\">cloud_upload<\/i>\n                    {{ langs.options.upload_a_photo }}\n                <\/span>\n            <\/label>\n        <\/div>\n\n        <div class=\"pdapp-text-space d-flex w-100 justify-content-center align-items-center position-relative pdapp-h25 p-0 m-0\" v-if=\"settings.layout.photo.allowLibrary && settings.general.photo.key != ''\">\n            <span class=\"sub-header m-0 text-uppercase\">{{ langs.options.or }}<\/span>\n        <\/div>\n    <\/template>\n\n    <div class=\"input-group input-group-merge mb-1\" v-if=\"settings.layout.photo.allowLibrary && settings.general.photo.key != ''\">\n        <span class=\"input-group-text bg-white ps-2 pe-1\">\n            <i class=\"material-icons material-symbols-outlined\">search<\/i>\n        <\/span>\n        <input type=\"text\" class=\"form-control border-start-0 ps-1 pe-1\" :class=\"listMenus.photo.search != '' ? 'border-end-0' : ''\" v-model=\"listMenus.photo.search\" :placeholder=\"langs.options.search_free_photos_on +' '+settings.general.photo.library\" @change=\"findPhotos()\">\n        <button type=\"button\" class=\"input-group-text bg-white text-danger ps-1 pe-2\" v-if=\"listMenus.photo.search != ''\" @click=\"listMenus.photo.search = '', findPhotos()\">\n            <i class=\"material-icons material-symbols-outlined\">close<\/i>\n        <\/button>\n    <\/div>\n    \n    <div class=\"pdapp-photo-libraries position-relative overflow-x-hidden w-100\" v-if=\"settings.layout.photo.allowLibrary && settings.general.photo.key != ''\">\n        <div class=\"pdapp-photo-list d-flex flex-wrap gap-1 justify-content-between w-100 m-0 p-0 pe-1\" v-if=\"0 < menuOptions.values.length\">\n            <div class=\"pdapp-photo-item d-flex align-items-center justify-content-between rounded-2 position-relative gap-1\" v-for=\"(photo, pid) in menuOptions.values\" :key=\"pid\" @click=\"addPhotoReplace(photo)\">\n                <div class=\"pdapp-thumbnail bg-light rounded-2 d-flex position-relative w-100\" :title=\"photo.name\">\n                    <img :src=\"photo.thumb\" :alt=\"photo.name\" class=\"pdapp-img-thumbnail mw-100 w-100 rounded-2 pe-0 me-0\">\n                <\/div>\n                <a class=\"pdapp-author position-absolute overflow-hidden\" :href=\"photo.user.url\" target=\"_blank\">{{ photo.user.name }}<\/a>\n            <\/div>\n\n            <div class=\"col-12 my-1\"><button type=\"button\" class=\"btn btn-sm btn-light m-auto\" @click=\"getPhotos()\">{{ langs.load_more }}<\/button><\/div>\n        <\/div>\n        <div class=\"w-100 text-danger text-center\" v-else>{{ langs.options.photo_not_found }}<\/div>\n        <div class=\"pdapp-loading-photos w-100 position-absolute\" v-if=\"listMenus.photo.loading == 1\">\n            <div class=\"pdapp-loading-mask\">\n                <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n            <div class=\"modal-body\" v-if=\"modal.type == 'preview'\">\n    <div class=\"pdapp-previewbox row mb-n2\">\n        <div class=\"col-12 col-xl-6 col-xxl-4\" v-for=\"(preview, pid) in modal.data\" :key=\"pid\">\n            <div class=\"card card-inverse border d-flex flex-column justify-content-center align-items-center bg-light mb-2\">\n                <img v-if=\"preview.src != ''\" class=\"card-img img-fluid\" :src=\"preview.src\" :alt=\"preview.title\">\n                <div class=\"placeholder-glow d-block card-img img-fluid\" v-else>\n                    <div class=\"bg-secondary placeholder pdapp-h200\"><\/div>\n                <\/div>\n                <div class=\"card-img-overlay p-2\">\n                    <h4 class=\"card-title text-primary\">{{ preview.title }}<\/h4>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n            <template v-if=\"modal.type == 'confirmMember'\">\n    <div class=\"modal-body\">\n        <div class=\"d-flex gap-2\">\n            <div class=\"w-100\">\n                <label class=\"form-label\">{{ langs.options.member_qty }}<\/label>\n                <select class=\"form-select\" v-model=\"modal.member\">\n                    <option value=\"0\" :selected=\"modal.member == 0\">{{ langs.options.select_member_qty }}<\/option>\n                    <option v-for=\"n in 15\" :key=\"n\" :value=\"n\" :selected=\"modal.member == n\">{{ n }}<\/option>\n                    <option :value=\"30 < modal.member ? modal.member : 31\" :selected=\"30 < modal.member\">{{ langs.options.custom_member_qty }}<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"pdapp-w80\" v-if=\"30 < modal.member\">\n                <label class=\"form-label\">&nbsp;<\/label>\n                <input type=\"number\" min=\"30\" step=\"1\" class=\"form-control pe-0\" v-model=\"modal.member\" :placeholder=\"langs.options.member_qty_desc\">\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"modal-footer pb-1 pt-1\">\n        <button type=\"button\" class=\"btn btn-light\" @click=\"modal.show = false\">{{ langs.options.cancel }}<\/button>\n        <button type=\"button\" class=\"btn btn-primary\" :disabled=\"modal.member == 0\" @click=\"setMembers\">{{ langs.topbar.continue }}<\/button>\n    <\/div>\n<\/template>\n\n<template v-if=\"modal.type == 'confirmTeam'\">\n    <div class=\"modal-body\">\n        <div class=\"table-responsive\">\n            <table class=\"table table-sm table-borderless mb-0\">\n                <thead class=\"table-light\">\n                    <tr>\n                        <th width=\"50px\" class=\"align-middle text-center\">#<\/th>\n                        <th v-if=\"modal.data[0].name != undefined\">{{ langs.options.name }}<\/th>\n                        <th v-if=\"modal.data[0].number != undefined\">{{ langs.options.number }}<\/th>\n                        <th width=\"80px\" class=\"align-middle text-center\">{{ langs.options.action }}<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr v-for=\"(team, tid) in modal.data\" :key=\"tid\">\n                        <td class=\"align-middle text-center\">{{ tid+1 }}<\/td>\n                        <td v-if=\"team.name != undefined\">\n                            <input type=\"text\" class=\"form-control form-control-sm\" v-model=\"team.name\" :tabindex=\"tid+1\" :placeholder=\"langs.options.name_desc\">\n                        <\/td>\n                        <td v-if=\"team.number != undefined\">\n                            <input type=\"text\" class=\"form-control form-control-sm\" v-model=\"team.number\" :tabindex=\"modal.data.length+tid+1\" :placeholder=\"langs.options.member_desc\">\n                        <\/td>\n                        <td class=\"align-middle text-center\">\n                            <button type=\"button\" class=\"btn btn-sm m-auto btn-danger tooltip-left\" :data-tooltip=\"langs.options.remove_member\" @click=\"removeMember(tid)\">\n                                <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n                            <\/div>\n                        <\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n        <button type=\"button\" class=\"btn btn-sm btn-primary waves-effect m-auto mt-1\" @click=\"modal.member++, setMembers()\">\n            <i class=\"material-icons material-symbols-outlined\">person_add<\/i>\n            {{ langs.options.add_more_member }}\n        <\/button>\n    <\/div>\n\n    <div class=\"modal-footer pb-1 pt-1 justify-content-between\">\n        <div class=\"d-flex\">\n            <button type=\"button\" class=\"btn btn-danger\" @click=\"resetMember\" v-if=\"listMenus.team.options.values.teams.length\">\n                <i class=\"material-icons material-symbols-outlined\">restart_alt<\/i>\n                {{ langs.reset }}\n            <\/button>\n        <\/div>\n        <div class=\"d-flex gap-2\">\n            <button type=\"button\" class=\"btn btn-light\" @click=\"modal.show = false\">{{ langs.options.cancel }}<\/button>\n            <button type=\"button\" class=\"btn btn-primary\" :disabled=\"checkApplyTeam\" @click=\"applyTeams\">{{ langs.apply }}<\/button>\n        <\/div>\n    <\/div>\n<\/template>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'message'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-1\" v-if=\"modal.data.type == 'warning'\">warning<\/i>\n        <i class=\"material-icons material-symbols-outlined text-success fs-1\" v-if=\"modal.data.type == 'success'\">task_alt<\/i>\n        <i class=\"material-icons material-symbols-outlined text-danger fs-1\" v-if=\"modal.data.type == 'error'\">error<\/i>\n        <h3>{{ modal.data.title }}<\/h3>\n        <p class=\"mt-1\">{{ modal.data.text }}<\/p>\n        <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n            <button type=\"button\" class=\"btn rounded-2\" :class=\"{'btn-warning':modal.data.type == 'warning', 'btn-success':modal.data.type == 'success', 'btn-danger':modal.data.type == 'error'}\" @click=\"modal.show = false\">{{ modal.data.btn }}<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n            <template v-if=\"modal.type == 'confirmEmail'\">\n    <div class=\"modal-body\">\n        <label class=\"form-label\">{{ langs.topbar.your_email }}<\/label>\n        <div class=\"input-group input-group-merge\">\n            <span class=\"input-group-text bg-white ps-2 pe-1\">\n                <i class=\"material-icons material-symbols-outlined\">mail<\/i>\n            <\/span>\n            <input type=\"email\" class=\"form-control\" v-model=\"customerMail\" :class=\"checkEmail(customerMail) != '' ? 'is-invalid' : ''\" :placeholder=\"langs.topbar.your_email_desc\">\n            <span class=\"invalid-feedback\" v-if=\"checkEmail(customerMail) != ''\">{{ checkEmail(customerMail) }}<\/span>\n        <\/div>\n    <\/div>\n\n    <div class=\"modal-footer pb-1 pt-1\">\n        <button type=\"button\" class=\"btn btn-light\" @click=\"modal.show = false\">{{ langs.options.cancel }}<\/button>\n        <button type=\"button\" class=\"btn btn-primary\" :disabled=\"checkEmail(customerMail) != ''\" @click=\"openDesign('reload')\">{{ langs.topbar.load_designs }}<\/button>\n    <\/div>\n<\/template>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'confirmBack'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-1\">warning<\/i>\n        <h3>{{ langs.toolbar.confirm_back_title }}<\/h3>\n        <p class=\"mt-1\">{{ langs.toolbar.confirm_back_desc }}<\/p>\n        <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n            <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"modal.show = false\">{{ langs.cancel }}<\/button>\n            <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"redirectBack\">{{ langs.yes }}<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'confirmCart'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-1\">warning<\/i>\n        <h3>{{ langs.toolbar.confirm_cart_title }}<\/h3>\n        <p class=\"mt-1\">{{ langs.toolbar.confirm_cart_desc }}<\/p>\n        <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n            <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"modal.show = false\">{{ langs.cancel }}<\/button>\n            <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"addToCart('cart', true)\">{{ langs.yes }}<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n            <template v-if=\"modal.type == 'confirmQuote'\">\n    <div class=\"modal-body\">\n        <div class=\"form-group mb-2\">\n            <label class=\"form-label fs-5\">{{ langs.topbar.your_phone }}<\/label>\n            <input type=\"text\" class=\"form-control form-control-sm\" :placeholder=\"langs.topbar.your_phone_desc\" v-model=\"productCart.phone\"\/>\n        <\/div>\n\n        <div class=\"form-group mb-2\">\n            <label class=\"form-label fs-5\">{{ langs.topbar.your_email }} <span class=\"text-danger ms-1\">*<\/span><\/label>\n            <input type=\"email\" class=\"form-control form-control-sm\" :class=\"checkEmail(productCart.email) != '' ? 'is-invalid' : ''\" :placeholder=\"langs.topbar.your_email_desc\" v-model=\"productCart.email\"\/>\n            <span class=\"invalid-feedback\" v-if=\"checkEmail(productCart.email) != ''\">{{ checkEmail(productCart.email) }}<\/span>\n        <\/div>\n\n        <div class=\"form-group mb-2\">\n            <label class=\"form-label fs-5\">{{ langs.topbar.your_note }}<\/label>\n            <textarea rows=\"2\" class=\"form-control form-control-sm\" :placeholder=\"langs.topbar.your_note\" v-model=\"productCart.note\"><\/textarea>\n        <\/div>\n\n        <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n            <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"modal.show = false\">{{ langs.cancel }}<\/button>\n            <button type=\"button\" class=\"btn btn-primary rounded-2\" :disabled=\"checkEmail(productCart.email) != ''\" @click=\"addToCart('quote', true, true)\">{{ langs.send }}<\/button>\n        <\/div>\n    <\/div>\n<\/template>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'confirmReset'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-1\">warning<\/i>\n        <h3>{{ langs.toolbar.confirm_reset_title }}<\/h3>\n        <p class=\"mt-1\">{{ langs.toolbar.confirm_reset_desc }}<\/p>\n        <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n            <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"modal.show = false\">{{ langs.cancel }}<\/button>\n            <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"startReset\">{{ langs.reset }}<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n            <template v-if=\"modal.type == 'saveDesign'\">\n    <div class=\"modal-body\">\n        <div class=\"pdapp-savedesign d-flex flex-column gap-2\">\n            <div class=\"w-100\">\n                <label class=\"form-label\">{{ langs.topbar.design_name }}<\/label>\n                <input type=\"text\" class=\"form-control\" v-model=\"modal.data.title\" :class=\"modal.data.title == '' ? 'is-invalid' : ''\" :placeholder=\"langs.topbar.title_desc\">\n            <\/div>\n            <div class=\"w-100\" v-if=\"customerMail == ''\">\n                <label class=\"form-label\">{{ langs.topbar.your_email }}<\/label>\n                <div class=\"input-group input-group-merge\">\n                    <span class=\"input-group-text bg-white ps-2 pe-1\">\n                        <i class=\"material-icons material-symbols-outlined\">mail<\/i>\n                    <\/span>\n                    <input type=\"email\" class=\"form-control\" :class=\"checkEmail(modal.data.email) != '' ? 'is-invalid' : ''\" v-model=\"modal.data.email\" :placeholder=\"langs.topbar.your_email_desc\">\n                    <span class=\"invalid-feedback\" v-if=\"checkEmail(modal.data.email) != ''\">{{ checkEmail(modal.data.email) }}<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"modal-footer pb-1 pt-1\">\n        <button type=\"button\" class=\"btn btn-light\" @click=\"modal.show = false\">{{ langs.cancel }}<\/button>\n        <button type=\"button\" class=\"btn btn-primary\" :disabled=\"modal.data.title == '' || checkEmail(modal.data.email) != '' || modal.data.loading || modal.data.render\" @click=\"saveDesign('')\" v-if=\"modal.type == 'saveDesign'\">\n            <span v-if=\"modal.data.loading\" class=\"spinner-border spinner-border-sm me-1\" role=\"status\" aria-hidden=\"true\"><\/span>\n            <template v-if=\"modal.data.render\">{{ langs.topbar.rendering }}<\/template>\n            <template v-else>{{ langs.topbar.save_design }}<\/template>\n        <\/button>\n    <\/div>\n<\/template>\n            <div class=\"modal-body\" v-if=\"modal.type == 'yourDesign'\">\n    <div class=\"pdapp-h120 w-100\" v-if=\"modal.loading\">\n        <div class=\"pdapp-loading-mask\">\n            <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n        <\/div>\n    <\/div>\n    <div class=\"row g-3\" v-if=\"!modal.loading &&  mydesigns != null\">\n        <div class=\"col-6 col-md-4 col-lg-3 col-xl-2\" v-for=\"(design, did) in mydesigns\" :key=\"did\">\n            <button type=\"button\" class=\"flex-column m-0 btn waves-effect waves-light gap-0 p-0 w-100 position-relative btn-light\" @click=\"loadDesign(design)\">\n                <span class=\"btn btn-danger btn-sm rounded-pill waves-effect waves-light position-absolute\" style=\"top: 3px; right: 3px;padding: 2px;\" @click.prevent.stop=\"removeDesign(design)\">\n                    <i class=\"material-icons material-symbols-outlined\">close<\/i>\n                <\/span>\n                <span class=\"d-flex flex-auto h-100\">\n                    <img :src=\"uploadUrl +'\/designs\/d'+ design.id +'\/'+ design.thumb\" class=\"card-img-top img-fluid m-auto pdapp-mh140\" :alt=\"design.title\">\n                <\/span>\n                <span class=\"pdapp-caption card-title text-primary p-1 m-0 fs-6 fw-medium\">{{ design.title }}<\/span>\n                <div class=\"pdapp-loading-mask pdapp-loading-page\" v-if=\"modal.loadDesign == design.id\">\n                    <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                <\/div>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n            <div class=\"pdapp-helpbox modal-body\" v-if=\"modal.type == 'help' && langs.help != undefined\">\n    <div class=\"pdapp-help-menu btn-group gap-1 w-100\" v-if=\"1 < helpMenus.length\">\n        <button type=\"button\" class=\"btn btn-sm rounded-2\" v-for=\"(menu, hid) in helpMenus\" :key=\"hid\" :class=\"menu.key == modal.tab ? 'btn-primary' : 'btn-light'\" @click=\"modal.tab = menu.key\" aria-selected=\"false\" tabindex=\"-1\" role=\"tab\">\n            <i class=\"material-icons material-symbols-outlined\">{{ menu.icon }}<\/i>\n            <span>{{ menu.name }}<\/span>\n        <\/button>\n    <\/div>\n    \n    <div class=\"pdapp-help-contents mt-2\">\n        <div class=\"tab-pane show active yt_video_content\" v-show=\"modal.tab == 'design'\">\n            <iframe id=\"yt_video_iframe\" width=\"100%\" height=\"auto\" frameborder=\"0\" :src=\"settings.general.guide\"><\/iframe>\n        <\/div>\n        <div class=\"table-responsive\" v-show=\"modal.tab == 'hotkey'\">\n            <table class=\"table table-sm mb-0\">\n                <thead class=\"table-light\">\n                    <tr>\n                        <th>{{ langs.help.hotkeys }}<\/th>\n                        <th>{{ langs.help.description }}<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr v-if=\"settings.layout.text.position\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">arrow_left_alt<\/i><\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.move_left_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.position\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">arrow_right_alt<\/i><\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.move_right_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.position\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">arrow_upward_alt<\/i><\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.move_top_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.position\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">arrow_left_alt<\/i><\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.move_bot_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.position\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">arrow_downward_alt<\/i><\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.move_bot_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.copy\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+h,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+h<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.help_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.copy\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+c,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+c<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.copy_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.bold\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+b,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+b<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_bold_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.italic\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+i,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+i<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_italic_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.underline\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+u,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+u<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_underline_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.strike\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+t,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+t<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_through_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.uppercase\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+d,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+d<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_uppercase_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.lock\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+l,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+l<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_lock_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.text.flip\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+f,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+f<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_flip_desc }}<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Delete,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+Backspace<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_delete_desc }}<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">{{ langs.help.text_select_item_btn }},<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">{{ langs.help.text_select_item_mouse }}<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_select_item_desc }}<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+a,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+a<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_select_all_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.ruler.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+r<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_ruler_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.preview.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+p<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_preview_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.fullscreen.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+Shift+f<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_fullscreen_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.reset.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+Shift+r<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_reset_desc }}<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+Shift+b,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+Shift+b<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_back_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.saveDesign.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+s,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+s<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_save_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.saveDesign.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+o,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+o<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_open_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.download.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+Shift+d,<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_download_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.quote.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+Shift+q,<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_quote_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.addcart.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+Shift+c,<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_addcart_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.zoom.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+z+<i class=\"material-icons material-symbols-outlined fw-bold\">arrow_upward_alt<\/i>,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">{{ langs.help.text_zoomin_wheel }}<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_zoomin_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.zoom.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+z+<i class=\"material-icons material-symbols-outlined fw-bold\">arrow_downward_alt<\/i>,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">{{ langs.help.text_zoomout_wheel }}<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_zoomout_desc }}<\/td>\n                    <\/tr>\n                    <tr v-if=\"settings.layout.undo.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+z,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+z,<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_undo_desc }}<\/td>\n                    <\/tr>\n                    <tr class=\"border-0\" v-if=\"settings.layout.undo.allow\">\n                        <td>\n                            <span class=\"pdapp-hotkeys d-flex gap-1 align-items-center fw-bold\">\n                                <span class=\"pdapp-hotkey d-flex align-items-center\">Ctrl+y,<\/span>\n                                <span class=\"pdapp-hotkey d-flex align-items-center\"><i class=\"material-icons material-symbols-outlined fw-bold\">keyboard_command_key<\/i>+Shift+z,<\/span>\n                            <\/span>\n                        <\/td>\n                        <td>{{ langs.help.text_redo_desc }}<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/div>\n    <\/div>\n<\/div>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'confirmReload'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-1\">refresh<\/i>\n        <h3>Reload page!<\/h3>\n        <p class=\"mt-1\">Your token expired. Please reload page and try design again<\/p>\n        <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n            <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"reloadPage\">OK<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'confirmRemoveImg' || modal.type == 'confirmRemoveDesign'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-1\">warning<\/i>\n        <h3 v-if=\"modal.type == 'confirmRemoveImg'\">{{ langs.toolbar.confirm_remove_file }}<\/h3>\n        <h3 v-else>{{ langs.confirm_remove_title }}<\/h3>\n        <p class=\"mt-1\" v-if=\"modal.type == 'confirmRemoveImg'\">{{ langs.toolbar.confirm_remove_file_desc }}<\/p>\n        <p class=\"mt-1\" v-else>{{ langs.confirm_remove_desc }}<\/p>\n        <div class=\"d-flex justify-content-center w-100 gap-2\">\n            <button type=\"button\" class=\"btn btn-warning rounded-2\" v-if=\"modal.type == 'confirmRemoveImg'\" @click=\"removeFileIssues\">{{ langs.ok }}<\/button>\n            <template v-else>\n                <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"backToDesign\">{{ langs.close }}<\/button>\n                <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"startRemoveDesign\">{{ langs.delete }}<\/button>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/div>\n            <div class=\"pdapp-downloadbox modal-body\" v-if=\"modal.type == 'download'\">\n    <div class=\"position-relative\">\n        <div class=\"row\" v-if=\"Object.keys(designsData).length || Object.keys(downloadWithMask).length\">\n            <template v-for=\"(vdata, vid) in designsData\">\n                <template v-for=\"(adata, aid) in vdata\">\n                    <div class=\"pdapp-dowload-item mb-2 position-relative\" :class=\"Object.keys(designsData).length + 2 < Object.keys(vdata).length ? 'col-12 col-md-6 col-xl-4 col-xxl-3' : 'col-sm-'+ 12\/(Object.keys(designsData).length + Object.keys(vdata).length)\" v-if=\"adata.svg != null\" :key=\"aid\">\n                        <div class=\"card card-inverse mb-2 border d-flex flex-column justify-content-center align-items-center bg-light\" v-if=\"adata.svg != ''\">\n                            <img class=\"card-img img-fluid\" :src=\"adata.svg\" :alt=\"adata.view +' - '+ adata.area\">\n                            <div class=\"card-img-overlay p-1\">\n                                <div class=\"d-flex flex-column justify-content-between h-100\">\n                                    <h5 class=\"header-title fs-6 m-0 p-0\">{{ adata.view }} - {{ adata.area }}<\/h5>\n                                    <div class=\"btn-group\">\n                                        <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-top-right\" :data-tooltip=\"langs.topbar.click_to_download\" :title=\"langs.topbar.click_to_download\" @click=\"startDownload('png', vid, aid)\" v-if=\"settings.general.download.type.includes('png')\">PNG<\/button>\n                                        <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-top-right\" :data-tooltip=\"langs.topbar.click_to_download\" :title=\"langs.topbar.click_to_download\" @click=\"startDownload('pdf', vid, aid)\" v-if=\"settings.general.download.type.includes('pdf')\">PDF<\/button>\n                                        <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-top-left\" :data-tooltip=\"langs.topbar.click_to_download\" :title=\"langs.topbar.click_to_download\" @click=\"startDownload('svg', vid, aid)\" v-if=\"settings.general.download.type.includes('svg')\">SVG<\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"pdapp-download-design placeholder-glow\" v-else><span class=\"placeholder pdapp-h120 bg-secondary d-block border rounded-2\"><\/span><\/div>\n                    <\/div>\n                <\/template>\n            <\/template>\n            <template v-for=\"(svg, aid) in downloadWithMask\">\n                <div class=\"pdapp-dowload-item mb-2 position-relative\" :class=\"Object.keys(designsData).length + 2 < Object.keys(designsData[aid]).length ? 'col-12 col-md-6 col-xl-4 col-xxl-3' : 'col-sm-'+ 12\/(Object.keys(designsData).length + Object.keys(designsData[aid]).length)\" v-if=\"svg != ''\" :key=\"aid\">\n                    <div class=\"card card-inverse mb-2 border d-flex flex-column justify-content-center align-items-center bg-light\">\n                        <img class=\"card-img img-fluid\" :src=\"svg\">\n                        <div class=\"card-img-overlay p-1\">\n                            <div class=\"d-flex flex-column justify-content-between h-100\">\n                                <h5 class=\"header-title fs-6 m-0 p-0\">Design - {{ aid }}<\/h5>\n                                <div class=\"btn-group\">\n                                    <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-top-right\" :data-tooltip=\"langs.topbar.click_to_download\" :title=\"langs.topbar.click_to_download\" @click=\"startDownloadMask('png', aid)\" v-if=\"settings.general.download.type.includes('png')\">PNG<\/button>\n                                    <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-top-right\" :data-tooltip=\"langs.topbar.click_to_download\" :title=\"langs.topbar.click_to_download\" @click=\"startDownloadMask('pdf', aid)\" v-if=\"settings.general.download.type.includes('pdf')\">PDF<\/button>\n                                    <button type=\"button\" class=\"btn btn-sm btn-primary tooltip-top-left\" :data-tooltip=\"langs.topbar.click_to_download\" :title=\"langs.topbar.click_to_download\" @click=\"startDownloadMask('svg', aid)\" v-if=\"settings.general.download.type.includes('svg')\">SVG<\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/template>\n        <\/div>\n\n        <template v-if=\"designsTeam.length\">\n            <div class=\"w-100 border-top pt-1 mt-1\">\n                <div class=\"header-title fs-6 m-0 pb-1\">{{ langs.topbar.team_members }}<\/div>\n                <div class=\"row\">\n                    <template v-for=\"(team, tid) in designsTeam\">\n                        <div v-if=\"team.svg == undefined || team.svg.length == 0\" class=\"placeholder-glow\"><span class=\"placeholder\"><\/span><\/div>\n                        <div v-else class=\"pdapp-dowload-item mb-2 position-relative col-12 col-md-6 col-xl-4 col-xxl-3\" v-for=\"(svg, sid) in team.svg\" :key=\"sid\">\n                            <div class=\"card card-inverse mb-2 border d-flex flex-column justify-content-center align-items-center bg-light\">\n                                <img class=\"card-img img-fluid\" :src=\"svg.svg\" alt=\"Team\">\n                                <div class=\"card-img-overlay p-1\">\n                                    <div class=\"d-flex flex-column justify-content-between h-100\">\n                                        <h5 class=\"header-title fs-6 m-0 p-0 d-flex flex-column\"><small v-if=\"team.name != undefined\">{{ team.name }}<\/small><small v-if=\"team.number != undefined\">{{ team.number }}<\/small><\/h5>\n                                        <div class=\"btn-group\">\n                                            <button type=\"button\" class=\"btn btn-sm btn-primary\" :title=\"langs.topbar.click_to_download\" @click=\"startDownload('png', tid, sid, 'team')\" v-if=\"settings.general.download.type.includes('png')\">PNG<\/button>\n                                            <button type=\"button\" class=\"btn btn-sm btn-primary\" :title=\"langs.topbar.click_to_download\" @click=\"startDownload('pdf', tid, sid, 'team')\" v-if=\"settings.general.download.type.includes('pdf')\">PDF<\/button>\n                                            <button type=\"button\" class=\"btn btn-sm btn-primary\" :title=\"langs.topbar.click_to_download\" @click=\"startDownload('svg', tid, sid, 'team')\" v-if=\"settings.general.download.type.includes('svg')\">SVG<\/button>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"pdapp-loading-mask\" v-if=\"svg.loading\">\n                                    <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/template>\n                <\/div>\n            <\/div>\n        <\/template>\n        <div class=\"pdapp-loading-mask pdapp-loading-page\" v-if=\"modal.loading\">\n            <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'confirmView'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-1\">warning<\/i>\n        <template v-if=\"modal.addview\">\n            <h3>{{ langs.confirm_add_view }}<\/h3>\n            <p class=\"mt-1\">{{ langs.confirm_add_view_desc }}<\/p>\n            <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n                <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"addDesign(modal.data)\">{{ langs.no }}<\/button>\n                <button type=\"button\" class=\"btn btn-primary rounded-2\" @click=\"addCustomView\">{{ langs.yes }}<\/button>\n            <\/div>\n        <\/template>\n        <template v-else>\n            <h3>{{ langs.confirm_cannot_add_view }}<\/h3>\n            <p class=\"mt-1\">{{ langs.confirm_cannot_add_view_desc }}<\/p>\n            <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n                <button type=\"button\" class=\"btn btn-primary rounded-2\" @click=\"addCustomView\">{{ langs.ok }}<\/button>\n            <\/div>\n        <\/template>\n    <\/div>\n<\/div>\n            <div class=\"modal-body p-4\" v-if=\"modal.type == 'confirmUpload'\">\n    <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n        <i class=\"material-icons material-symbols-outlined text-warning fs-3r\">warning<\/i>\n        <h3>{{ confirmUpload.title }}<\/h3>\n        <div class=\"form-check mt-1\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"file_confirm_checkbox\" v-model=\"confirmUpload.check\">\n            <label class=\"form-check-label\" for=\"file_confirm_checkbox\">{{ confirmUpload.desc }} <a v-if=\"confirmUpload.term != '' && confirmUpload.termUrl != ''\" class=\"text-primary\" :href=\"confirmUpload.termUrl\" target=\"_blank\">{{ confirmUpload.term }}<\/a><\/label>\n        <\/div>\n        <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n            <button type=\"button\" class=\"btn btn-light rounded-2\" @click=\"modal.show = false; confirmUpload.check = false\">{{ langs.cancel }}<\/button>\n            <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"pdappConfirmUpload\" :disabled=\"confirmUpload.check != true\">{{ langs.upload }}<\/button>\n        <\/div>\n    <\/div>\n<\/div>        <\/div>\n    <\/div>\n    <div v-if=\"modal.header\" class=\"modal-backdrop fade show\" @click=\"modal.show = false\"><\/div>\n    <div v-else class=\"modal-backdrop fade show\"><\/div>\n<\/div><div class=\"modal fade show\" role=\"dialog\" style=\"display: block;\" v-if=\"warningBack\">\n    <div class=\"modal-dialog modal-md\">\n        <div class=\"modal-content\">\n            <div class=\"modal-body p-4\">\n                <div class=\"d-flex justify-content-center align-items-center flex-column gap-2 text-center\">\n                    <i class=\"material-icons material-symbols-outlined text-warning fs-3r\">warning<\/i>\n                    <h3>{{ language.confirm_back_title }}<\/h3>\n                    <p class=\"mt-1\">{{ language.confirm_back_desc }}<\/p>\n                    <div class=\"d-flex gap-1 justify-content-center w-100 btn-group\">\n                        <button type=\"button\" class=\"btn btn-warning rounded-2\" @click=\"redirectHomepage\">{{ language.confirm_back_btn }}<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"modal-backdrop fade show\"><\/div>\n<\/div><div v-if=\"toast.show\" class=\"toast show fade justify-content-between d-flex gap-1 align-items-center text-white\" :class=\"toast.type == 'error' ? 'bg-danger' : 'bg-' + toast.type\" role=\"alert\">\n    <div class=\"toast-body\">{{ toast.text }}<\/div>\n    <button class=\"btn btn-sm text-white\" @click=\"toast.show = false\">\n        <i class=\"material-icons material-symbols-outlined\">delete<\/i>\n    <\/button>\n<\/div>\n<div class=\"pdapp-loading-mask pdapp-loading-page\" v-if=\"loadingPage\">\n    <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n<\/div><div id=\"pdapp-test-text\" class=\"invisible\"><\/div><button v-if=\"settings.layout != undefined && settings.layout.help.allow\" type=\"button\" class=\"pdapp-btn-help d-lg-flex d-none btn btn-info btn-sm rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 tooltip-right\" :data-tooltip=\"langs.help.guide\" @click=\"showHelp\">\n    <i class=\"material-icons material-symbols-outlined\">help<\/i>\n<\/button>        <\/div>\n    <\/div>\n    <div id=\"pdapp-loading-page\" class=\"pdapp-loading-mask pdapp-loading-page\">\n        <div class=\"pdapp-spinner\"><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><\/div>\n    <\/div>\n\n    <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-88164","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/adamericagroup.com\/shop\/wp-json\/wp\/v2\/pages\/88164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adamericagroup.com\/shop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adamericagroup.com\/shop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adamericagroup.com\/shop\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adamericagroup.com\/shop\/wp-json\/wp\/v2\/comments?post=88164"}],"version-history":[{"count":0,"href":"https:\/\/adamericagroup.com\/shop\/wp-json\/wp\/v2\/pages\/88164\/revisions"}],"wp:attachment":[{"href":"https:\/\/adamericagroup.com\/shop\/wp-json\/wp\/v2\/media?parent=88164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}