{# Template : News Articles #}

{% extends ('layouts/' ~ page_meta.layout) %}

{% block content %}

    <div class="blogArticleWrapper">

        <div class="articleTitleBanner">

            <div class="wrapper">

                <div class="articleDate">
                    {% if p.pagedata['Author'][0]['value'] is not empty %}
                        {{ p.pagedata['Author'][0]['value'] }} -
                    {% endif %}
                    {{ create_from_format(p.pagedata['Publish Date'][0]['value'], 'd/m/Y H:i', 'jS F Y') }}
                </div>

                <h1 class="articleTitle">
                    {{ p.title }}
                </h1>

            </div> <!-- .wrapper -->

        </div> <!-- .articleTitleBanner -->

        <div class="articleContent">

            <div class="wrapper">

                <div class="articleContent wysiwyg">

                    {% if p.pagedata['Image'][0]['value'] is not empty %}

                        <picture class="imageWrap articleImage">

                            <source
                                    srcset="/{{ image_folders['cms_images']['blog_listing_image_mobile']['path'] }}/{{ p.pagedata['Image'][0]['value'] }}"
                                    media="(max-width: 640px)">

                            <img src="/{{ image_folders['cms_images']['blog_listing_image']['path'] }}/{{ p.pagedata['Image'][0]['value'] }}"
                                 alt="{{ p.pagedata['Image'][0]['alt'] }}"
                            >

                        </picture>

                    {% endif %}

                    {% if p.pagedata['Content'][0]['value'] is not empty %}

                        <div class="blogContentContain">

                            {{ p.pagedata['Content'][0]['value']|raw }}

                        </div> <!-- .blogContentContain -->

                    {% endif %}

                    {% if p.pagedata['Extra Content'][0]['Extra Content']['value'] is not empty %}

                        <div class="extraContent">

                            {% for object in p.pagedata['Extra Content'] %}

                                {% if object['Extra Image']['value'] is not empty %}

                                    <picture class="imageWrap articleImage">

                                        <source
                                                srcset="/{{ image_folders['cms_images']['blog_listing_image_mobile']['path'] }}/{{ object['Extra Image']['value'] }}"
                                                media="(max-width: 640px)">

                                        <img
                                                src="/{{ image_folders['cms_images']['blog_listing_image']['path'] }}/{{ object['Extra Image']['value'] }}"
                                                alt="{{ object['Extra Image']['alt'] }}"
                                        >

                                    </picture>

                                {% endif %}

                                <div class="blogContentContain">

                                    {% if object['Extra Content']['value'] is not empty %}

                                        {{ object['Extra Content']['value']|raw }}

                                    {% endif %}

                                </div> <!-- .blogContentContain -->


                            {% endfor %}

                        </div><!-- .extraContent -->

                    {% endif %}

                </div> <!-- .articleContent wysiwyg -->

            </div> <!-- .wrapper -->

        </div> <!-- .articleContent -->

    </div> <!-- .blogArticleWrapper -->



    {% include 'includes/pages/blog/recommended_articles.twig' %}




{% endblock %}
