<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Template
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="menuOptions.childID != null && menuOptions.details[menuOptions.childID].title != undefined">
    <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="">
        <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' : ''">
            <i class="material-icons material-symbols-outlined">edit_note</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.edit_text }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">font_download</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.change_font }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">format_size</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.font_size }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">format_color_text</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.color }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">format_letter_spacing</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.spacing }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">type_specimen</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.outline }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">gradient</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.transparency }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">format_shapes</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.format }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">format_align_justify</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.align_text }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">open_with</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.move_text }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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' : ''">
            <i class="material-icons material-symbols-outlined">more_horiz</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.more }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

        <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()">
            <i class="material-icons material-symbols-outlined">delete</i>
            <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.delete }}</span>
        </button>
    </div>

    <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="">
        <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('')">
            <i class="material-icons material-symbols-outlined close-menu-hor">keyboard_backspace</i>
            <i class="material-icons material-symbols-outlined close-menu-ver">south</i>
        </button>

        <div class="pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden">
            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'edit'">
                <div class="p-1 w-100">
                    <input type="text" class="form-control" :value="menuOptions.details[menuOptions.childID].text" @input="menuOptions.details[menuOptions.childID].text = $event.target.value; updateText()">
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'font'">
                <div class="p-1 d-flex flex-column gap-2 w-100">
                    <div class="input-group input-group-merge">
                        <span class="input-group-text bg-white ps-2 pe-1">
                            <i class="material-icons material-symbols-outlined">search</i>
                        </span>
                        <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">
                        <button type="button" class="input-group-text bg-white text-danger ps-1 pe-2" v-if="fontLibrary.find != ''" @click="fontLibrary.find = ''">
                            <i class="material-icons material-symbols-outlined">close</i>
                        </button>
                    </div>
                    <div class="pdapp-font-categories d-flex gap-2 mw-100 overflow-x-auto overflow-y-hidden flex-shrink-0 pb-1">
                        <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>
                        <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>
                    </div>
                    <div class="pdapp-font-list btn-group flex-wrap gap-2 w-100 overflow-x-hidden overflow-y-auto">
                        <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'">
                            <img :src="pluginUrl +'assets/images/fonts/'+ font.title.replaceAll(' ', '') +'.png'" :alt="font.title" class="mh-100 mw-100">
                        </button>
                        <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>
                    </div>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'size'">
                <div class="p-1 d-flex flex-column gap-2 w-100">
                    <input type="number" min="6" step="1" class="form-control" v-model="menuOptions.details[menuOptions.childID].fontSize" @change="updateTextSize('')">
                    <div class="pdapp-size-list btn-group d-flex flex-wrap gap-2 w-100 overflow-y-auto overflow-x-hidden">
                        <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>
                    </div>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'color'">
                <div class="p-2 d-flex flex-column gap-1 w-100 overflow-x-hidden overflow-y-auto pdapp-hide-palette">
                    <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.fill_style }}</h5>
                    <div class="pdapp-text-fillstyle d-flex w-100 gap-2">
                        <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">
                            <span v-if="menuOptions.details[menuOptions.childID].colorType == 'normal'" class="d-block w-100 h-100"></span>
                        </button>
                        <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)'">
                            <span v-if="menuOptions.details[menuOptions.childID].colorType == 'hor'" class="d-block w-100 h-100"></span>
                        </button>
                        <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)'">
                            <span v-if="menuOptions.details[menuOptions.childID].colorType == 'ver'" class="d-block w-100 h-100"></span>
                        </button>
                        <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)'">
                            <span v-if="menuOptions.details[menuOptions.childID].colorType == 'radial'" class="d-block w-100 h-100"></span>
                        </button>
                    </div>
                    <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>
                    <input type="text" id="pdapp-text-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].color" @input="updateTextStyle('color')">
                </div>
            </template>
            
            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'spacing'">
                <div class="p-1 d-flex gap-2 align-items-center w-100">
                    <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')">
                    <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')">
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'outline'">
                <div class="p-1 d-flex gap-2 flex-column pdapp-hide-palette w-100">
                    <input type="text" id="pdapp-outline-colorpicker" class="form-control" v-model="menuOptions.details[menuOptions.childID].stroke" @input="updateTextStyle('outline')">
                    <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>
                    <div class="d-flex gap-2 align-items-center">
                        <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')">
                        <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')">
                    </div>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'transparency'">
                <div class="p-1 d-flex gap-2 align-items-center w-100">
                    <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')">
                    <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')">
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'format'">
                <div class="p-1 btn-group flex-wrap gap-2 w-100">
                    <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'">
                        <i class="material-icons material-symbols-outlined">format_bold</i>
                    </button>
                    <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'">
                        <i class="material-icons material-symbols-outlined">format_italic</i>
                    </button>
                    <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'">
                        <i class="material-icons material-symbols-outlined">format_underlined</i>
                    </button>
                    <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'">
                        <i class="material-icons material-symbols-outlined">format_strikethrough</i>
                    </button>
                    <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'">
                        <i class="material-icons material-symbols-outlined">match_case</i>
                    </button>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'align'">
                <div class="p-1 btn-group flex-wrap gap-2 w-100">
                    <button type="button" class="btn btn-light rounded-2" @click="alignText('top')">
                        <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignText('right')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignText('bot')">
                        <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignText('left')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignText('centerAll')">
                        <i class="material-icons material-symbols-outlined">align_flex_center</i>
                    </button>
                    
                    <button type="button" class="btn btn-light rounded-2" @click="alignText('middle')">
                        <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignText('center')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                    </button>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'move'">
                <div class="p-1 btn-group flex-wrap gap-2 w-100">
                    <button type="button" class="btn btn-light rounded-2" @click="moveText('top')">
                        <i class="material-icons material-symbols-outlined">expand_less</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="moveText('bot')">
                        <i class="material-icons material-symbols-outlined">expand_more</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="moveText('left')">
                        <i class="material-icons material-symbols-outlined">chevron_left</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="moveText('right')">
                        <i class="material-icons material-symbols-outlined">chevron_right</i>
                    </button>
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'more'">
                <div class="p-1 btn-group flex-wrap gap-2 w-100">
                    <button type="button" class="btn btn-light rounded-2 pdapp-btn-copy" v-if="showSettingOption(!menuOptions.details[menuOptions.childID].textLock, ['copy'], 'text')" @click="copyText()">
                        <i class="material-icons material-symbols-outlined">content_copy</i>
                    </button>
                    <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'">
                        <i class="material-icons material-symbols-outlined" v-if="menuOptions.details[menuOptions.childID].textLock">lock</i>
                        <i class="material-icons material-symbols-outlined" v-else>lock_open</i>
                    </button>
                    <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'">
                        <i class="material-icons material-symbols-outlined">multiple_stop</i>
                    </button>
                </div>
            </template>
        </div>
    </div>
