{% extends "Global/layout.html.twig" %}

{% set pagetitle = blogPost.name %}

{% block title %}{{pagetitle}}{% endblock %}

{% block meta_dynamic_seo %}
    <meta name="description" content="{{ blogPost.content|raw|nl2br|striptags|slice(0, 200)|raw }}..." />
    {% if blogPost.tags %}
        <meta name="keywords" content="{{ blogPost.name }}, {{ blogPost.category.name }}, {% for tag in blogPost.tags|split(',') %}{{ tag }}{{ not loop.last ? ', ' : '' }}{% endfor %}" />
    {% else %}
        <meta name="keywords" content="{{ envFileAccessor.getSetting("website_keywords_" ~ app.request.locale) }}" />
    {% endif %}
    <meta property="og:title" content="{{ blogPost.name }}" />
    <meta property="og:image" content="{{ app.request.getSchemeAndHttpHost() }}{{ vich_uploader_asset(blogPost, 'imageFile') }}" />
    <meta property="og:description" content="{{ blogPost.content|raw|nl2br|striptags|slice(0, 200)|raw }}..." />
{% endblock %}

{% block content %}

    {% set navigation = [{"blog": "Blog"|trans, "current" : (pagetitle)}] %}
    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content padding-y bg-white">
        <div class="{{ envFileAccessor.getSetting("app_layout") }}">
            <div class="row">
                <aside class="col-lg-3 order-1 order-lg-0">
                    <div class="card card-filter">
                        <article class="card-group-item">
                            <header class="card-header">
                                <a class="" aria-expanded="true" href="#" data-toggle="collapse" data-target="#filter-keyword">
                                    <i class="icon-action fa fa-chevron-down"></i>
                                    <h6 class="title">{{ "Search blog"|trans }}</h6>
                                </a>
                            </header>
                            <div class="filter-content collapse show" id="filter-keyword">
                                <div class="card-body">
                                    <form class="pb-3" action="{{ path('blog') }}">
                                        <input class="form-control mb-3" placeholder="{{ "Keyword"|trans }}" name="keyword" type="text" value="{{ app.request.query.get('keyword') }}">
                                        <button type="submit" class="btn btn-outline-primary btn-block"><i class="fas fa-search"></i> {{ "Search"|trans }}</button>
                                    </form>
                                </div>
                            </div>
                        </article>
                        <article class="card-group-item">
                            <header class="card-header">
                                <a href="#" data-toggle="collapse" data-target="#filter-event-type">
                                    <i class="icon-action fa fa-chevron-down"></i>
                                    <h6 class="title">{{ "Categories"|trans }}</h6>
                                </a>
                            </header>
                            <div class="filter-content collapse show" id="filter-event-type">
                                <div class="card-body">
                                    <ul class="list list-unstyled">
                                        {% set topBlogPostCategories = repository.getBlogPostCategories({ order: "blogPostsCount", limit: 5 }).getQuery().getResult() %}
                                        {% for blogPostCategory in topBlogPostCategories %}
                                            <li class="mb-2">
                                                <a href="{{ path('blog', {category: blogPostCategory.slug}) }}" class="font-weight-semibold">
                                                    {% if app.request.locale != 'ar' %}
                                                        <i class="fas fa-angle-right ml-1 mr-1 pr-2"></i>
                                                    {% endif %}
                                                    {{ blogPostCategory.name }}
                                                    {% if app.request.locale == 'ar' %}
                                                        <i class="fas fa-angle-left ml-1 mr-1 pl-2"></i>
                                                    {% endif %}
                                                    <span class="float-right form-check-label">
                                                        <span class="badge badge-primary">{{ blogPostCategory.blogPosts|length }}</span>
                                                    </span>
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </article>
                        <article class="card-group-item">
                            <header class="card-header">
                                <a href="#" data-toggle="collapse" data-target="#collapsePopular">
                                    <i class="icon-action fa fa-chevron-down"></i>
                                    <h6 class="title">{{ "Popular"|trans }}</h6>
                                </a>
                            </header>
                            <div class="filter-content collapse show" id="collapsePopular">
                                <div class="card-body">
                                    {% set popularBlogPosts = repository.getBlogPosts({"limit": 4, "sort": "views", "otherthan": blogPost.slug}).getQuery().getResult() %}
                                    {% set runtimeConfig = {"thumbnail": {"size": [79, 79] }} %}
                                    {% for popularBlogPost in popularBlogPosts %}
                                        <article class="row align-items-center mb-3">
                                            <div class="col-4 pr-0">
                                                <a href="{{ path('blog_article', { slug : popularBlogPost.slug }) }}">
                                                    <img src="{{ asset('img/loader.svg') }}" data-src="{{ vich_uploader_asset(popularBlogPost, 'imageFile')|imagine_filter('thumbnail', runtimeConfig) }}" class="img-lazy-load img-fluid hover-effect-2" alt="{{ popularBlogPost.name }}">
                                                </a>
                                            </div>
                                            <div class="col-8">
                                                <small class="text-muted">{{ popularBlogPost.category.name }}</small>
                                                <h6 class="mb-0">
                                                    <a href="{{ path('blog_article', { slug : popularBlogPost.slug }) }}" class="text-1">{{ popularBlogPost.name }}</a>
                                                </h6>
                                            </div>
                                        </article>
                                    {% endfor %}
                                </div>
                            </div>
                        </article>
                        <article class="card-group-item">
                            <header class="card-header">
                                <a href="#" data-toggle="collapse" data-target="#collapseTags">
                                    <i class="icon-action fa fa-chevron-down"></i>
                                    <h6 class="title">{{ "Tags"|trans }}</h6>
                                </a>
                            </header>
                            <div class="filter-content collapse show" id="collapseTags">
                                <div class="card-body">
                                    {% for tag in repository.getBlogPosts({"selectTags": true}).getQuery().getOneOrNullResult()[1]|split(',') %}
                                        <a href="{{ path('blog', { keyword: tag }) }}" class="btn btn-sm btn-default mr-2 mb-2 mt-2">{{ tag }}</a>
                                    {% endfor %}
                                </div>
                            </div>
                        </article>
                        {% if envFileAccessor.getSetting("newsletter_enabled") == "1" and envFileAccessor.getSetting("mailchimp_api_key") and envFileAccessor.getSetting("mailchimp_audience_id") %}
                            {% include "Global/newsletter-box.html.twig" %}
                        {% endif %}

                    </div>
                </aside>
                <div class="col-lg-9 order-0 order-lg-1">
                    <div class="card box">
                        <img class="card-img-top img-lazy-load" src="{{ asset('img/loader.svg') }}" data-src="{{ vich_uploader_asset(blogPost, 'imageFile') }}" alt="{{ blogPost.name }}">
                        <div class="card-body">

                            <header class="section-heading mb-1">
                                <h1 class="title-section">{{ blogPost.name }}</h1>
                            </header>
                            <p class="mb-4">
                                <small class="text-muted mr-2"><a href="{{ path('blog', { category: blogPost.category.slug }) }}"><i class="fas fa-sitemap"></i> {{ blogPost.category.name }}</a></small>
                                <small class="text-muted mr-2"><i class="far fa-clock"></i> {{ blogPost.createdAt|ago }}</small>
                                {% if blogPost.readTime %}
                                    <small class="text-muted"><i class="fas fa-book-reader"></i> {{ blogPost.readtime }} {{ "mins read"|trans }}</small>
                                {% endif %}
                            </p>
                            <article>
                                {{ blogPost.content|raw|nl2br }}
                            </article>
                            <hr>
                            <div class="row">
                                {% if blogPost.tags %}
                                    <div class="col-12 col-lg-6 text-center text-lg-left">
                                        {% for tag in blogPost.tags|split(',') %}
                                            <a href="{{ path('blog', { keyword: tag }) }}" class="btn btn-sm btn-default mr-3 mb-3 mt-3">{{ tag }}</a>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="col-12 col-lg-6 text-center text-lg-right sharer mt-3">
                                </div>
                            </div>

                            {% set blog_comments_enabled = envFileAccessor.getSetting("blog_comments_enabled") %}
                            {% if blog_comments_enabled == "1" %}
                                <div class="mt-5">
                                    <div id="disqus_thread"></div>
                                    <script>
                                        /**
                                         *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
                                         *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
                                        var disqus_config = function () {
                                            this.page.url = "{{ app.request.uri }}";  // Replace PAGE_URL with your page's canonical URL variable
                                            this.page.identifier = "{{ blogPost.slug }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
                                            this.language = "{{ app.request.locale|lower }}";
                                        };
                                        (function () { // DON'T EDIT BELOW THIS LINE
                                            var d = document, s = d.createElement('script');
                                            s.src = 'https://{{ envFileAccessor.getSetting("disqus_subdomain") }}.disqus.com/embed.js';
                                            s.setAttribute('data-timestamp', +new Date());
                                            (d.head || d.body).appendChild(s);
                                        })();
                                    </script>
                                    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
                                </div>
                            {% endif %}

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

            {% set similarBlogPosts = repository.getBlogPosts({"limit": 8, "category": blogPost.category.slug, "otherThan": blogPost.id}).getQuery().getResult() %}
            {% if similarBlogPosts|length > 0 %}
                <div class="row">
                    <div class="col-12">
                        <h3 class="mt-5 mb-4 text-center">{{ "Related posts"|trans }}</h3>
                        <div class="owl-init owl-carousel" data-margin="15" data-items="4" data-dots="false" data-nav="true" data-autoplay="false">
                            {% for similarBlogPost in similarBlogPosts %}
                                {% include "Global/blog-card.html.twig" with { blogPost: similarBlogPost, thumbnailSize: [241, 241] } %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}

        </div>
    </section>

{% endblock %}