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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<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">
    <ol class="breadcrumb mb-1" v-if="1 < breadcrumbs.length">
        <li class="breadcrumb-item" v-for="(bread, bid) in breadcrumbs" :class="bread.to !== '' ? 'active' : ''" :key="bid">
            <template v-if="bread.to === ''">{{ bread.title }}</template>
            <a v-else href="javascript: void(0);" class="text-blue" @click="openFolder(bread.to)">{{ bread.title }}</a>
        </li>
    </ol>
    <template v-if="listMenus.template.options.values.loadFolder">
        <div class="pdapp-folders w-100 mt-1">
            <div class="row g-2">
                <div class="col-6 my-1 placeholder-glow">
                    <div class="pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative"></div>
                </div>
                <div class="col-6 my-1 placeholder-glow">
                    <div class="pdapp-folder pdapp-h80 w-100 mb-2 placeholder bg-secondary rounded-2 position-relative"></div>
                </div>
            </div>
        </div>
    </template>
    <template v-else>
        <div class="pdapp-folders w-100 mt-1" v-if="tempFolders[listMenus.template.options.values.activeFolder] != undefined && tempFolders[listMenus.template.options.values.activeFolder].length">
            <div class="row g-2">
                <div class="col-6 my-1" v-for="(folder, fid) in tempFolders[listMenus.template.options.values.activeFolder]" :key="fid">
                    <div class="card card-inverse text-white position-relative m-0 pdapp-folder rounded-2" @click="openFolder(folder.id)">
                        <img :src="showImg(folder.thumb, folder.id, 'tempf')" :alt="getTitle(folder.title)" class="card-img img-fluid rounded-2">
                        <div class="card-img-overlay p-1 d-flex flex-column gap-0 text-center justify-content-center align-items-center">
                            <h5 class="card-title fs-5 fw-bold m-0 text-hidden">{{ getTitle(folder.title) }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <div class="input-group input-group-merge" v-if="listTemplates.temps.length || listMenus.template.options.values.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.template.options.values.search != '' ? 'border-end-0' : ''" v-model="listMenus.template.options.values.search" :placeholder="langs.options.search_templates">
        <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 = ''">
            <i class="material-icons material-symbols-outlined">close</i>
        </button>
    </div>

    <template v-if="listMenus.template.options.values.loadTemp == true">
        <div class="pdapp-h120 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="pdapp-templates row g-2" v-if="listTemplates.temps.length">
            <div class="col-6 my-1" v-for="(temp, tid) in listTemplates.temps" :key="tid">
                <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)">
                    <span class="d-flex flex-auto h-100">
                        <img :src="showImg(temp.thumb, temp.id, 'temp')" :alt="getTitle(temp.title)" class="card-img-top img-fluid m-auto pdapp-mh140">
                    </span>
                    <span class="pdapp-caption card-title text-primary p-1 m-0 fs-6">{{ getTitle(temp.title) }}</span>
                    <div class="pdapp-loading-mask" v-if="listMenus.template.options.values.loadTemp == temp.id">
                        <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>
                </button>
            </div>
            <div class="col-12" v-if="listTemplates.temps.length < listTemplates.total">
                <button type="button" class="btn btn-light position-relative w-100" @click="listMenus.template.options.values.page.paged++">{{ langs.load_more }}</button>
            </div>
        </div>
        <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>
    </template>
</div>