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

{% block title %} {{ page_title|default('CMS')|raw|striptags|replace({'<br/>':' '}) }} {% endblock %}

{% block body %}

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

        {% block bannerImage %}
            {% set imagePath = asset('build/images/newsletter.png') %}
            {% if 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 %} acba-blue-font {% endblock %}
    {% endembed %}

    {% set title = 'Content has been removed' %}
    {% if page is not null %}
        {% set title = page.title|default('Not found') %}
    {% endif %}


    <section class="col-md-12 text-start acba-light-blue-bg py-5 mb-4">
        <div class="container">
            {% if page.subtitle is not null %}
            <h2 class="py-5 my-4 text-white text-center">{{ page.subtitle }}</h2>
            {% endif %}

            {% if page is not null %}
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 my-2">
                    {{ page.content|raw }}
                </div>
            {% else %}
                <p>Oops! Looks like you found this page after it had been removed. Please try again later</p>
            {% endif %}
        </div>
    </section>

    {% embed "frontend/panel/cms-snippet-block.html.twig" %}
    {% endembed %}


{#    {% if current_page is defined and current_page starts with 'cms - Who we'  %}#}


        <section class="col-md-12 text-center text-white our-community-follow-on py-5 mt-5 mb-1">
            <div class="container">
                <h1>Our Community</h1>
                <h3 class="my-4">Together as Africans</h3>
                <p>
                    An Alliance of more than 80 African CSOs with representation from the 5 subregions of Africa,
                    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...
                    <a href="{{ path('community_page') }}" class="" title="See more of our community">see more</a>
                </p>
            </div>
        </section>

        <section class="col-md-12 pb-5 pt-2">
            <div class="container">
                <div class="row text-center">
                    <div class="col-lg-9 m-auto tempaltemo-carousel">
                        <div class="row d-flex flex-row">
                            <!--Controls-->
                            <div class="col-1 align-self-center">
                                <a class="h1" href="#templatemo-slide-brand" role="button" data-bs-slide="prev">
                                    <i class="text-light fas fa-chevron-left"></i>
                                </a>
                            </div>
                            <!--End Controls-->

                            <!--Carousel Wrapper-->
                            <div class="col">
                                <div class="carousel slide carousel-multi-item pt-2 pt-md-0" id="templatemo-slide-brand" data-bs-ride="carousel">
                                    <!--Slides-->
                                    <div class="carousel-inner product-links-wap" role="listbox">

                                        <!--First slide-->
                                        <div class="carousel-item active">
                                            <div class="row">
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-1.png') }}" alt="Community member 1"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-2.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-3.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-4.png') }}" alt="Brand Logo"></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--End First slide-->

                                        <!--Second slide-->
                                        <div class="carousel-item">
                                            <div class="row">
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-5.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-6.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-7.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-8.png') }}" alt="Brand Logo"></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--End Second slide-->

                                        <!--Third slide-->
                                        <div class="carousel-item">
                                            <div class="row">
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-9.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-10.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-11.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-12.png') }}" alt="Brand Logo"></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--End Third slide-->

                                        <!--Fourth slide-->
                                        <div class="carousel-item">
                                            <div class="row">
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-13.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-14.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-11.png') }}" alt="Brand Logo"></a>
                                                </div>
                                                <div class="col-3 p-md-5">
                                                    <a href="#"><img class="img-fluid" src="{{ asset('build/images/member-12.png') }}" alt="Brand Logo"></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--End Fourth slide-->

                                    </div>
                                    <!--End Slides-->
                                </div>
                            </div>
                            <!--End Carousel Wrapper-->

                            <!--Controls-->
                            <div class="col-1 align-self-center">
                                <a class="h1" href="#templatemo-slide-brand" role="button" data-bs-slide="next">
                                    <i class="text-light fas fa-chevron-right"></i>
                                </a>
                            </div>
                            <!--End Controls-->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--End Our Community-->
{#    {% endif %}#}


{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(function () {

        });
    </script>
{% endblock %}