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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="pdapp-studio-botbar d-flex justify-content-between align-items-center gap-2 py-1">
    <template v-if="isLoaded">
        <div class="pdapp-botbar-item d-flex gap-2 position-relative">
            <button type="button" id="pdapp-rulerbar" v-if="settings.layout.ruler.allow" class="btn btn-sm tooltip-top d-none d-lg-block" :class="showRuler ? 'active btn-primary' : 'btn-light border'" :data-tooltip="langs.toolbar.ruler" @click="toggleShowRuler">
                <i class="material-icons material-symbols-outlined">straighten</i>
            </button>
            <button type="button" class="btn btn-sm btn-light tooltip-top border" :data-tooltip="langs.toolbar.preview" @click="previewScreen" v-if="settings.layout.preview.allow">
                <i class="material-icons material-symbols-outlined">visibility</i>
            </button>
            <div class="d-flex align-items-center gap-1" v-if="settings.layout.zoom.allow">
                <i class="material-icons material-symbols-outlined d-none d-xl-block">search</i>
                <input type="range" step="2" min="0" max="300" v-model="product.unit.zoom" class="form-range d-none d-lg-block" :style="'background-size: '+ product.unit.zoom*100/300 +'% 100%;'" @input="zoomLimit(10)">
                <div class="btn btn-sm tooltip-top position-relative pdapp-btn-zoom d-none d-lg-block" :class="dropdownMenu == 'zoom' ? 'btn-primary' : 'btn-light border'" @click="dropdownMenu == 'zoom' ? dropdownMenu = '' : dropdownMenu = 'zoom'" :data-tooltip="langs.toolbar.zoom">
                    <i class="material-icons material-symbols-outlined d-block d-xl-none">search</i>
                    <span class="d-none d-xl-block">{{ product.unit.zoom }}%</span>
                    <span class="dropdown-arrow-top"></span>
                    <div class="pdapp-botbar-options position-absolute card shadow-lg list-group mb-0" v-if="dropdownMenu == 'zoom'">
                        <button type="button" class="list-group-item list-group-item-action p-1 pdapp-w100 text-center" v-for="(zoom, zid) in listZoom" :key="zid" :class="product.unit.zoom == zoom ? 'text-white bg-primary' : ''" @click="product.unit.zoom = zoom">{{ zoom }}%</button>
                    </div>
                </div>
                <input type="range" step="2" min="0" max="200" v-model="product.unit.zoom" class="form-range d-block d-lg-none form-range-mobile" :style="'background-size: '+ product.unit.zoom*100/200 +'% 100%;'" @input="zoomLimit(20)">
            </div>
            <button type="button" class="btn btn-sm tooltip-top d-none d-xl-block" :class="isFullScreen ? 'btn-primary' : 'btn-light border'" :data-tooltip="isFullScreen ? langs.toolbar.exit_expand_fullscreen : langs.toolbar.expand_fullscreen" @click="toggleFullScreen" v-if="settings.layout.fullscreen.allow">
                <i class="material-icons material-symbols-outlined" v-if="isFullScreen">fullscreen_exit</i>
                <i class="material-icons material-symbols-outlined" v-else>fullscreen</i>
            </button>
        </div>
        
        <div class="pdapp-botbar-item pdapp-area-viewport position-relative">
            <div class="btn-group" v-if="1 < productDataPX.views.length || (product.advanced != undefined && product.advanced.viewcopy != undefined && product.advanced.customview != undefined && product.advanced.customview)">
                <template v-for="(view, vid) in productDataPX.views">
                    <button type="button" :key="vid" v-if="(activeProduct.view-2 == vid && activeProduct.view == productDataPX.views.length-1) || activeProduct.view-1 == vid || activeProduct.view == vid || activeProduct.view+1 == vid || (activeProduct.view == 0 && vid-2 == 0)" class="btn btn-sm tooltip-top-left" :data-tooltip="langs.toolbar.click_to_select +' '+ view.title" :class="activeProduct.view == vid ? 'btn-primary' : 'btn-light border'" :disabled="loadaddview" @click.stop.prevent="changeProductView(vid)">
                        <span>{{ view.title }}</span><span v-if="0 < customViewNumber[vid]"> {{ customViewNumber[vid] }}</span>
                        <span class="dropdown-arrow-top" v-if="productDataPX.views != undefined && productDataPX.views[activeProduct.view] != undefined && 1 < productDataPX.views[activeProduct.view].layers.length"></span>
                        <span class="btn btn-sm p-0 rounded-pill d-flex justify-content-center align-items-center btn-danger btn-view-close" @click.stop.prevent="removeView(vid)" v-if="activeProduct.view != vid && view.type != undefined && view.type == 'addmore'">
                            <span class="material-symbols-outlined">close</span>
                        </span>
                    </button>
                    <button type="button" v-if="product.advanced != undefined && product.advanced.viewcopy != undefined && ((product.advanced.viewcopy < getViewInd && getViewInd == vid) || (getViewInd <= product.advanced.viewcopy && product.advanced.viewcopy == vid)) && product.advanced.customview != undefined && product.advanced.customview && 0 < product.advanced.maxview" class="btn btn-sm tooltip-top-left btn-info px-1 d-flex align-items-center justify-content-center" :data-tooltip="langs.toolbar.add_more_view" :disabled="loadaddview" :class="loadaddview ? 'disabled' : ''" @click="addMoreView">
                        <span class="material-symbols-outlined" v-if="loadaddview">more_horiz</span>
                        <span class="material-symbols-outlined" v-else>add</span>
                    </button>
                </template>
            </div>
            
            <div class="pdapp-area-viewbox btn-group shadow-lg" v-if="productDataPX.views != undefined && productDataPX.views[activeProduct.view] != undefined && 1 < productDataPX.views[activeProduct.view].layers.length">
                <template v-for="(layer, lid) in productDataPX.views[activeProduct.view].layers">
                    <button type="button" :key="lid" v-if="activeProduct.area-1 == lid || activeProduct.area == lid || activeProduct.area+1 == lid" class="btn btn-sm tooltip-top-left" :disabled="loadaddview" :data-tooltip="langs.toolbar.click_to_select +' '+ layer.title" :class="activeProduct.area == lid ? 'btn-primary' : 'btn-light border'" @click="changeProductView(lid, 'area')">
                        <span>{{ layer.title }}</span>
                    </button>
                </template>
            </div>
        </div>
    </template>
    <template v-else>
        <div class="pdapp-botbar-item d-flex gap-2 position-relative placeholder-glow">
            <div class="pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2 d-none d-lg-block"></div>
            <div class="pdapp-undo-btn d-flex gap-1">
                <div class="pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2"></div>
                <div class="pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2"></div>
            </div>
            <div class="pdapp-w40 pdapp-h30 placeholder bg-secondary rounded-2"></div>
            <div class="d-flex align-items-center gap-1 d-lg-none">
                <div class="pdapp-w30 pdapp-h30 d-none d-lg-block placeholder bg-secondary rounded-2"></div>
                <div class="pdapp-w80 placeholder d-none d-lg-block bg-secondary"></div>
                <div class="pdapp-w40 pdapp-h30 placeholder bg-secondary rounded-2"></div>
            </div>
            <div class="pdapp-w50 pdapp-h30 placeholder bg-secondary rounded-2 d-none d-xl-block"></div>
        </div>
        
        <div class="pdapp-botbar-item d-flex align-items-center btn-group placeholder-glow pdapp-area-viewport">
            <div class="pdapp-w50 pdapp-h30 placeholder btn bg-secondary"></div>
            <div class="pdapp-w50 pdapp-h30 placeholder btn bg-secondary"></div>
        </div>
    </template>
</div>