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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="pdapp-menus list-group border-none gap-1 overflow-y-auto overflow-x-hidden w-100 h-100 pe-1" @click.stop.prevent="">
    <button type="button" v-if="settings.layout.photo.crop || settings.layout.photo.copy || settings.layout.photo.lock || (settings.layout.photo.flip && menuOptions.details[menuOptions.childID].editColor == false)" class="list-group-item pdapp-group-type-color list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownGroup('color')" :class="groupItem.active == 'color' ? 'active' : ''">
        <i class="material-icons material-symbols-outlined">palette</i>
        <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.edit_color }}</span>
        <span class="dropdown-arrow-right"></span>
    </button>

    <button type="button" class="list-group-item pdapp-group-type-move list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownGroup('move')" :class="groupItem.active == 'move' ? 'active' : ''">
        <i class="material-icons material-symbols-outlined">open_with</i>
        <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.move_text }}</span>
        <span class="dropdown-arrow-right"></span>
    </button>

    <button type="button" class="list-group-item pdapp-group-type-more list-group-item-action btn position-relative pdapp-pointer d-flex align-items-center rounded-2 border-0 p-2 d-flex flex-column" @click="dropdownGroup('more')" :class="groupItem.active == 'more' ? 'active' : ''">
        <i class="material-icons material-symbols-outlined">more_horiz</i>
        <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.more }}</span>
        <span class="dropdown-arrow-right"></span>
    </button>

    <button type="button" class="list-group-item list-group-item-action btn d-flex align-items-center rounded-2 p-2 d-flex flex-column bg-danger text-white border-0" @click="deleteGroup()">
        <i class="material-icons material-symbols-outlined">delete</i>
        <span class="text-uppercase pdapp-caption d-md-block d-none">{{ langs.options.delete_group }}</span>
    </button>
</div>

<div class="pdapp-menu-options position-absolute card m-0 shadow-lg 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="dropdownGroup('')">
        <i class="material-icons material-symbols-outlined close-menu-hor">keyboard_backspace</i>
        <i class="material-icons material-symbols-outlined close-menu-ver">south</i>
    </button>

    <div class="pdapp-dropdown-box w-100 overflow-y-auto overflow-x-hidden">
        <template v-if="groupItem.active == 'color'">
            <div class="p-2 d-flex flex-column gap-1 w-100 overflow-x-hidden overflow-y-auto">
                <div class="pdapp-hide-palette d-flex flex-column gap-2">
                    <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>
        </template>

        <template v-if="groupItem.active == 'align'">
            <div class="p-1 btn-group flex-wrap gap-2 w-100">
                <button type="button" class="btn btn-light rounded-2" @click="alignGroup('top')">
                    <i class="material-icons material-symbols-outlined">align_vertical_top</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="alignGroup('right')">
                    <i class="material-icons material-symbols-outlined">align_horizontal_right</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="alignGroup('bot')">
                    <i class="material-icons material-symbols-outlined">align_vertical_bottom</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="alignGroup('left')">
                    <i class="material-icons material-symbols-outlined">align_horizontal_left</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="alignGroup('centerAll')">
                    <i class="material-icons material-symbols-outlined">align_flex_center</i>
                </button>
                
                <button type="button" class="btn btn-light rounded-2" @click="alignGroup('middle')">
                    <i class="material-icons material-symbols-outlined">align_vertical_center</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="alignGroup('center')">
                    <i class="material-icons material-symbols-outlined">align_horizontal_center</i>
                </button>
            </div>
        </template>

        <template v-if="groupItem.active == 'move'">
            <div class="p-1 btn-group flex-wrap gap-2 w-100">
                <button type="button" class="btn btn-light rounded-2" @click="moveGroup('top')">
                    <i class="material-icons material-symbols-outlined">expand_less</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="moveGroup('bot')">
                    <i class="material-icons material-symbols-outlined">expand_more</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="moveGroup('left')">
                    <i class="material-icons material-symbols-outlined">chevron_left</i>
                </button>
                <button type="button" class="btn btn-light rounded-2" @click="moveGroup('right')">
                    <i class="material-icons material-symbols-outlined">chevron_right</i>
                </button>
            </div>
        </template>

        <template v-if="groupItem.active == 'more'">
            <div class="p-1 btn-group flex-wrap gap-2 w-100">
                <button type="button" class="btn btn-light rounded-2 pdapp-btn-copy" @click="copyGroup()">
                    <i class="material-icons material-symbols-outlined">content_copy</i>
                </button>
                <button type="button" class="btn rounded-2" @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>
        </template>
    </div>
</div>