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

        <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' : ''">
            <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_photo }}</span>
            <span class="dropdown-arrow-right"></span>
        </button>

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

        <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' : ''">
            <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].photoLock, ['delete'], 'art')" @click="deleteArtwork()">
            <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-photo-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="dropdownPhoto('')">
            <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 == '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="updatePhotoStyle('transparency')">
                    <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')">
                </div>
            </template>

            <template v-if="menuOptions.details[menuOptions.childID].dropdown == 'color' && menuOptions.details[menuOptions.childID].colors.length">
                <div class="p-1 d-flex gap-2 align-items-center w-100 pdapp-hide-palette flex-wrap">
                    <div class="pdapp-color-item-box w-100" v-for="(color, cid) in menuOptions.details[menuOptions.childID].colors" :key="cid">
                        <input :id="'pdapp-edit-colorpicker-'+ cid" type="text" class="pdapp-edit-color" class="form-control" :data-color="color" v-model="color" style="display: none;">
                        <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>
                    </div>
                </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="alignPhoto('top')">
                        <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('right')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('bot')">
                        <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('left')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('centerAll')">
                        <i class="material-icons material-symbols-outlined">align_flex_center</i>
                    </button>
                    
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('middle')">
                        <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="alignPhoto('center')">
                        <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                    </button>
                    <button type="button" class="btn rounded-2 btn-light" @click="fitPhotoInside()">
                        <i class="material-icons material-symbols-outlined">fit_page</i>
                    </button>
                    
                    <button type="button" class="btn rounded-2 btn-light" @click="fitPhotoOutside()">
                        <i class="material-icons material-symbols-outlined">fit_screen</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="movePhoto('top')">
                        <i class="material-icons material-symbols-outlined">expand_less</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="movePhoto('bot')">
                        <i class="material-icons material-symbols-outlined">expand_more</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="movePhoto('left')">
                        <i class="material-icons material-symbols-outlined">chevron_left</i>
                    </button>
                    <button type="button" class="btn btn-light rounded-2" @click="movePhoto('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].photoLock, ['copy'], 'art')" @click="copyArtwork()">
                        <i class="material-icons material-symbols-outlined">content_copy</i>
                    </button>
                        
                    <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'">
                        <i class="material-icons material-symbols-outlined" v-if="menuOptions.details[menuOptions.childID].photoLock">lock</i>
                        <i class="material-icons material-symbols-outlined" v-else>lock_open</i>
                    </button>
                    
                    <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'">
                        <i class="material-icons material-symbols-outlined">multiple_stop</i>
                    </button>
                </div>
            </template>
        </div>
    </div>
</template>

<template v-else>
    <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);" @click="openFolder(bread.to)">{{ bread.title }}</a>
        </li>
    </ol>
    <template v-if="listMenus.artwork.options.values.loadFolder">
        <div class="pdapp-folders w-100 mt-n1 mb-1">
            <div class="row g-2 mt-0">
                <div class="col-6 col-sm-4 col-md-2 placeholder-glow my-1">
                    <div class="pdapp-folder pdapp-h80 w-100 placeholder bg-secondary rounded-2 position-relative"></div>
                </div>
                <div class="col-6 col-sm-4 col-md-2 placeholder-glow my-1">
                    <div class="pdapp-folder pdapp-h80 w-100 placeholder bg-secondary rounded-2 position-relative"></div>
                </div>
            </div>
        </div>
    </template>
    <template v-else>
        <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">
            <div class="row g-2 mt-0">
                <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">
                    <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, 'artf')" :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-4 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="listArtworks.arts.length || listMenus.artwork.options.values.search != ''">
        <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="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">
        <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 = ''">
            <i class="material-icons material-symbols-outlined">close</i>
        </button>
    </div>

    <template v-if="listMenus.artwork.options.values.loadArt == 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-artworks row g-2 mt-0" v-if="listArtworks.arts.length">
            <div class="col-6 col-sm-4 col-md-3 my-1" v-for="(art, aid) in listArtworks.arts" :key="aid">
                <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)">
                    <span class="d-flex flex-auto h-100">
                        <img :src="showImg(art.thumb, art.id, 'art')" :alt="getTitle(art.title)" class="card-img-top img-fluid m-auto">
                    </span>
                    <span class="pdapp-caption card-title text-primary p-1 m-0 fs-6">{{ getTitle(art.title) }}</span>
                    <div class="pdapp-loading-mask pdapp-loading-page" v-if="listMenus.artwork.options.values.loadArt == art.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="listArtworks.arts.length < listArtworks.total">
                <button type="button" class="btn btn-light position-relative w-100" @click="listMenus.artwork.options.values.page.paged++">{{ langs.load_more }}</button>
            </div>
        </div>
        <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>
    </template>
</template>