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

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