{% extends '/frontend/layout.html.twig' %}

{% block wrapper %}
    {{ parent() }}
    <div class="page-carousel"></div>
    <input type="hidden" id="user_id" value="{{ app.user.id|default(0) }}">
    <div class="container-lg page-wrapper">
        <div class="row pt-5">
            <div class="col-12">
                <h1 class="header text-center">
                    {{ blog.title }}
                </h1>
                <p class="text-center">
                    <picture>
                        <source srcset="{{ asset('images/blogs/' ~ blog.image)|imagine_filter('item_thumb_webp') }}" type="image/webp">
                        <source srcset="{{ asset('images/blogs/' ~ blog.image)|imagine_filter('item_thumb_png') }}" type="image/png">
                        <source srcset="{{ asset('images/blogs/' ~ blog.image)|imagine_filter('item_thumb_jpg') }}" type="image/jpeg">
                        <img src="{{ asset('images/blogs/' ~ blog.image)| imagine_filter('item_thumb_png') }}" alt="{{ blog.alt }}" class="img-fluid">
                    </picture>
                </p>
                {{ blog.copy|raw }}
                <div class="text-start my-4">
                    <a
                        class="btn btn-green-outline b-grey"
                        href="http://www.facebook.com/sharer.php?u={{ app.request.server.get('BASE_URL') }}/blog/{{ title|lower|uc_words }}"
                        target="_blank"
                    >
                        <i class="fab fa-facebook-square facebook"></i> Share
                    </a>
                    <a
                        target="_blank"
                        href="http://twitter.com/share?text=&url={{ app.request.server.get('BASE_URL') }}/blog/{{ title|lower|uc_words }}"
                        class=" btn btn-green-outline b-grey ms-2"
                    >
                        <i class="fa-brands fa-x-twitter twitter"></i></i> Tweet
                    </a>
                </div>
                <div class="text-center mb-3">
                    <a
                        class="btn btn-green-outline"
                        href="/blogs"
                        data-filter="all"
                        data-action="click->blogs#onClickGetBlogs"
                    >
                        BACK TO NEWS | ANNOUNCEMENTS | ARTICLES
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="brands-wrapper"></div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>

        $(document).ready(function()
        {
            let height = $('.brand-link').height();
            $('.main-header').css({'height': height + 1});
            $("div.spanner").removeClass("show");
            $("div.overlay").removeClass("show");
        });

    </script>
{% endblock %}