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

{% block title %} {{ page_title|default('News')|raw|striptags }} {% endblock %}



{% block body %}

    {% embed "frontend/panel/content-page-title.html.twig" %}
        {% block pageTitle %}
            {{ page_title|default('Latest News') }}
        {% endblock %}

        {% block bannerImage %}
            {% set imagePath = asset('build/images/news.jpg') %}
            background: url('{{ imagePath }}') top center no-repeat; background-size: cover;
        {% endblock %}

        {% block headerFontClass %} text-white {% endblock %}

    {% endembed %}

    <section class="site-section my-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12 blog-content">
                    {% if blogPosts is not null and blogPosts|length > 0 %}

                        <div class="row mb-5">
                            {% for blogPost in blogPosts %}

                                {% set pageImage =  asset('build/images/undraw_svg_2.svg') %}
                                {% if blogPost.imagePath is not null %}
                                    {% set pageImage =  imageDirectory~blogPost.imagePath %}
                                {% endif %}

                                {% set blogPageUrl = path('blog_view_page', {'blogId':blogPost.id, 'title':blogPost.title|replace({' ':'-'})}) %}

                                <div class="col-md-12">

                                    <div class="row d-flex py-2 mb-2 border-bottom">
                                        <div class="col-md-4">
                                            <div class="post-entry snippet-image-container">
                                                <a href="{{ blogPageUrl }}" class="d-block">
                                                    <img src="{{ pageImage }}"
                                                         alt="Image for news article titled: {{ blogPost.title|raw|striptags }}"
                                                         class="img-fluid">
                                                </a>
                                            </div>
                                        </div>

                                        <div class="col-md-8">
                                            <div class="post-text news-article">
                                                <h3><a class="acba-blue-font text-decoration-none"
                                                       href="{{ blogPageUrl }}">{{ blogPost.title }}</a></h3>
                                                <span class="post-meta text-light">
                                            {% if blogPost.datePublished is defined and blogPost.datePublished is not null %}
                                                {{ blogPost.datePublished.format('F d, Y') }}
                                            {% elseif blogPost.dateCreated is not null %}
                                                {{ blogPost.dateCreated.format('F d, Y') }}
                                            {% endif %} &bullet; By {{ blogPost.author.firstName ~ ' ' ~ blogPost.author.lastName }}
                                        </span>

                                                <p class="py-3">{{ blogPost.summary|default("")|striptags|slice(0, 500)  ~ '...' }}</p>
                                                <div class="align-bottom py-3 my-2">
                                                    <a title="Read More" class="btn btn-primary rounded-pill readmore"
                                                       href="{{ blogPageUrl }}">Read more</a>
                                                    {% if blogPost.pdfDocument is not null %}
                                                        | <a class="btn btn-secondary rounded-pill"
                                                             href="{{ path('frontend_download_resource', {'filename':blogPost.pdfDocument}) }}"
                                                             title="Download PDF Document" rel="noopener noreferrer"
                                                            target="_blank">View PDF Document</a>
                                                    {% endif %}

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

                                </div>
                            {% endfor %}
                        </div>

                    {% else %}
                        <p>Looks like all news have been hidden or haven't been created yet. Please try again later</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">

    </script>
{% endblock %}