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

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



{% block body %}

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

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

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

    {% endembed %}

    <!-- Start Section -->
    <section class="col-md-12 bg-white py-5">
        <div class="container">
            <div class="row">

                {% if activeRegions is defined and activeRegions|length > 0 %}
                    {% for activeRegion in activeRegions %}

                        {% set activeClass = '' %}
                        {% if region.id is same as(activeRegion.id) %}
                            {% set activeClass = 'active' %}
                        {% endif %}

                        <div class="col col-xs-12 pb-3 resources-nav {{ activeClass }}">
                            <div class="h-100 bg-light py-5 shadow">
                                <div class="h1 text-success text-center"><i
                                            class="fa fa-map-pin"></i></div>
                                <h2 class="h5 mt-4 text-center">
                                    <a class="text-decoration-none"
                                       href="{{ url('frontend_region_countries', {'regionId': activeRegion.id}) }}">{{ activeRegion.name }}</a>
                                </h2>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </section>
    <!-- End Section -->

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

                        <div class="row d-flex justify-content-center g-1">
                        {% for regionCountry in regionCountries %}

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

                            <div class="col-md-2 bg-white mx-2 my-3 py-3">
                                <div class="country-container text-center">
                                    <div class="country-image-container d-flex">
                                        <img class="img img-fluid mx-auto my-auto" src="{{ pageImage }}" style="max-height:250px" alt="Thumbnail image for: {{ regionCountry.name }}">
                                    </div>
                                    <div class="text-center p-3">
                                        <h4 class="">{{ regionCountry.name }}</h4>
                                        <span class="text-muted">{{ regionCountry.description|default('')|raw|striptags }}</span>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        </div>

                    {% else %}
                        <p class="p-5">Looks like all region countries have either 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 %}