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

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>{{ langs.order.order_id }}</th>
                <th>{{ langs.order.thumbnail }}</th>
                <th>{{ langs.order.status }}</th>
                <th>{{ langs.date }}</th>
                <th>{{ langs.order.view_detail }}</th>
                <th>{{ langs.action }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(order, oid) in listOrders" :key="oid">
                <td>
                    <a :href="adminUrl +'post.php?post='+ order.oid +'&action=edit'" class="text-info position-relative" target="_blank">
                        <strong>#{{ order.id }}</strong>
                        <span class="badge bg-primary ms-auto position-absolute" style="margin-top: -6px;font-size: 10px;" v-if="order.new == 1">{{ langs.order.new }}</span>
                    </a>
                </td>
                <td>
                    <div class="d-flex justify-content-center align-items-center gap-1 flex-wrap">
                        <img v-for="(thumb, tid) in order.thumb" :key="tid" :src="showImg(thumb)" alt="Order Thumb" class="border bg-light" height="50">
                    </div>
                </td>
                <td>
                    <span :class="getClassBtn(order.status)" class="btn btn-sm ms-auto text-capitalize">{{ order.status }}</span>
                </td>
                <td>{{ convertDate(order.created) }}</td>
                <td>
                    <a href="javascript:void(0);" class="btn btn-sm btn-info tooltip-left" @click="viewDetail(order)" :data-tooltip="langs.order.view_detail">
                        <i class="material-icons material-symbols-outlined">visibility</i>
                    </a>
                </td>
                <td style="width: 50px;">
                    <a href="javascript:void(0);" class="action-icon text-danger tooltip-left" :data-tooltip="langs.upgrade_basic">
                        <i class="material-icons material-symbols-outlined">delete</i>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>