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

{% block title %}
Facilities | BackOffice | {{ block.super }}
{% endblock %}

{% 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 content %}
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Facilities - BackOffice</h3>
  </div>
  <div class="panel-body">
    <p class="lead">The following {{ facility_list.count }} facilities are defined for {{ camp.title }}</p>
    <p>
      <a href="{% url 'backoffice:facility_create' camp_slug=camp.slug %}" class="btn btn-success"><i class="fas fa-plus"></i> Create Facility</a>
      <a class="btn btn-default" href="{% url 'backoffice:index' camp_slug=camp.slug %}"><i class="fas fa-undo"></i> Backoffice</a>
    </p>
    <table class="table datatable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Team</th>
          <th>Description</th>
          <th>Location</th>
          <th class="text-center">Feedback / Unhandled</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
      {% for facility in facility_list %}
      <tr>
        <td>{{ facility.name }}</td>
        <td><i class="fas fa-{{ facility.facility_type.icon }} fa-2x fa-fw"></i> {{ facility.facility_type.name }}</td>
        <td>{{ facility.team.name }} Team</td>
        <td>{{ facility.description|linebreaksbr|default:"N/A" }}</td>
        <td>{{ facility.location }}</td>
        <td class="text-center"><span class="badge">{{ facility.feedbacks.count }}</span> / <span class="badge">{{ facility.unhandled_feedbacks.count }}</span></td>
        <td>
          <div class="btn-group btn-group-vertical">
            <a href="{% url "backoffice:facility_detail" camp_slug=camp.slug facility_uuid=facility.pk %}" class="btn btn-primary"><i class="fas fa-search"></i> Details</a>
            <a href="{% url "backoffice:facility_update" camp_slug=camp.slug facility_uuid=facility.pk %}" class="btn btn-primary"><i class="fas fa-edit"></i> Update</a>
            <a href="{% url "backoffice:facility_delete" camp_slug=camp.slug facility_uuid=facility.pk %}" class="btn btn-danger"><i class="fas fa-times"></i> Delete</a>
          </div>
        </td>
      </tr>
      {% endfor %}
    </table>
    <p>
    <div id="map" class="map"></div>

  </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 "backoffice:facility_detail" camp_slug=facility.camp.slug facility_uuid=facility.uuid as detail %}
    marker = L.marker([{{ facility.location.y }}, {{ facility.location.x }}], {icon: {{ facility.facility_type.marker }}}).bindPopup("<b>{{ facility.name }}</b><br><p>{{ facility.description|linebreaksbr }}</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></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 %}