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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="modal-body" v-if="modal.type == 'yourDesign'">
    <div class="pdapp-h120 w-100" v-if="modal.loading">
        <div class="pdapp-loading-mask">
            <div class="pdapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
        </div>
    </div>
    <div class="row g-3" v-if="!modal.loading &&  mydesigns != null">
        <div class="col-6 col-md-4 col-lg-3 col-xl-2" v-for="(design, did) in mydesigns" :key="did">
            <button type="button" class="flex-column m-0 btn waves-effect waves-light gap-0 p-0 w-100 position-relative btn-light" @click="loadDesign(design)">
                <span class="btn btn-danger btn-sm rounded-pill waves-effect waves-light position-absolute" style="top: 3px; right: 3px;padding: 2px;" @click.prevent.stop="removeDesign(design)">
                    <i class="material-icons material-symbols-outlined">close</i>
                </span>
                <span class="d-flex flex-auto h-100">
                    <img :src="uploadUrl +'/designs/d'+ design.id +'/'+ design.thumb" class="card-img-top img-fluid m-auto pdapp-mh140" :alt="design.title">
                </span>
                <span class="pdapp-caption card-title text-primary p-1 m-0 fs-6 fw-medium">{{ design.title }}</span>
                <div class="pdapp-loading-mask pdapp-loading-page" v-if="modal.loadDesign == design.id">
                    <div class="pdapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                </div>
            </button>
        </div>
    </div>
</div>