{% extends "templates::layouts/default" %}

{% block html_content %}

    <div class="grid page-contact">
        <div class="row">
            <div class="col col--1">
                <div class="headline">
                    <h2>{{ page.entry.theme_text_1 }}</h2>
                </div>
            </div>
            {% include "templates::layouts/partial-breadcrumbs" %}
        </div>

        <div class="world-contacts-wrapper row">

            {% set regions = {} %}
            {% for region in page.entry.theme_contact_regions %}
                {% set regions = regions|merge([{
                    'name': region.regions.__toString,
                    'code': region.field_editor.__toString
                }]) %}
            {% endfor %}

            {% set translations = {
                    'main': trans('theme::general.regions.main'),
                    'region1': trans('theme::general.regions.region1'),
                    'region2': trans('theme::general.regions.region2'),
                    'region3': trans('theme::general.regions.region3'),
                    'region4': trans('theme::general.regions.region4'),
                    'region5': trans('theme::general.regions.region5'),
                    'region6': trans('theme::general.regions.region6'),
                    'region7': trans('theme::general.regions.region7'),
                    'region8': trans('theme::general.regions.region8')
                }
            %}

			{%
				set config = {
					mapConfig: {
							center: {
								lat: 51.23715,
								lng: 15.00944
							},
							fullScreenControl: true,
							mapTypeControl: false,
							rotateControl: false,
							scaleControl: false,
							streetViewControl: false,
							zoom: 2,
							zoomControl: true
						}
				}
			%}

			{%
				set countries = [
					{
						name: 'Polska',
						continent: 'Europa',
						shortContent: '<p>short</p><p>content...</p>',
						fullContent: '<h1>full content!</h1><p>This is full content..</p>',
						location: {
							lat: 52.13,
							lng: 21.00
						}
					},
					{
						name: 'Francja',
						continent: 'Europa',
						shortContent: '<p>short</p><p>content...</p>',
						fullContent: '<h1>full content!</h1><p>This is full content..</p>',
						location: {
							lat: 48.50,
							lng: 02.20
						}
					},
				]
			%}

			{%
				set welcomeContent = "<h1>Example welcome content</h1><p>Lorem ipsum...</p>"
			%}


            <world-contacts :config="{{ config|json_encode }}" :countries="{{ countries|json_encode }}" welcome-content="{{ welcomeContent }}"></world-contacts>

        </div>
    </div><!-- END .grid -->


{% endblock html_content %}

{% block styles %}
    {{ parent() }}
    <link href="{{ mix('css/page-world-contacts.css', 'aluprof-theme') }}" rel="stylesheet">
{% endblock styles %}

{% block js %}
    {{ parent() }}
    <script src="{{ mix('js/world-contacts.js', 'aluprof-theme') }}"></script>
{% endblock js %}