{% 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="{{ services.getSetting("website_keywords_" ~ app.request.get('_locale')) }}" />
    {% endif %}
    <meta property="og:title" content="{{ blogpost.name }}" />
    <meta property="og:image" content="{{ app.request.getSchemeAndHttpHost() }}{{ blogpost.imageName ? asset(blogpost.getImagePath) : blogpost.getImagePlaceholder }}" />
    <meta property="og:description" content="{{ blogpost.content|raw|nl2br|striptags|slice(0, 200)|raw }}..." />
    <meta name="twitter:title" content="{{ blogpost.name }}" />
    <meta name="twitter:image" content="{{ app.request.getSchemeAndHttpHost() }}{{ blogpost.imageName ? asset(blogpost.getImagePath) : blogpost.getImagePlaceholder }}" />
    <meta name="twitter:image:alt" content="{{ blogpost.name }}" />
    <meta name="twitter: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="{{ services.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.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 = services.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 = services.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('assets/img/loader.svg') }}" data-src="{{ popularblogpost.imageName ? (popularblogpost.getImagePath|imagine_filter('thumbnail', runtimeConfig)) : popularblogpost.getImagePlaceholder }}" 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 services.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 services.getSetting("newsletter_enabled") == "yes" and services.getSetting("mailchimp_api_key") and services.getSetting("mailchimp_list_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('assets/img/loader.svg') }}" data-src="{{ blogpost.imageName ? asset(blogpost.getImagePath) : blogpost.getImagePlaceholder }}" 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 }} {{ "min 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 = services.getSetting("blog_comments_enabled") %}
                            {% if blog_comments_enabled != "no" %}
                                <div class="mt-5">
                                    {% if blog_comments_enabled == "native" %}
                                        {% include '@FOSComment/Thread/async.html.twig' with {'id':blogpost.slug} %}
                                    {% elseif blog_comments_enabled == "facebook" and services.getSetting("facebook_app_id") %}
                                        <div id="fb-root"></div>
                                        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/{{ app.request.locale|lower~'_'~app.request.locale|upper }}/sdk.js#xfbml=1&version=v4.0&appId={{ services.getSetting("facebook_app_id") }}&autoLogAppEvents=1"></script>
                                        <div class="fb-comments" data-href="{{ app.request.uri }}" data-width="100%" data-numposts="5"></div>
                                    {% elseif blog_comments_enabled == "disqus" and services.getSetting("disqus_subdomain") %}
                                        <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://{{ services.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>
                                    {% endif %}
                                </div>
                            {% endif %}

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

            {% set similarblogposts = services.getBlogPosts({"limit": 8, "category": blogpost.category.slug, "otherthan": blogpost.id}).getQuery().getResult() %}
            {% if similarblogposts|length %}
                <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 %}