{% extends 'program_base.html' %}
{% load leaflet_tags %}
{% load static %}

{% block extra_head %}
    {% leaflet_css %}
    <script src="{% static 'js/leaflet-1.6.0.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/proj4.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/proj4leaflet.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/leaflet-color-markers.js' %}" type="text/javascript"></script>
{% endblock extra_head %}

{% block title %}
Facilities of type {{ facilitytype }} | {{ block.super }}
{% endblock %}

{% block content %}
<div class="panel panel-default">
  <div class="panel-heading">
      <h3 class="panel-title">Facilities of type {{ facilitytype }}</h3>
  </div>
  <div class="panel-body">
    <div class="list-group">
    {% for facility in facility_list %}
      {% if request.user.is_authenticated %}
      <a href="{% url 'facilities:facility_detail' camp_slug=camp.slug facility_type_slug=facility.facility_type.slug facility_uuid=facility.uuid %}" class="list-group-item">
      {% else %}
      <div class="list-group-item">
      {% endif %}
      <h4 class="list-group-item-heading">
      <i class="{{ facility.facility_type.icon }} fa-2x fa-pull-left fa-fw"></i> {{ facility.name }}
      <img class="pull-right" src="{% static 'img/leaflet/marker-icon-'|add:facility.facility_type.marker|slice:"-4"|add:'.png' %}">
      </h4>
      <p class="list-group-item-text">{{ facility.description }}</p>
      <p class="list-group-item-text"><i>Location: Lat {{ facility.location.y }} Long {{ facility.location.x }}</i></p>
      {% if request.user.is_authenticated %}
      </a>
      {% else %}
      </div>
      {% endif %}
    {% endfor %}
    <p>
    <div id="map" class="map"></div>
    </div>
    <a href="{% url "facilities:facility_type_list" camp_slug=camp.slug %}" class="btn btn-primary"><i class="fas fa-list"></i> Back to facility type list</a>
  </div>
</div>

<script type="text/javascript">
function MapReadyCallback() {
    // loop over facilities and add a marker for each,
    // include a popup in the marker
    var markers = new Array();
    {% for facility in facility_list %}
    {% url "facilities:facility_detail" camp_slug=facility.camp.slug facility_type_slug=facility.facility_type.slug facility_uuid=facility.uuid as detail %}
    {% url "facilities:facility_feedback" camp_slug=facility.camp.slug facility_type_slug=facility.facility_type.slug facility_uuid=facility.uuid as feedback %}
    marker = L.marker([{{ facility.location.y }}, {{ facility.location.x }}], {icon: {{ facility.facility_type.marker }}}).bindPopup("<b>{{ facility.name }}</b><br><p>{{ facility.description }}</p><p>Responsible team: {{ facility.facility_type.responsible_team.name }} Team</p>{% if request.user.is_authenticated %}<p><a href='{{ detail }}' class='btn btn-primary' style='color: white;'><i class='fas fa-search'></i> Details</a><a href='{{ feedback }}' class='btn btn-primary' style='color: white;'><i class='fas fa-comment-dots'></i> Feedback</a></p>{% endif %}").addTo(this);
    markers.push(marker.getLatLng());
{% endfor %}
    var markerBounds = L.latLngBounds(markers);
    // fitBounds appears to not respect maxZoom from the tilelayer,
    // leading to the "Error: Attempted to load an infinite number of tiles" mess,
    // so hardcode maxZoom to 13 here
    this.fitBounds(markerBounds, {maxZoom: 13});
};
</script>

<script src="{% static 'js/kfmap.js' %}" type="text/javascript"></script>

{% endblock %}