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

{% block title %}{{ article.title }}{% endblock %}

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

{% block url %}creation/{{ article.slug }}{% endblock %}
{% block m_url %}creation/{{ article.slug }}{% 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">{{ article.title }}</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><a href="{{ path('app_article') }}">Créations</a></li>
                                    <li class="active">{{ article.title }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>

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

        <div class="container pt-2 pb-4">

            <div>
                <div class="row pb-4 mb-2">
                    <div class="col-md-6 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="300">
                        {% if article.articleImages|length > 1 %}
                            <div class="owl-carousel owl-theme nav-inside nav-inside-edge nav-squared nav-with-transparency nav-dark mt-3" data-plugin-options="{'items': 1, 'margin': 10, 'loop': false, 'nav': true, 'dots': false}">
                                {% for image in article.articleImages %}
                                    <div>
                                        <div class="img-thumbnail border-0 border-radius-0 p-0 d-block">
                                            <img src="/assets/uploads/article/{{ image }}" class="img-fluid border-radius-0" alt="">
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% elseif (article.articleImages|length == 1) %}
                            <img src="/assets/uploads/article/{{ article.articleImages[0] }}" class="img-fluid border-radius-0" alt="" />
                        {% elseif (article.articleImages|length < 1) %}
                            <img src="{{ asset('/assets/img/defaut/project.jpg') }}" class="img-fluid border-radius-0" alt="">
                        {% endif %}


                    </div>
                    <div class="col-md-6">
                        <div class="overflow-hidden">
                            <h2 class="text-color-light font-weight-normal text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="600">
                                {{ article.title }} <strong class="font-weight-extra-bold">Description</strong>
                            </h2>
                        </div>
                        <p class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                            {{ article.content|raw }}</p>

                        <div class="overflow-hidden mt-4">
                            <h2 class="text-color-dark font-weight-normal text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1000">Détails <strong class="font-weight-extra-bold">Article</strong></h2>
                        </div>
                        <ul class="list list-icons list-primary list-borders text-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">
                            <li><i class="fas fa-caret-right left-10"></i> <strong class="text-color-primary">Date de création: </strong>{{ article.createdAt|date('d/m/Y') }}</li>
                            <li><i class="fas fa-caret-right left-10"></i> <strong class="text-color-primary">Catégorie: </strong>
                                {% for categorie in article.categories %}
                                    <a href="{{ path('app_category_show', { 'slug': categorie.slug }) }}" class="badge badge-light text-color-dark badge-sm rounded-pill px-2 py-1 ms-1">{{ categorie.name }}</a>
                                {% endfor %}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2 mt-3">
                <div>
                    {% if app.user %}
                        <a href="{{ path('app_article_like', { id: article.id }) }}" class="btn btn-light" data-action="like" data-nb={{ article.likes|length }}>
                            <i class="fas fa-heart filled {{ app.user in article.likes ? '' : 'hidden' }}"></i>
                            <i class="fa-regular fa-heart unfilled {{ app.user in article.likes ? 'hidden' : '' }}"></i>
                        </a>
                    {% endif %}
                </div>
                <div>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ absolute_url(path('app_article_show', { slug: article.slug, id: article.id } )) }}">
                        {% include 'widget/share.html.twig' %}
                    </a>
                </div>
            </div>

            <div>
                <div id="commentDiv">
                    {% include 'article/list-comments.html.twig' with [article] %}
                </div>

                {% include 'article/form-comments.html.twig' %}
            </div>

        </div>

    </div>
{% endblock %}

{% block scripts %}
    {{ parent() }}

    <script>
        (function($){
            $.fn.sweetPages = function(opts) {
                if (!opts) opts = {};
                const resultsPerPage = opts.perPage || 3;

                const ul = this;
                const li = ul.find('li');

                li.each(function () {
                    const el = $(this);
                    el.data('height', el.outerHeight(true));
                });

                const pagesNumber = Math.ceil(li.length / resultsPerPage);

                if (pagesNumber < 2) return this;

                const swControls = $('<div class="swControls">');

                for (let i = 0; i < pagesNumber; i++) {
                    // Slice a portion of the li elements, and wrap it in a swPage div:
                    li.slice(i * resultsPerPage, (i + 1) * resultsPerPage).wrapAll('<div class="swPage" />');

                    // Adding a link to the swControls div:
                    swControls.append('<a href="" class="swShowPage">' + (i + 1) + '</a>');
                }

                ul.append(swControls)

                let maxHeight = 0;
                let totalWidth = 0;

                const swPage = ul.find('.swPage');
                swPage.each(function(){

                    // Looping through all the newly created pages:

                    const elem = $(this);

                    let tmpHeight = 0;
                    elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

                    if(tmpHeight>maxHeight)
                        maxHeight = tmpHeight;

                    totalWidth+=elem.outerWidth();

                    elem.css('float','left').width(ul.width());
                });

                swPage.wrapAll('<div class="swSlider" />');

                // Setting the height of the ul to the height of the tallest page:
                ul.height(maxHeight);

                var swSlider = ul.find('.swSlider');
                swSlider.append('<div class="clear" />').width(totalWidth);

                var hyperLinks = ul.find('a.swShowPage');

                hyperLinks.click(function(e){

                    // If one of the control links is clicked, slide the swSlider div
                    // (which contains all the pages) and mark it as active:

                    $(this).addClass('active').siblings().removeClass('active');

                    swSlider.stop().animate({'margin-left': -(parseInt($(this).text())-1)*ul.width()},'slow');
                    e.preventDefault();
                });

                // Mark the first link as active the first time the code runs:
                hyperLinks.eq(0).addClass('active');

                // Center the control div:
                swControls.css({
                    'left':'50%',
                    'margin-left':-swControls.width()/2
                });

                return this;

            }})(jQuery);

        $(document).ready(function(){
            /* The following code is executed once the DOM is loaded */

            // Calling the jQuery plugin and splitting the
            // #holder UL into pages of 3 LIs each:

            $('#comments').sweetPages({perPage:3});

            // The default behaviour of the plugin is to insert the
            // page links in the ul, but we need them in the main container:

            const controls = $('.swControls').detach();
            controls.appendTo('#commentDiv');

        });
    </script>
{% endblock %}