{% extends "@templates/"~template~"/view/base.html.twig" %}

{% block meta %}{{ getMeta(contactForm) }}{% endblock %}

{% block javascript %}
    {{ parent() }}
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google.apiKey }}" type="text/javascript"></script>
    <script src="{{ asset('templates/'~template~'/assets/js/kontakt.js') }}"></script>
{% endblock %}

{% block content %}
    <section class="articleContact">
        <div class="grid-container">
            <div class="grid-x grid-margin-x large-up-2">
                {% if page is not null %}
                    <div class="cell">
                        <h1>{{ page.title }}</h1>
                        <article class="fullContent">{{ page.content|raw }}</article>
                    </div>
                {% endif %}
                <div class="cell">
                    {% for message in app.flashes('contact.error') %}
                        <div class="callout alert">
                            {{ message }}
                        </div>
                    {% endfor %}
                    {% for message in app.flashes('contact.success') %}
                        <div class="callout success">
                            {{ message }}
                        </div>
                    {% else %}
                        <div class="formContact">
                            {{ form|raw }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>
    <sectiont class="mapContact">
        <div class="mapGoogleView">
            {% for map in contactForm.maps %}
                {% if map.customMap %}
                    <div class="pinWindowShow hide">
                        {{ map.windowInfo|raw }}
                    </div>
                    <div class="googlemaps text-center responsive-embed float-center" id="googleMaps" data-lat="{{ map.lat }}" data-lng="{{ map.lng }}" data-zoom="{{ map.zoom }}"></div>
                {% else %}
                    <div class="googlemapsembed float-center responsive-embed">
                        {{ map.embeded|raw }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </sectiont>
{% endblock %}
