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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<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: 20px;position: relative;">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="tempCheckbox" v-model="tempCheckbox" @change="checkAllTemp">
                        <label class="form-check-label" for="tempCheckbox">&nbsp;</label>
                    </div>
                </th>
                <th class="border-0">{{ langs.temp.thumbnail }}</th>
                <th class="border-0">{{ langs.temp.name }}</th>
                <th class="border-0">{{ langs.temp.price }}</th>
                <th class="border-0">{{ langs.temp.filesize }}</th>
                <th class="border-0">{{ langs.date }}</th>
                <th class="border-0" style="width: 80px;">{{ langs.action }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(temp, aid) in listTemps" :key="aid">
                <td>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" :id="'tempCheckbox-'+ aid" v-model="tempCheckboxs" :value="temp.id">
                        <label class="form-check-label" :for="'tempCheckbox-'+ aid">&nbsp;</label>
                    </div>
                </td>
                <td>
                    <img :src="showImg(temp.thumb, 'temp')" :alt="getTitle(tempEdits[aid].title)" class="pdapp-mw150 pdapp-mh70">
                </td>
                <td>
                    <template v-if="tempEdits[aid] != undefined && tempCheckboxs.includes(tempEdits[aid].id)">
                        <input type="text" class="form-control form-control-sm" v-model="tempEdits[aid].title[listLang.default]" :placeholder="langs.temp.temp_name_desc">
                    </template>
                    <a v-else href="javascript:void(0);" @click="editTemp(temp)">{{ getTitle(temp.title) }}</a>
                </td>
                <td>
                    <template v-if="tempEdits[aid] != undefined && tempCheckboxs.includes(tempEdits[aid].id)">
                        <input type="number" step="0.1" min="0" class="form-control form-control-sm" v-model="tempEdits[aid].price" :placeholder="langs.temp.price_desc" disabled>
                    </template>
                    <span v-else>{{ temp.price }}</span>
                </td>
                <td>
                    <span class="d-block text-warning">{{ temp.size.width }}x{{ temp.size.height }}{{ temp.size.unit.toUpperCase() }}</span>
                    <span class="d-block text-success">{{ temp.size.size }}MB</span>
                </td>
                <td>
                    {{ convertDate(temp.created) }}
                </td>
                <td>
                    <a href="javascript:void(0);" class="action-icon text-info" @click="editTemp(temp)">
                        <i class="material-icons material-symbols-outlined">edit</i>
                    </a>
                    <a href="javascript:void(0);" class="action-icon text-warning" @click="confirmMoveTemp(temp.id, 'temp')">
                        <i class="material-icons material-symbols-outlined">drive_file_move</i>
                    </a>
                    <a href="javascript:void(0);" class="action-icon text-danger" @click="confirmRemove(temp.id, 'temp')">
                        <i class="material-icons material-symbols-outlined">delete</i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>