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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<template v-if="modal.type == 'uploadText'">
    <div class="modal-body">
        <div class="mb-0" v-if="uploadTexts.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">{{ langs.setting.show_font }}</th>
                            <th class="border-0" style="width: 80px;">{{ langs.action }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(text, uid) in uploadTexts" :key="uid">
                            <td class="text-center">
                                <img v-if="text.thumb != ''" :src="text.thumb" alt="text template file" style="max-height: 60px; max-width: 200px">
                                <div class="progress progress-lg mt-1 mb-0" v-if="text.error == ''">
                                    <div class="progress-bar bg-success" role="progressbar" :style="'width: '+ text.uploaded +'%;'" :aria-valuenow="text.uploaded" aria-valuemin="0" aria-valuemax="100">{{ text.uploaded }}%</div>
                                </div>
                                <small class="d-block text-danger" v-else>{{ text.error }}</small>
                            </td>
                            <td>
                                {{ text.text.text }}
                            </td>
                            <td>
                                {{ text.font.name }}
                            </td>
                            <td>
                                <a href="javascript:void(0);" class="action-icon text-danger" @click="uploadTexts.splice(uid, 1)" v-if="modal.saving == false && text.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="uploadTexts.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 == 'uploadtext'" @click="uploadTextFile">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" v-if="loading == 'uploadtext'"></span>
            {{ langs.setting.import }}
        </button>
    </div>
</template>