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

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

{% block body %}

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

        {% block bannerImage %}
            {% set imagePath = asset('build/images/newsletter.png') %}
            {% if currentApacCategory is not null and currentApacCategory.bannerImagePath is defined and currentApacCategory.bannerImagePath is not null %}
                {% set imagePath = asset(apacCategoryImagesDirectory ~ currentApacCategory.bannerImagePath) %}
            {% endif %}
            background: url('{{ imagePath }}') top center no-repeat; background-size: cover;
        {% endblock %}

        {% block headerFontClass %} acba-blue-font {% endblock %}
    {% endembed %}

    <!-- Start Section -->
    <section class="col-md-12 bg-light py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <a class="text-decoration-none text-secondary" title="Back to APAC"
                       href="{{ url('apac_page') }}"><i class="fa fa-chevron-left "></i> Back</a>
                </div>
            </div>
        </div>
    </section>
    <!-- End Section -->

    <section class="col-md-12 text-start bg-white py-5">
        <div class="container">

            {% if currentApacCategory is defined and currentApacCategory is not null %}
                {# <h2 class="py-5 my-4 acba-blue-font big-h2">{{ currentApacCategory.name }}</h2> #}

                <div class="row d-flex">

                    {% if apacs is defined and apacs|length > 0 %}
                        {% for apac in apacs %}

                            {% set pdfDocument = apac.frenchDocument %}
                            {% if apac.englishDocument is defined and apac.englishDocument is not null %}
                                {% set pdfDocument = apac.englishDocument %}
                            {% endif %}

                            <div class="col-md-6 my-3">

                                <div class="row my-5">
                                    {% if apac.imagePath is not null %}
                                        <div class="col-md-12 mr-2 snippet-image-container">
                                            <a class=" text-decoration-none"
                                               href="{{ absolute_url(path('frontend_download_resource', {'filename':pdfDocument})) }}"
                                               title="Download - {{ apac.title }} - resource" rel="noopener noreferrer"
                                               target="_blank"
                                            >
                                                <img src="{{ asset(imageDirectory ~ apac.imagePath) }}"
                                                     alt="{{ apac.title }} image" class="img img-fluid">
                                            </a>
                                        </div>
                                    {% endif %}
                                    <div class="col-md-12">
                                        <h3 class="acba-blue-font my-3">
                                            {{ apac.title }}
                                        </h3>


                                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 my-2">
                                            {{ apac.content|raw }}
                                        </div>


                                        <div class="resource-download-container">
                                            {% if apac.englishDocument is not null or apac.frenchDocument is not null %}
                                                Download:
                                                {% if apac.englishDocument is not null %}
                                                    <a class=""
                                                       href="{{ absolute_url(path('frontend_download_resource', {'filename':apac.englishDocument})) }}"
                                                       title="Download English article"
                                                       target="_blank" rel="noopener noreferrer"
                                                    >EN</a> |
                                                {% endif %}

                                                {% if apac.frenchDocument is not null %}
                                                    <a class=""
                                                       href="{{ absolute_url(path('frontend_download_resource', {'filename':apac.frenchDocument})) }}"
                                                       title="Download French article"
                                                       target="_blank" rel="noopener noreferrer"
                                                    >FR</a>
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                        <div>
                                            {% if apac.datePublished is defined and apac.datePublished is not null %}
                                                <span class="text-light">Posted on {{ apac.datePublished.format('Y-m-d') }} </span>
                                            {% elseif apac.dateCreated is not null %}
                                                <span class="text-light">Posted on {{ apac.dateCreated.format('Y-m-d') }} </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

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

                    <div class="col-md-12">
                        <ul class="pagination w-100 pagination-links-container">
                        </ul>
                    </div>

                </div>
            {% endif %}
        </div>
    </section>

{% endblock %}

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