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

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