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

{% block title %}{{ post.title }}{% endblock %}

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

{% block url %}blog/{{ post.slug }}{% endblock %}
{% block m_url %}blog/{{ post.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">
                <div class="row">
                    <div class="col-md-12 align-self-center p-static order-2 text-center">
                        <h1 class="text-dark font-weight-bold text-8">{{ post.title }}</h1>
                    </div>
                    <div class="col-md-12 align-self-center order-1">
                        <ul class="breadcrumb d-block text-center">
                            <li><a href="{{ path('app_home') }}">Accueil</a></li>
                            <li><a href="{{ path('app_post') }}">Blog</a></li>
                            <li class="active">{{ post.title }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <div class="container py-4">

            <div class="row">
                <div class="col">
                    <div class="blog-posts single-post">

                        <div class="container pt-2 pb-4">
                            <article class="post post-large blog-single-post border-0 m-0 p-0">
                                <div class="post-date ms-0">
                                    <span class="day">{{ post.createdAt|date('d') }}</span>
                                    <span class="month">{{ post.createdAt|format_datetime(pattern="MMM", locale='fr') }}</span>
                                </div>

                                <div class="post-content ms-0">
                                        <h2 class="font-weight-semi-bold"><a >{{ post.title }}</a></h2>
                                        <div class="post-meta">
                                        <span><i class="far fa-comments"></i>
                                            <a href="#">
                                                <span class="post-comment-count-1">
                                                    {{ post.postComments|length }}
                                                </span> Commentaires
                                            </a>
                                        </span>
                                        </div>
                                        {% if post.postImages|length > 1 %}
                                            <div class="owl-carousel owl-theme show-nav-hover dots-inside nav-inside nav-style-1 nav-light" data-plugin-options="{'items': 1, 'margin': 10, 'loop': false, 'nav': true, 'dots': true}">
                                                {% for image in post.postImages %}
                                                    <div>
                                                        <div class="img-thumbnail border-0 p-0 d-block">
                                                            <img src="../assets/uploads/post/{{ image.name }}" class="img-fluid float-start me-4 mt-2" style="max-width: 500px" alt="">
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        {% elseif (post.postImages|length == 1) %}
                                            <img src="../assets/uploads/post/{{ post.postImages[0] }}" class="img-fluid float-start me-4 mt-2" style="max-width: 500px" alt="" />
                                        {% elseif (post.postImages|length < 1) %}
                                            <img src="{{ asset('../assets/img/defaut/project.jpg') }}" class="img-fluid float-start me-4 mt-2" style="max-width: 500px" alt="">
                                        {% endif %}
                                        <p>{{ post.content|raw }}</p>
                                    </div>
                            </article>
                        </div>

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

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

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

                {% include 'post/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 %}