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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="d-flex align-items-center gap-1 justify-content-between w-100">
    <div class="d-flex align-items-center gap-1" v-if="tempModalPX.zoom != undefined">
        <div class="input-group input-group-sm d-flex align-items-center justify-content-center tooltip-right" :data-tooltip="langs.temp.template_size">
            <div class="input-group-text ps-1 pe-1">W</div>
            <input type="number" min="1" step="1" class="form-control" :value="tempModal.data.size.width" @change="updatePrintSize($event, 'width')" :placeholder="langs.temp.size_desc">
        </div>
        <div class="input-group input-group-sm d-flex align-items-center justify-content-center tooltip-right" :data-tooltip="langs.temp.template_size">
            <div class="input-group-text ps-1 pe-1">H</div>
            <input type="number" min="1" step="1" class="form-control" :value="tempModal.data.size.height" @change="updatePrintSize($event, 'height')" :placeholder="langs.temp.folder_name_desc">
        </div>
        <i class="material-icons material-symbols-outlined">link</i>
        <select class="form-select form-select-sm d-flex align-items-center justify-content-center tooltip-right" :data-tooltip="langs.temp.template_unit" @change="updatePrintSize($event, 'unit')">
            <option v-for="(unit, idx) in tempModal.unit" :key="idx" :value="unit" :selected="tempModal.data.size.unit == unit">{{ unit.toUpperCase() }}</option>
        </select>
        <button type="button" class="btn btn-sm btn-light tooltip-right border" :data-tooltip="langs.temp.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-right" :data-tooltip="langs.temp.reset_design" @click="resetAllDesign">
            <i class="material-icons material-symbols-outlined">restart_alt</i>
        </button>
    </div>
    <div class="d-flex gap-2">
        <label type="button" class="btn btn-light btn-sm waves-effect waves-light d-flex gap-1 border" for="pdapp-import-template">
            <i class="material-icons material-symbols-outlined">upload</i>
            <span class="d-lg-block d-none">{{ langs.temp.import }}</span>
            <input type="file" id="pdapp-import-template" class="d-none" accept=".pda" @change="importTemplate($event)">
        </label>
        <button @click="startDownload('')" type="button" class="btn btn-info btn-sm waves-effect waves-light d-flex gap-1">
            <i class="material-icons material-symbols-outlined">download</i>
            <span class="d-lg-block d-none">{{ langs.temp.export }}</span>
        </button>
        <button type="button" class="btn btn-sm btn-primary d-flex gap-1 align-items-center" v-if="tempModal.data.zoom != undefined" @click="openTempModal">
            <i class="material-icons material-symbols-outlined">save</i>
            <span class="d-lg-block d-none">{{ langs.save }}</span>
        </button>
    </div>
</div>