{% extends 'front-end-base.html.twig' %}

{% block title %} {{ page_title|default('Blog Article') }} {% endblock %}

{% block body %}

    {% set title = 'Content has been removed' %}
    {% if blogArticle is not null %}
        {% set title = blogArticle.title|default('Blog Article') %}
    {% endif %}

    <!-- ======= Single Blog Section ======= -->
    <section class="hero-section inner-page">
        <div class="wave">

            <svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
                        <path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
                    </g>
                </g>
            </svg>

        </div>

        <div class="container">
            <div class="row align-items-center">
                <div class="col-12">
                    <div class="row justify-content-center">
                        <div class="col-md-10 text-center hero-text">
                            <h1 data-aos="fade-up" data-aos-delay="">{{ title }}</h1>
                            {% if blogArticle is not null and blogArticle.summary|length>0%}
                            <p class="mb-5" data-aos="fade-up" data-aos-delay="100">{{ blogArticle.summary }}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="site-section mb-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12 blog-content">
                    {% if blogArticle is not null %}

                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 my-2">
                            {% if blogArticle.imagePath is not null %}
                                <img id="profile-pic-update" class="img-fluid"
                                     src="{{ asset(imageDirectory ~ blogArticle.imagePath) }}"
                                     alt="Banner "
                                />
                            {% endif %}
                        </div>

                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 my-2">
                            {{ blogArticle.content|raw }}
                        </div>
                    {% else %}
                        <p>Oops! Looks like this page may have been removed or unpublished for editing. Please try again later</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(function () {

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