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

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="artCheckbox" v-model="artCheckbox" @change="checkAllArt">
                        <label class="form-check-label" for="artCheckbox">&nbsp;</label>
                    </div>
                </th>
                <th class="border-0">{{ langs.art.thumbnail }}</th>
                <th class="border-0">{{ langs.art.name }}</th>
                <th class="border-0">{{ langs.art.price }}</th>
                <th class="border-0">{{ langs.date }}</th>
                <th class="border-0" style="width: 80px;">{{ langs.action }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(art, aid) in listArts" :key="aid">
                <td>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" :id="'artCheckbox-'+ aid" v-model="artCheckboxs" :value="art.id">
                        <label class="form-check-label" :for="'artCheckbox-'+ aid">&nbsp;</label>
                    </div>
                </td>
                <td>
                    <img :src="showImg(art.thumb, 'art')" :alt="getTitle(art.title)" class="pdapp-mw150 pdapp-mh70">
                </td>
                <td>
                    <template v-if="artEdits[aid] != undefined && artCheckboxs.includes(artEdits[aid].id)">
                        <input type="text" class="form-control form-control-sm" v-model="artEdits[aid].title[listLang.default]" :placeholder="langs.art.art_name_desc">
                    </template>
                    <a v-else href="javascript:void(0);" @click="editArt(art)">{{ getTitle(art.title) }}</a>
                </td>
                <td>
                    <template v-if="artEdits[aid] != undefined && artCheckboxs.includes(artEdits[aid].id)">
                        <input type="number" step="0.1" min="0" class="form-control form-control-sm" value="0" :placeholder="langs.art.price_desc" disabled>
                    </template>
                    <span v-else>{{ art.price }}</span>
                </td>
                <td>
                    {{ convertDate(art.created) }}
                </td>
                <td>
                    <a href="javascript:void(0);" class="action-icon text-info" @click="editArt(art)">
                        <i class="material-icons material-symbols-outlined">edit</i>
                    </a>
                    <a href="javascript:void(0);" class="action-icon text-warning" @click="confirmMoveArt(art.id, 'art')">
                        <i class="material-icons material-symbols-outlined">drive_file_move</i>
                    </a>
                    <a href="javascript:void(0);" class="action-icon text-danger" @click="confirmRemove(art.id, 'art')">
                        <i class="material-icons material-symbols-outlined">delete</i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>