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

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