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

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

{% block body %}

    {% embed "frontend/panel/content-page-title.html.twig" %}
        {% block pageTitle %}
            Together as <br/>Africans
        {% endblock %}

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

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

    <!-- Start Community Description -->
    <section class="col-md-12 text-center acba-blue-font text-center py-5 mb-3">
        <div class="container">
            {% if blocks is defined and blocks['community_description'] is defined  and blocks['community_description']|length > 0 %}
                {% for block in blocks['community_description'] %}
                    <h2 class="py-5 my-4 community-h2">{{ block.title }}</h2>
                    <h3 class="community-h3">
                        {{ block.content|default("")|raw }}
                    </h3>
                {% endfor %}
            {% else %}
                <h2 class="py-5 my-4 community-h2">An Alliance of more than 80 African CSOs with representation from the 5 subregions of Africa.</h2>
                <h3 class="community-h3">
                    Northern Africa, Central or Middle Africa, Southern Africa, Eastern Africa, and Western Africa
                    providing a platform for CSOs to speak with one voice on Sustainable Use.
                </h3>
            {% endif %}
        </div>
    </section>
    <!-- End Community Description -->

    <!-- Start regions and countries -->
    <section class="col-md-12 text-center acba-blue-bg text-white py-5">
        <div class="container">
            <h1 class="py-5 my-4 text-uppercase">The 5 subregions of Africa</h1>
        </div>
    </section>

    <section class="col-md-12 text-center text-white py-3" style="margin-top: -80px">
        <div class="container">
            <div class="row equal justify-content-between">

                {% embed "frontend/panel/community-countries-block.html.twig" %}
                {% endembed %}

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

    <!-- End Categories of The Month -->


    <section class="col-md-12 text-center text-white py-5 my-4 youtube-container position-relative">
        <iframe src="https://www.youtube.com/embed/79O9S6ScKcc" title="YouTube video player"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen class="youtube-video"></iframe>

    </section>

    <section class="col-md-12 text-center text-white community-collage" >
        <div class="container">

            <div class="row">
                <div class="col-md-8">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <img class="w-100" src="{{ asset('build/images/Rectangle-17.png') }}" alt="">
                        </div>
                        <div class="col-md-6">
                            <img class="w-100" src="{{ asset('build/images/Rectangle-18.png') }}" alt="">
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-12">
                            <img class="w-100" src="{{ asset('build/images/Rectangle-20.png') }}" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <img class="w-100" src="{{ asset('build/images/Rectangle-19.png') }}" alt="">
                </div>
            </div>

            <div class="row my-3">
                <div class="col-md-4">
                    <img class="w-100" src="{{ asset('build/images/Rectangle-23.png') }}" alt="">
                </div>
                <div class="col-md-4">
                    <img class="w-100" src="{{ asset('build/images/Rectangle-24.png') }}" alt="">
                </div>
                <div class="col-md-4">
                    <img class="w-100" src="{{ asset('build/images/Rectangle-25.png') }}" alt="">
                </div>
            </div>

        </div>
    </section>


{% endblock %}

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

    </script>
{% endblock %}