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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="pdapp-menu-options-content d-flex flex-column align-items-start gap-2 px-1 overflow-y-auto overflow-x-hidden">
    <div class="pdapp-photo-group btn-group position-relative border-bottom w-100 d-flex align-items-center pb-2 gap-2 flex-wrap rounded-0" v-if="showGroupOption">
        <button type="button" class="btn btn-light tooltip-bottom rounded-2 pdapp-group-type-color" :data-tooltip="langs.options.edit_color" @click.stop.prevent="dropdownGroup('color')" :class="groupItem.active == 'color' ? 'btn-primary' : 'btn-light'" v-if="(settings.layout.photo.crop || settings.layout.photo.copy || settings.layout.photo.lock) && groupItem.colors.length">
            <i class="material-icons material-symbols-outlined">palette</i>
            <span class="dropdown-arrow-bot"></span>
        </button>

        <button type="button" class="btn btn-light tooltip-bottom rounded-2 pdapp-btn-copy" :data-tooltip="langs.options.copy_group" @click.stop.prevent="copyGroup()">
            <i class="material-icons material-symbols-outlined">content_copy</i>
        </button>
        
        <button type="button" class="btn tooltip-bottom rounded-2" :data-tooltip="groupItem.isGroup ? langs.options.un_group : langs.options.group" @click="setGroup()" :class="groupItem.isGroup ? 'btn-primary' : 'btn-light'">
            <i class="material-icons material-symbols-outlined" v-if="groupItem.isGroup">ad_group_off</i>
            <i class="material-icons material-symbols-outlined" v-else>ad_group</i>
        </button>
    </div>

    <div class="pdapp-photo-group position-relative border-bottom w-100 d-flex flex-column pb-2 gap-2 rounded-0">
        <div class="w-100 btn-group gap-2 flex-wrap">
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.align_top" @click="alignGroup('top')">
                <i class="material-icons material-symbols-outlined">align_vertical_top</i>
            </button>
            
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.align_right" @click="alignGroup('right')">
                <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
            </button>
            
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.align_bot" @click="alignGroup('bot')">
                <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
            </button>
            
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.align_left" @click="alignGroup('left')">
                <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
            </button>
            
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.align_center_all" @click="alignGroup('centerAll')">
                <i class="material-icons material-symbols-outlined">align_flex_center</i>
            </button>

            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.align_middle" @click="alignGroup('middle')">
                <i class="material-icons material-symbols-outlined">align_vertical_center</i>
            </button>
                
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.align_center" @click="alignGroup('center')">
                <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
            </button>
        </div>

        <div class="w-100 btn-group gap-2 flex-wrap">
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.move_top" @click="moveGroup('top')">
                <i class="material-icons material-symbols-outlined">expand_less</i>
            </button>
            
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.move_bot" @click="moveGroup('bot')">
                <i class="material-icons material-symbols-outlined">expand_more</i>
            </button>
            
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.move_left" @click="moveGroup('left')">
                <i class="material-icons material-symbols-outlined">chevron_left</i>
            </button>
            
            <button type="button" class="btn tooltip-top rounded-2 btn-light" :data-tooltip="langs.options.move_right" @click="moveGroup('right')">
                <i class="material-icons material-symbols-outlined">chevron_right</i>
            </button>
        </div>
    </div>

    <button type="button" class="btn btn-danger tooltip-top rounded-2 w-100 mb-2" :data-tooltip="langs.options.delete_group" @click="deleteGroup">
        <i class="material-icons material-symbols-outlined">delete</i>
    </button>
</div>

<div class="pdapp-menu-options-dropdown position-absolute card shadow-lg p-0 m-0 border" :class="'pdapp-group-dropdown-'+ groupItem.active" v-if="groupItem.active != undefined && groupItem.active != ''" @click.stop.prevent="">
    <button type="button" class="btn btn-sm btn-danger rounded-pill waves-effect waves-light pdapp-w30 pdapp-h30 p-0 btn-close-dropdown" @click="groupItem.active = ''">
        <i class="material-icons material-symbols-outlined">close</i>
    </button>

    <div class="pdapp-dropdown-box pdapp-hide-palette d-flex gap-1 p-2 flex-wrap w-100 overflow-y-auto overflow-x-hidden" v-if="groupItem.active == 'color' && groupItem.colors.length">
        <input v-for="(color, cid) in groupItem.colors" :key="cid" type="text" class="pdapp-edit-color" class="form-control" :data-color="color" v-model="color" style="display: none;">
    </div>
</div>