{% include "snippetMacros.html" %}

{% macro renderMapLocations(items, pageUrl, classname) %}
  {% if items %}
    {% for item in items %}
      {{ renderMapLocation(item, pageUrl, classname) }}
    {% endfor %}
  {% else %}
    <h4>{{ __('There are no map locations yet.') }}</h4>
  {% endif %}
{% endmacro %}

{% macro renderMapLocation(item, pageUrl, classname) %}
  <li class="apos-location {{classname}} {% for tag in item.tags %} {{ tag | replace(' ','-') }}{% endfor %}" data-location-id="{{item._id}}">
    {# Even if you plan to override this link with javascript, it still #}
    {# must exist, otherwise your maps are not Google-friendly. -Tom #}
    <a class="apos-location-list-title" href="{{ item.url }}">{{ item.title | e }}</a>
    <div class="apos-location-list-description">{{ item.descr }}</div>
  </li>
{% endmacro %}

{% macro renderGoogleMap(mapItems, mapOptions={}) %}
  {% set _id = 'apos-map-canvas-' + aposGenerateId() %}
  <div class="apos-map-canvas" id="{{ _id }}"></div>

  {# load in the google maps apis #}
  {# instantiate a new AposGoogleMap #}
  <script type="text/javascript">
    $(function() {
      new AposGoogleMap({{ aposPruneMapLocations(mapItems) | json }}, {{ _id | json }}, {{ mapOptions | json }});
    });
  </script>
{% endmacro %}


{# let's show off all the stuff we can hold in a map item #}

{% macro renderMapLocationWithDetails(item, pageUrl, classname) %}
  <li class="apos-location {{classname}} {% for tag in item.tags %} {{ tag | replace(' ','-') }}{% endfor %}" data-location-id="{{item._id}}">
    {# Even if you plan to override this link with javascript, it still #}
    {# must exist, otherwise your maps are not Google-friendly. -Tom #}
    <a class="apos-location-list-title" href="{{ item.url }}">{{ item.title | e }}</a>
    {% if item._edit %}
      <a class="apos-control apos-ui apos-button apos-edit-snippet-button" data-edit-{{ item.type | css }} data-slug="{{ item.slug }}" href="#"><i class="icon-pencil"></i> Edit</a>
    {% endif %}

    {{ aposArea(item, 'body', { edit: false }) }}

    <div class="apos-location-list-title">{{ __('Address') }}</div>
    <div class="apos-location-list-description">{{ item.address }}</div>

    <div class="apos-location-list-title">{{ __('Coordinates') }}</div>
    <div class="apos-location-list-description">{{ item.coords.lat }}, {{ item.coords.lng }}</div>

    <div class="apos-location-list-title">{{ __('Created On') }}</div>
    <div class="apos-location-list-description">{{ item.createdAt }}</div>
  </li>
{% endmacro %}