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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="tempModal.modal.type == 'crop'">
    <div class="modal-body">
        <div class="pdapp-cropbox">
            <div class="pdapp-croparea">
                <img class="pdapp-cropimage" :src="tempModal.modal.data.blob" :data-width="tempModal.modal.data.width" :data-height="tempModal.modal.data.height" :data-newW="tempModal.modal.data.newW" :data-newH="tempModal.modal.data.newH">
                <div class="pdapp-cropmask" :style="'background-image: url('+ tempModal.modal.data.blob +');'"></div>
            </div>
        </div>
    </div>
    
    <div class="modal-footer justify-content-between align-items-center gap-2">
        <div class="d-flex">
            <select v-if="!tempModal.modal.replace" class="form-select d-flex align-items-center justify-content-center pdapp-w150" v-model="tempModal.modal.data.ratio" @change="changeCropRatio">
                <option v-for="(ratio, rid) in listCropRatio" :key="rid" :value="ratio">{{ ratio == 'area_ratio' || ratio == 'free_ratio' ? langs.options[ratio] : ratio }}</option>
            </select>
        </div>
        <div class="d-flex gap-1 m-0">
            <button v-if="!tempModal.modal.replace" type="button" class="btn btn-light d-lg-block d-none" @click="tempModal.modal.show = false">{{ langs.cancel }}</button>
            <div class="d-flex gap-1 align-items-center">
                <button type="button" class="btn btn-light" @click="useOriginPhoto()" v-if="!tempModal.modal.replace">{{ langs.options.use_origin_photo }}</button>
                <button id="pdapp-crop-btn" type="button" class="btn btn-primary" @click="cropPhoto()">{{ langs.options.crop }}</button>
            </div>
        </div>
    </div>
</template>