{% load cms_tags allink_cms_tags sekizai_tags i18n thumbnail allink_image_tags %}

{# A map only makes sense, when locations are assigned #}
{% if object_list %}

    {% for object in object_list %}

        <div class="locations-plugin details-and-map-container {{ instance.css_classes }}">

            <div class="details-and-map-container__col-1 text-container">
                {% if object.title %}
                    <h4 class="details-and-map-container__heading">{% render_model_ajax object "title" %}</h4>
                {% endif %}

                {% if object.primary_contact.preview_image %}
                    <div class="image-container">
                        {% render_image image=object.primary_contact.preview_image %}
                    </div>
                    <p>
                        {% render_model_ajax object.primary_contact "first_name" %}&nbsp;{% render_model_ajax object.primary_contact "last_name" %}<br>
                        {% if object.primary_contact.job_function %}
                            {{object.primary_contact.job_function}}<br>
                        {% endif %}
                    </p>
                {% endif %}

                <p>
                    {% if object.subtitle %}
                        {{object.subtitle}}<br>
                    {% endif %}
                    {% if object.address_1 %}
                        {{ object.address_1 }}<br>
                        {{ object.address_2 }}<br>
                        {{ object.address_3 }}<br>
                    {% endif %}
                    {% if object.address_4 %}
                        {{ object.address_4 }}<br>
                    {% endif %}
                </p>

                <p>
                    {% if object.email %}
                        {% include "partials/buttons/link.html" with link_prefix="mailto:" link_url=object.email link_label=object.email link_classes="text" %}<br>
                    {% endif %}
                    {% if object.phone %}
                        {% trans "Phone:" %} {% include "partials/buttons/link.html" with link_prefix="tel:" link_url=object.phone link_label=object.phone_formatted link_classes="text" %}<br>
                    {% endif %}
                    {% if object.mobile %}
                        {% trans "Mobile:" %} {% include "partials/buttons/link.html" with link_prefix="tel:" link_url=object.mobile link_label=object.mobile_formatted link_classes="text" %}<br>
                    {% endif %}
                    {% if object.fax %}
                        {% trans "Fax:" %} {% include "partials/buttons/link.html" with link_prefix="tel:" link_url=object.fax link_label=object.fax_formatted link_classes="text" %}<br>
                    {% endif %}
                </p>

                {% if object.map_link %}
                    <p>
                        {% trans "Directions" as link_label %}
                        {% include "partials/buttons/link.html" with link_url=object.map_link link_label=link_label link_classes="text" link_attributes='target="_blank" rel="noopener"' icon="arrow-external" %}
                    </p>
                {% endif %}

                {% if object.opening_hours_display %}
                    <h4>{% trans "Opening hours" %}</h4>
                    {{object.opening_hours_display}}
                {% endif %}

            </div>

            {# LAT and LNG are required for the map #}
            {% if object.lat or object.lng %}

                <div class="details-and-map-container__col-2 text-container">

                    <div class="details-and-map-container__map-container">
                        <div class="locations-map" id="map-{{object.id}}" data-zoom-level="{{instance.zoom_level}}"></div>
                    </div>

                    <script>

                        {# init map array if hasn't already been set #}
                        if(!window.MAPS) {
                            window.MAPS = [];
                        }

                        var map_locations = {
                            id: {{object.id|escapejs}},
                            totalNumberOfLocations: {{object_list.count|escapejs}},
                            locations: {
                                {# in case of this template, we only have 1 marker per map, so we have to hardcode the key "1" #}
                                1: {
                                    lat: '{{object.lat|escapejs}}',
                                    lng: '{{object.lng|escapejs}}',
                                    infowindow_content: '{% spaceless %}
                                    <div class="map-info-box">
                                        <address>
                                            <div class="block text-container">'
                                                {% if object.title %}
                                                    + '<strong>{{object.title|escapejs}}</strong>'
                                                {% endif %}
                                                {% if object.address_1 %}
                                                    + '<br>{{ object.address_1|escapejs}}'
                                                    + '<br>{{ object.address_2|escapejs}}<br>'
                                                    + '<br>{{ object.address_3|escapejs}}<br>'
                                                {% endif %}
                                                {% if object.address_4 %}
                                                    + '<br>{{ object.address_4|escapejs}}<br>'
                                                {% endif %}
                                            + '</div>'
                                            + '<div class="block text-container">'
                                                {% if object.phone %}
                                                    + 'T <a href="tel:{{object.phone|escapejs}}">{{object.phone_formatted|escapejs}}</a>'
                                                {% endif %}
                                                {% if object.mobile %}
                                                    + '<br>M <a href="tel:{{object.mobile|escapejs}}">{{object.mobile_formatted|escapejs}}</a>'
                                                {% endif %}
                                                {% if object.fax %}
                                                    + '<br>F <a href="tel:{{object.fax|escapejs}}">{{object.fax_formatted|escapejs}}</a>'
                                                {% endif %}
                                                {% if object.email %}
                                                    + '<br>E <a href="mailto:{{object.email|escapejs}}">{{object.email|escapejs}}</a>'
                                                {% endif %}
                                                {% if object.map_link %}
                                                    + '<br><br><a href="{{object.map_link|escapejs}}" target="_blank" rel="noopener">{% trans "Directions" %}</a>'
                                                {% endif %}
                                            + '</div>'
                                        + '</address>
                                    </div>
                                    {% endspaceless %}',
                                },
                            }
                        }

                        // add map to array
                        window.MAPS.push(map_locations);

                    </script>

                </div>

            {% endif %}

        </div>

    {% endfor %}

{% endif %}