</template>

<template v-else>
    <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.style }}</h5>
    <div class="pdapp-text-group row g-2 mb-2 mt-0 align-items-center">
        <div class="col-12 col-sm-6 my-1">
            <button type="button" class="btn btn-light pdapp-h40 w-100" @click="addNewText(settings.general.text.heading)" v-if="settings.general.text.heading != undefined">
                <img :src="pluginUrl +'assets/images/texts/heading.png'" class="mh-100 mw-100" :alt="settings.general.text.heading.text">
            </button>
        </div>

        <div class="col-12 col-sm-6 my-1">
            <button type="button" class="btn btn-light pdapp-h30 w-100" @click="addNewText(settings.general.text.body)" v-if="settings.general.text.body != undefined">
                <img :src="pluginUrl +'assets/images/texts/body.png'" class="mh-100 mw-100" :alt="settings.general.text.body.text">
            </button>
        </div>
    </div>

    <template v-if="listTextTemp.temps.length || listMenus.text.search != '' || loadTextTemp">
        <h5 class="header-title fs-6 m-0 p-0">{{ langs.options.text_templates }}</h5>
        <div class="pdapp-text-group row g-2 mt-0 align-items-center pdapp-text-templates">
            <template v-if="loadTextTemp">
                <div class="pdapp-h120 col-12 w-100 position-relative">
                    <div class="pdapp-loading-mask">
                        <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>
                    </div>
                </div>
            </template>
            <template v-else>
                <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' : ''">
                    <span class="input-group-text bg-white" :class="1200 <= responsiveLayout.width ? 'ps-2 pe-1' : 'ps-1 pe-0'">
                        <i class="material-icons material-symbols-outlined">search</i>
                    </span>
                    <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">
                    <button type="button" class="input-group-text bg-white text-danger ps-1 pe-2" v-if="listMenus.text.search != ''" @click="listMenus.text.search = ''">
                        <i class="material-icons material-symbols-outlined">close</i>
                    </button>
                </div>
                
                <div class="col-12 col-sm-6 col-md-4" v-for="(text, tid) in listTextTemp.temps" :key="tid">
                    <button type="button" class="btn btn-light pdapp-h40 w-100" @click="addTextTemplate(text)">
                        <img :src="pluginUrl +'assets/images/texts/'+ text.thumb" class="mh-100 mw-100" :alt="text.text">
                    </button>
                </div>
                <div class="col-12" v-if="listTextTemp.temps.length < listTextTemp.total">
                    <button type="button" class="btn btn-light w-100" @click="listMenus.text.page.paged++">{{ langs.load_more }}</button>
                </div>
            </template>
        </div>
    </template>
</template>