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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="w-100 mb-1" v-if="listDatas.folders.length">
    <h5 class="mb-1">{{ langs.temp.folders }}</h5>
    <div class="row g-2">
        <div class="col-xl-2 col-md-3 col-sm-4 col-6" v-for="(folder, fid) in listDatas.folders" :key="fid">
            <div class="card card-inverse text-white position-relative m-0 pdapp-folder rounded-2" @click.stop.prevent="openFolder(folder)">
                <img :src="showImg(folder.thumb, 'tempf')" :alt="getTitle(folder.title)" class="card-img img-fluid rounded-2">
                <div class="card-img-overlay p-1 d-flex flex-column gap-0 text-center justify-content-center align-items-center">
                    <h5 class="card-title fs-3 fw-bold m-0 text-hidden">{{ getTitle(folder.title) }}</h5>
                    <span class="fs-6" v-if="childFolders(folder.id) != 0">({{ childFolders(folder.id) }})</span>
                </div>
                <div class="btn btn-light btn-sm waves-effect waves-light pdapp-folder-options" @click.stop.prevent="tempOption.folder = tempOption.folder == folder.id ? '' : folder.id">
                    <i class="material-icons material-symbols-outlined">more_horiz</i>
                    <div class="dropdown-menu dropdown-menu-end" :class="tempOption.folder == folder.id ? 'show' : ''">
                        <button type="button" class="dropdown-item" @click.stop.prevent="openFolder(folder)">
                            <i class="material-icons material-symbols-outlined">folder_open</i>
                            {{ langs.open }}
                        </button>
                        <button type="button" class="dropdown-item" @click.stop.prevent="editFolder(folder)">
                            <i class="material-icons material-symbols-outlined">edit</i>
                            {{ langs.edit }}
                        </button>
                        <button type="button" class="dropdown-item" @click.stop.prevent="confirmMoveTemp(folder.id, 'folder')">
                            <i class="material-icons material-symbols-outlined">drive_file_move</i>
                            {{ langs.move }}
                        </button>
                        <button type="button" class="dropdown-item text-danger" @click.stop.prevent="confirmRemove(folder.id, 'folder')">
                            <i class="material-icons material-symbols-outlined">delete</i>
                            {{ langs.remove }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>