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

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 style="width: 20px;position: relative;">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="productcheckbox" v-model="productCheckbox" @change="checkAllProduct">
                        <label class="form-check-label" for="productcheckbox">&nbsp;</label>
                    </div>
                </th>
                <th>{{ langs.product.thumbnail }}</th>
                <th>{{ langs.product.product_name }}</th>
                <th>{{ langs.product.printing }}</th>
                <th>{{ langs.date }}</th>
                <th style="width: 82px;">{{ langs.action }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(product, pid) in listProducts">
                <td>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" :id="'productcheckbox-'+ pid" v-model="productCheckboxs" :value="product.id">
                        <label class="form-check-label" :for="'productcheckbox-'+ pid">&nbsp;</label>
                    </div>
                </td>
                <td>
                    <img :src="showImg(product.thumb, product.id)" :alt="product.title" height="80">
                </td>
                <td><a href="javascript:void(0);" @click="editProduct(product)">{{ product.title }} (#{{ product.id }})</a></td>
                <td>{{ getPrintingType(product.pid) }}</td>
                <td>
                    {{ convertDate(product.created) }}
                </td>
                <td>
                    <a href="javascript:void(0);" class="action-icon text-info" @click="editProduct(product)">
                        <i class="material-icons material-symbols-outlined">edit</i>
                    </a>
                    <a href="javascript:void(0);" class="action-icon text-info tooltip-left" :data-tooltip="langs.upgrade_basic">
                        <i class="material-icons material-symbols-outlined">file_copy</i>
                    </a>
                    <a href="javascript:void(0);" class="action-icon text-danger" @click="confirmRemovePr(product.id, product.vid)">
                        <i class="material-icons material-symbols-outlined">delete</i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>