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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div id="pdapp-design-box" :data-screen="screenSize" v-if="productBoxStyle.length">
    <div class="pdapp-viewport" v-for="(view, vid) in productDataPX.views" :class="vid == productActive.view ? 'active' : ''" :key="vid" :style="productBoxStyle[vid].viewPort">
        <div class="pdapp-selecto-ref"></div>
        <div class="pdapp-viewport-area">
            <img :data-color="getColor(background.id)" :id="'pdapp-view-'+ view.id +'-bg-'+ bkey" :data-target="'bg-'+ bkey" v-for="(background, bkey) in view.backgrounds" :key="bkey" :style="productBoxStyle[vid] != undefined ? productBoxStyle[vid].backgrounds[bkey] : ''" :width="background.width" :height="background.height" :data-view="background.id" :data-color="productColors[background.id]" class="pdapp-target pdapp-product-img" :src="showImg(background.image, pageAdd.data.id)">
            <img v-if="view.mask.image != undefined" :id="'pdapp-view-'+ view.id +'-mask-layer'" data-target="mask-layer" :style="productBoxStyle[vid] != undefined && productBoxStyle[vid].mask != undefined ? productBoxStyle[vid].mask : ''" :width="view.mask.width" :height="view.mask.height" class="pdapp-target pdapp-mask-img" :src="showImg(view.mask.image, pageAdd.data.id)">

            <template v-for="(layer, lid) in view.layers">
                <div :id="'pdapp-view-'+ view.id +'-lay-'+ lid" :data-target="'lay-'+ lid" class="pdapp-target pdapp-area-layer" :class="lid != 0 ? 'pdapp-lock-resize' : ''" :style="productBoxStyle[vid] != undefined ? productBoxStyle[vid].layers[lid] : ''" :key="lid">
                    <span class="pdapp-caption-box">
                        <span class="pdapp-caption">{{ toUnitVal(layer.width) }}x{{ toUnitVal(layer.height) }}{{ pageAdd.data.unit.type.toUpperCase() }}</span>
                    </span>
                    <img v-if="layer.mask != ''" class="pdapp-area-mask-img" :src="showImg(layer.mask, pageAdd.data.id)">
                </div>
            </template>
        </div>
    </div>
</div>