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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<ul class="pagination pagination-rounded justify-content-end my-2" v-if="orders.pages > 1">
    <li class="page-item" v-if="orders.pages > 5 && orders.paged != 1">
        <a class="page-link" href="javascript: void(0);" @click="orders.paged = 1">
            <span>«</span>
        </a>
    </li>
    <li class="page-item" v-if="orders.pages > 5 && orders.paged > 3">
        <a class="page-link" href="javascript: void(0);">...</a>
    </li>
    <template v-for="page in orders.pages" >
        <li :key="page" class="page-item" :class="orders.paged == page ? 'active' : ''" v-if="(orders.paged > 2 && orders.pages - orders.paged > 2 && page - orders.paged >= -2 && page - orders.paged <= 2) || (orders.paged <= 2 && page > 0 && page <= 5) || (orders.pages - orders.paged <= 2 && page > orders.pages-5 && page <= orders.pages)">
            <a class="page-link" href="javascript: void(0);" @click="orders.paged = page">{{ page }}</a>
        </li>
    </template>
    <li class="page-item" v-if="orders.pages > 5 && (orders.pages - orders.paged) >= 3">
        <a class="page-link" href="javascript: void(0);">...</a>
    </li>
    <li class="page-item" v-if="orders.pages > 5 && orders.paged != orders.pages">
        <a class="page-link" href="javascript: void(0);"  @click="orders.paged = orders.pages">
            <span>»</span>
        </a>
    </li>
</ul>