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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div id="pdapp-studio" class="d-flex position-relative overflow-hidden" data-width="0" data-height="0">
    <template v-if="isLoaded">
        <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">
            <template v-for="(productView, vid) in productDataPX.views">
                <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">
                    <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] : ''">
                        <img preserveAspectRatio="none" :data-view="background.id" :data-color="productColors[background.id]" class="pdapp-product-img" :src="showImg(background.image, productDataPX.id, 'product')">
                    </div>

                    <div v-if="productView.mask != undefined && productView.mask.image != undefined" class="pdapp-mask-img" :style="productBoxStyle[vid].mask != undefined ? productBoxStyle[vid].mask : ''" @click="activeMask">
                        <img preserveAspectRatio="none" class="pdapp-product-img" :src="showImg(productView.mask.image, productDataPX.id, 'product')">
                    </div>

                    <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)">
                        <span class="pdapp-border-area" :style="productBoxStyle[vid].borders[lid]"></span>
                        <div class="pdapp-text-arc" :style="'width: '+(layer.width*svgViewboxRatio)+'px; height: '+(layer.height*svgViewboxRatio)+'px;'"></div>
                        <div class="pdapp-selecto-ref"></div>
                        <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>
                        <img v-if="layer.mask != ''" class="pdapp-area-mask-img" :src="showImg(layer.mask, productDataPX.id, 'product')">
                    </div>
                </div>
            </template>
        </div>
        <div class="pdapp-tool-group d-none align-items-center position-absolute gap-1">
            <button type="button" class="btn btn-sm btn-light tooltip-top border" :data-tooltip="langs.toolbar.select_all_design" @click="selectAllGroup">
                <i class="material-icons material-symbols-outlined">select_all</i>
            </button>
            <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">
                <i class="material-icons material-symbols-outlined">restart_alt</i>
            </button>
        </div>
    </template>
    <template v-else>
        <div class="pdapp-studio-area d-inline-block position-relative placeholder-glow">
            <div class="pdapp-viewport bg-secondary placeholder"></div>
        </div>
    </template>
</div>