{% extends "getitfixed:/templates/layout.jinja2" %}

{% block content %}
<div class="content">
  <a class="btn btn-danger btn-new-issue"
     href="{{request.route_url("c2cgeoform_item", id="new")}}"
     role="button">{{_("Report an issue")}}</a>
  <div id="map" class="map">
    <div class="ol-control legend-btn">
      <button title="{{_("Display legend")}}" type="button">
        <i class="glyphicon glyphicon-list gif-glyphicon"></i>
      </button>
    </div>
    <div class="feature-legend hidden">
      <div class="panel panel-default">
        <div class="panel-heading">
          <button type="button" class="close close-button" aria-label="Close">
              <span aria-hidden="true" class="gif-close">&times;</span>
          </button>
          {{_("Legend")}}
        </div>
        <ul class="list-group">
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="{{request.static_path("getitfixed:static/scripts/legend.js")}}"></script>
<script>
(function() {
  let map = c2cgeoform.initMap('map', Object.assign(
    {{ map_options | tojson }},
    {
      onFeaturesLoaded: generateLegend
    }
  ))
  // On feature click redirect to url in feature property
  map.on('click', e =>
    map.forEachFeatureAtPixel(
      e.pixel,
      f => (window.location.href = f.getProperties()['url'])
    )
  )
  map.getViewport().appendChild(document.querySelector('.legend-btn'))
  const toggleLegend = function () {
    $('.feature-legend').toggleClass('hidden')
  }
  $('.gif-glyphicon').on('click', toggleLegend)
  $('.close-button').on('click', toggleLegend)
}())
</script>
{% endblock content %}
