<?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 px-1 overflow-y-auto overflow-x-hidden w-100">
    <div class="pdapp-layer-list d-flex flex-column gap-2 w-100" v-if="menuOptions.values.length > 0">
        <button type="button" class="pdapp-layer-item btn btn-light rounded-2 justify-content-between p-0 gap-1 pdapp-h50 w-100" v-for="(layer, lid) in menuOptions.values" :key="lid" @click.stop.prevent="setActiveLayer(layer)">
            <span class="pdapp-layer-text px-1 text-hidden" v-if="layer.type == 'text'" :title="layer.type">{{ layer.value }}</span>
            <div class="pdapp-layer-thumbnail w-100" v-else :title="layer.type">
                <img :src="layer.value" :alt="layer.type" class="pdapp-img pdapp-h50 px-1 rounded-2">
            </div>
            <div class="pdapp-layer-groupbtn d-flex flex-column gap-1 justify-content-center align-items-center me-1" v-if="menuOptions.values.length > 1">
                <span class="btn btn-sm btn-secondary pdapp-w20 pdapp-h20" @click.stop.prevent="moveLayer(layer.id, 'up')"><i class="material-icons material-symbols-outlined">expand_less</i></span>
                <span class="btn btn-sm btn-secondary pdapp-w20 pdapp-h20" @click.stop.prevent="moveLayer(layer.id, 'down')"><i class="material-icons material-symbols-outlined">expand_more</i></span>
            </div>
        </button>
    </div>
    <div class="w-100 text-danger text-center" v-else>{{ langs.options.layer_empty }}</div>
</div>