{% extends 'base.html.twig' %}

{% block title %}{{ 'ABOUT'|translate }}{% endblock %}
{% block wrapperClass %}aboutus{% endblock %}

{% block body %}

    <div class="container clearfix navpadding">

        <h1 class="col-md-12 p0">{{ readFunnel(data, 1) }}</h1>

        <div class="col-md-9 col-sm-12 col-xs-12 extra-info p0">
            <p class="">{{ readFunnel(data, 35)|raw }}</p>

            <div class="content col-md-12 col-sm-12 col-xs-12 p0">
                <div id="map"></div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h2 class="mb10">{{ readFunnel(data, 13) }}</h2>
                    {{ readFunnel(data, 3)|raw }}
                </div>
            </div>
        </div>

        <div class="col-md-3 hidden-sm hidden-xs">
            <div class="content col-md-12 col-xs-12 p0 sidebar">
                {{ readFunnel(data, 83)|raw }}
            </div>

            <div class="content col-md-12 col-xs-12 p0 sidebar">
                {% include 'includes/snippets/facebook.page.plugin.html.twig' with {
                extraAttributes: ' data-width=255 '
                } %}
            </div>

            {% if ("TWITTERURL"|translate != "TWITTERURL") and (regGet('countrycodeid') == 14) %}
                <div class="content col-md-12 col-xs-12 p0 sidebar">
                    {% include 'includes/snippets/twitter.plugin.html.twig' %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock body %}
{% block assetsBottom %}
    <style>
        #map{
            min-height : 480px;
            margin-bottom : 15px;
            height:480px;
        }
        .aboutus .extra-info h3{
            margin:20px 0 10px;
        }
    </style>
    {{ parent() }}
    <script type="text/javascript">

        function initMap() {

            var location = {lat:{{ companyAddress.lati }}, lng: {{ companyAddress.longi }} };
            // Create a map object and specify the DOM element for display.
            map = new google.maps.Map(document.getElementById('map'), {
                center: location,
                scrollwheel: true,
                zoom: 17
            });
            var marker = new google.maps.Marker({
                position: location,
                label: '',
                title: 'The Insiders',
                map: map,
                icon: "{{ regGet('imgpath') }}favicon.ico"
            });
            marker.setMap(map);


            // close infowindow if user clicks on the map for usability
            google.maps.event.addListener(map, "click", function(event) {
                infowindow.close();
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD15iXyN5fdM646Ru94Blr20u1waNWR-Og&callback=initMap" async defer></script>

{% endblock assetsBottom %}