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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="modal.type == 'uploadShape'">
    <div class="modal-body">
        <div class="mb-0" v-if="uploadShapes.length">
            <div class="table-responsive">
                <table class="table table-centered table-borderless table-hover table-nowrap mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="border-0" style="width: 200px;">{{ langs.art.thumbnail }}</th>
                            <th class="border-0">{{ langs.setting.name }}</th>
                            <th class="border-0" style="width: 80px;">{{ langs.action }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(shape, uid) in uploadShapes" :key="uid">
                            <td class="text-center">
                                <img v-if="shape.thumb != ''" :src="shape.thumb" alt="shape file" style="max-height: 60px; max-width: 200px">
                                <div class="progress progress-lg mt-1 mb-0" v-if="shape.error == ''">
                                    <div class="progress-bar bg-success" role="progressbar" :style="'width: '+ shape.uploaded +'%;'" :aria-valuenow="shape.uploaded" aria-valuemin="0" aria-valuemax="100">{{ shape.uploaded }}%</div>
                                </div>
                                <small class="d-block text-danger" v-else>{{ shape.error }}</small>
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm" v-model="uploadShapes[uid].title">
                            </td>
                            <td>
                                <a href="javascript:void(0);" class="action-icon text-danger" @click="uploadShapes.splice(uid, 1)" v-if="modal.saving == false && shape.uploaded != 100">
                                    <i class="material-icons material-symbols-outlined">delete</i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal-footer py-1" v-if="uploadShapes.length > 0">
        <button type="button" class="btn btn-light border" @click="modal.show = false">{{ langs.close }}</button>
        <button type="button" class="btn btn-primary" :disabled="loading == 'uploadshape'" @click="uploadShapeFile">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="loading == 'uploadshape'"></span>
            {{ langs.setting.import }}
        </button>
    </div>
</template>