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

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

{% block body %}

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

        {% block bannerImage %}
            {% set imagePath = asset('build/images/contact-us.png') %}
            background: url('{{ imagePath }}') top center no-repeat; background-size: cover;
        {% endblock %}

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


    <section class="col-md-12 text-center py-5">
        <div class="container">
            <h2 class="big-h2 acba-blue-font">Contact Us</h2>
        </div>
    </section>

    <!-- Start Contact -->
    <section class="col-md-12 text-start py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">

                    {% if blocks is defined and blocks['contact_page_description'] is defined  and blocks['contact_page_description']|length > 0 %}
                        {% for block in blocks['contact_page_description'] %}
                        <h4 class="acba-blue-font mb-4">{{ block.title }}</h4>
                        <p class="pb-3">
                            {{ block.content|raw|striptags }}
                        </p>
                        {% endfor %}
                    {% endif %}


                    {% if blocks is defined and blocks['contact_page_details'] is defined  and blocks['contact_page_details']|length > 0 %}
                        {% for block in blocks['contact_page_details'] %}

                            <p>
                                <i class="{{ block.iconClass|default('')}} mr-3" title="{{ block.title }}"></i>
                                &nbsp;&nbsp;&nbsp;&nbsp;{{ block.content|raw|striptags }}
                            </p>

                        {% endfor %}
                    {% else %}
                        <p>
                            <i class="fa fa-location-arrow mr-3"></i>
                            &nbsp;&nbsp;&nbsp;&nbsp;123 Corner Str, Africa
                        </p>

                        <p>
                            <i class="fa fa-phone mr-3"></i>
                            &nbsp;&nbsp;&nbsp;&nbsp;000 000-0000
                        </p>

                        <p>
                            <i class="fa fa-envelope mr-3"></i>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="mailto:info@africancba.org" target="_blank"  rel="noopener noreferrer" title="Send us an email">info@africancba.org</a>
                        </p>
                    {% endif %}

                </div>

                <div class="col-md-6">
                    {% if submitted is defined and submitted %}
                        {% set alert_class = 'danger' %}
                        {% set alert = 'Error' %}
                        {% if success %}
                            {% set alert_class = 'success' %}
                            {% set alert = 'Success' %}
                        {% endif %}
                        <div class="alert alert-{{ alert_class }} alert-dismissible fade show" role="alert">
                            <strong>{{ alert|title }}!</strong> {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endif %}


                    {{ form_start(form) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </section>
    <!-- End Contact -->

    <!-- Start Map -->
    <div id="mapid" style="width: 100%; height: 300px;"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>
    <script>
        var mymap = L.map('mapid').setView([-1.3173156, 36.7137635, 13], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            attribution: 'Zay Telmplte | Template Design by <a href="https://templatemo.com/">Templatemo</a> | Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(mymap);

        L.marker([-1.3173156, 36.7137635, 13]).addTo(mymap)
            .bindPopup("<b>ACBA</b> Location.").openPopup();

        mymap.scrollWheelZoom.disable();
        mymap.touchZoom.disable();
    </script>
    <!-- Ena Map -->
{% endblock %}

{% block javascripts %}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
    <script type="text/javascript">
        $(function () {

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