{% extends 'base.html.twig' %}

{% block title %}Articles{% endblock %}

{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block url %}creations{% endblock %}
{% block m_url %}creations{% endblock %}

{% block loading %}{% endblock %}

{% block main %}
    <div role="main" class="main">

        <section class="page-header page-header-modern bg-color-light-scale-1 page-header-md ">
            <div class="container-fluid">
                <div class="row align-items-center">

                    <div class="col">
                        <div class="row">
                            <div class="col-md-12 align-self-center p-static order-2 text-center">
                                <div class="overflow-hidden pb-2">
                                    <h1 class="text-dark font-weight-bold text-9 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="100">Mes Créations</h1>
                                </div>
                            </div>
                            <div class="col-md-12 align-self-center order-1">
                                <ul class="breadcrumb d-block text-center appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                                    <li><a href="{{ path('app_home') }}">Accueil</a></li>
                                    <li class="active">Créations</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <div class="container py-2">

            <div class="row mt-3 pt-2">
                <div class="col-lg-3 position-relative">
                    <aside class="sidebar" id="sidebar" data-plugin-sticky data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}">
                        <h5 class="font-weight-semi-bold">Filtrer :</h5>
                        {% include 'widget/categories.html.twig' %}
                    </aside>
                </div>
                <div class="col-lg-9">
                    {% include 'article/list.html.twig' with { articles } %}
                </div>
            </div>

        </div>

    </div>
{% endblock %}

{% block scripts %}
    <!-- Vendor -->
    <script src="{{ asset('assets/vendor/plugins/js/plugins.min.js') }}"></script>

    <!-- Theme Base, Components and Settings -->
    <script src="{{ asset('assets/js/theme.js') }}"></script>

    <!-- Current Page Vendor and Views -->
    <script src="{{ asset('assets/vendor/bootpag/jquery.bootpag.min.js') }}"></script>

    <!-- Theme Custom -->
    <script src="{{ asset('assets/js/custom.js') }}"></script>

    <!-- Theme Initialization Files -->
    <script src="{{ asset('assets/js/theme.init.js') }}"></script>

    <script>
        const portfolioPagination = {

            pages: 0,
            $wrapper: $('#portfolioPaginationWrapper'),
            $filter: $('#portfolioPaginationFilter'),
            $pager: $('#portfolioPagination'),

            init: function () {

                const self = this;

                self.$filter.on('filtered', function (event, laidOutItems) {
                    self.build();
                    self.$filter.find('.active').trigger('click');
                });

            },

            calcPages: function () {

                const self = this,
                    filter = self.$wrapper.attr('data-filter'),
                    itemsPerPage = parseInt(self.$wrapper.attr('data-items-per-page')),
                    $activeItems = self.$wrapper.find(filter + '.isotope-item');

                self.$wrapper.find('.isotope-item').removeAttr('data-page-rel');

                $activeItems.each(function (i) {
                    const itemPage = Math.ceil((i + 1) / itemsPerPage);

                    $(this).attr('data-page-rel', ((itemPage === 0) ? 1 : itemPage));

                    if (itemPage > 1) {
                        $(this).hide();
                    }
                });

                self.$wrapper.isotope('layout');

                return Math.ceil($activeItems.length / itemsPerPage);
            },

            build: function () {

                const self = this;

                self.pages = self.calcPages();

                self.$wrapper.removeAttr('data-current-page');

                self.$pager.empty().unbind();

                if (self.pages <= 1) {

                    return;

                } else {

                    self.$wrapper.attr('data-current-page', 1);

                    self.$pager.bootpag({
                        total: self.pages,
                        page: 1,
                        next: '<i class="fas fa-angle-right"></i>',
                        prev: '<i class="fas fa-angle-left"></i>'
                    }).on('page', function (event, num) {
                        self.$wrapper.attr('data-current-page', num);
                        self.$filter.find('.active').trigger('click');
                    });

                }

                self.$filter.find('.active').trigger('click');

                self.$pager.find('li').addClass('page-item');
                self.$pager.find('a').addClass('page-link');

            }

        };

        if($('#portfolioPagination').get(0)) {
            portfolioPagination.init();
        }
    </script>
{% endblock %}