<?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 p-1">
    <div class="pdapp-botbar-item d-flex gap-2 position-relative">
        <button type="button" id="pdapp-rulerbar" class="btn btn-sm tooltip-top d-none d-lg-block" :class="showRuler ? 'active btn-primary' : 'btn-light border'" :data-tooltip="langs.temp.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.temp.preview" @click="previewScreen">
            <i class="material-icons material-symbols-outlined">visibility</i>
        </button>
        <div class="d-flex align-items-center gap-1" v-if="tempModal.data.zoom != undefined">
            <i class="material-icons material-symbols-outlined d-none d-xl-block">search</i>
            <input type="range" step="2" min="10" max="300" v-model="tempModal.data.zoom" class="form-range d-none d-lg-block" :style="'background-size: '+ tempModal.data.zoom*100/300 +'% 100%;'">
            <div class="btn btn-sm tooltip-top position-relative pdapp-btn-zoom" :class="dropdownMenu == 'zoom' ? 'btn-primary' : 'btn-light border'" @click="dropdownMenu == 'zoom' ? dropdownMenu = '' : dropdownMenu = 'zoom'" :data-tooltip="langs.temp.zoom">
                <i class="material-icons material-symbols-outlined d-block d-xl-none">search</i>
                <span class="d-none d-xl-block">{{ tempModal.data.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 btn-light text-center" v-for="(zoom, zid) in listZoom" :key="zid" :class="tempModal.data.zoom == zoom ? 'btn-primary' : 'btn-light'" @click="tempModal.data.zoom = zoom">{{ zoom }}%</button>
                </div>
            </div>
        </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.temp.exit_expand_fullscreen : langs.temp.expand_fullscreen" @click="toggleFullScreen">
            <i class="material-icons material-symbols-outlined">{{ isFullScreen ? 'fullscreen_exit' : 'fullscreen' }}</i>
        </button>
    </div>
    
    <button type="button" class="btn btn-sm btn-danger d-flex gap-1 align-items-center" @click="closeModalTemp">
        <i class="material-icons material-symbols-outlined">close</i>
        <span class="d-lg-block d-none">{{ langs.close }}</span>
    </button>
</div>