{# Template : Maps #}

{% extends 'chop/layouts.twig' %}

{% block content %}


<div class="pageWrap">

    <div class="contentPageWrap">

        {% set place1 = { 'title' : 'Dundee  office', 'coords' : '56.4623546,-2.9601447999999664', 'description' : '<div class="stockistInfoWrap" id="stockistInfoWrap1"><p>Some Dundee office text here</p></div>' } %}
        {% set place2 = { 'title' : 'Riga office', 'coords' : '56.9588118,24.133568999999966', 'description' : '<div class="stockistInfoWrap" id="stockistInfoWrap2"><p>Some Riga office text here</p></div>' } %}
        {% set place3 = { 'title' : 'Edinburgh  office', 'coords' : '55.94887019999999,-3.213034300000004', 'description' : '<div class="stockistInfoWrap" id="stockistInfoWrap3"><p>Some Edinburgh  office text here</p></div>' } %}

        {% set places = [place1, place2, place3] %}
        <div>
            <h3>Simple Map</h3>
            <div class="mapWrap">
                <div class="map js_map" data-coords="{{ place1['coords'] }}">
                </div>
            </div> <!-- .mapWrap -->
        </div>

        <div>
            <h3>Custom marker</h3>
            <div class="mapWrap">
                <div class="map js_map" data-coords="{{ place2['coords'] }}" data-marker-icon="/plugins/GoogleMaps/images/map_marker.png">
                </div>
            </div> <!-- .mapWrap -->
        </div>

        <div>
            <h3>Custom Infowindow</h3>
            <div class="mapWrap">
                <div class="map js_map" data-coords="{{ place3['coords'] }}" data-description="{{ place3['description'] }}">
                </div>
            </div> <!-- .mapWrap -->
        </div>

        <div>
            <h3>Custom Map options</h3>
            <div class="mapWrap">
                <div class="map customMap js_customMap" data-coords="{{ place3['coords'] }}" data-description="{{ place3['description'] }}">
                </div>
            </div> <!-- .mapWrap -->
        </div>

        <div>
            <h3>Change map on fly</h3>
            <div class="mapWrap">
                <div class="map js_map js_targetMap" data-coords="{{ place3['coords'] }}" data-coords="{{ place3['coords'] }}" data-description="{{ place3['description'] }}">
                </div>
            </div> <!-- .mapWrap -->
            <a href="#" class="button js_changeMapPlace">Change map place</a>
            <a href="#" class="button js_changeMapOptions">Change map Options</a>
        </div>

        <div>
            <div>
                <h2>List Example</h2>
                <ul id="coordsArray">

                    {% for place in places %}

                        <li data-coords="{{ place['coords'] }}" data-marker-icon="/plugins/GoogleMaps/images/mapIcon-{{ loop.index }}.png">
                            <h3 class="title">{{ place['title'] }}</h3>
                            <div class="description">
                                {{place['description']|raw}}
                            </div>
                        </li>

                    {% endfor %}
                </ul>
            </div>

            <div>
                <div class="mapWrap">
                    <div class="map mapMultiple js_mapMultiple" data-coords-array="#coordsArray" data-title-selector=".title" data-description-selector=".description">
                    </div>
                </div> <!-- .mapWrap -->
            </div>
        </div>

        <div>
            <h2>Json Example</h2>

            <script>
                var placesArray = {{places|json_encode()|raw}};
            </script>

            <div class="mapWrap">
                <div class="map js_map" data-json-array="placesArray"></div>
            </div> <!-- .mapWrap -->
        </div>

        <div>
            <div>
                <h2>Stockist search</h2>

                <form class="stockistSearch">
                    <div class="row">
                        <label>Address</label>
                        <div class="inputWrap">
                            <input class="text">
                        </div>
                    </div>
                    <div class="row">
                        <button class="button">Search</button>
                    </div>
                </form>

                <div id="stockistResults"></div>
            </div>

            <div class="mapWrap">
                <div class="map mapSearch js_mapSearch" data-json-array="placesArray"></div>
            </div> <!-- .mapWrap -->
        </div>

        <div>
            <h2>Directions</h2>

            <div class="mapWrap">
                <div class="map directionsMap js_directionsMap" data-coords="{{ place1['coords'] }}"></div>
            </div> <!-- .mapWrap -->

            <div>
                {# use include within plugin #}
                <form action="#" class="googleMapsSearchForm js_googleMapsSearchForm">
                    <fieldset>
                        <div class="row">
                            <label for="googleMapsSearch">Get Directions</label>
                            <div class="inputWrap buttonInline">
                                <input type="text" id="googleMapsSearch" name="google_maps_search" placeholder="Location or Postcode" />
                                <button type="submit" class="button">Search</button>
                            </div> <!-- .inputWrap.buttonInline -->
                        </div> <!-- .row -->
                    </fieldset>
                </form>

                {# use include within plugin #}
                <div class="mapOutputPanel js_mapOutputPanel">
                </div> <!-- .mapOutputPanel -->
            </div>
        </div>

    </div> <!-- .contentPageWrap -->

</div> <!-- .pageWrap -->

{% endblock %}
