{% set posts = venues %}
<div class="col-sm-12 col-xs-12 noP">
    {% if posts.lastPage > 1 %}
        <ul class="pagination flex-con">
            {% if posts.currentPage > 1 %}
                <li class = "page-text page-arr prev" data-page = "{{posts.currentPage-1}}"><img src="{{'assets/svg/hero-arrow.svg'|theme}}" alt=""></li>
            {% endif %}

            {% for page in 1..posts.lastPage %}
                <li class="page-text {{ posts.currentPage == page ? 'active' : null }}" data-page = "{{page}}">{{ page }}</li>
            {% endfor %}

            {% if posts.lastPage > posts.currentPage %}
                <li class = "page-text page-arr" data-page = "{{posts.currentPage+1}}"><img src="{{'assets/svg/hero-arrow.svg'|theme}}" alt=""></li>
            {% endif %}
        </ul>
    {% endif %}
</div>
<script>
    $(document).ready(function($){
        // Pagination
        $('.pagination li').on('click', function(){
            var pageSelected = $(this).attr('data-page');
            console.log(pageSelected);
            $('#pagi-ajax').val(pageSelected);
            var $form = $('#page-form');
            $form.request();
        });
    });
</script>