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

{% block extra_head %}
    {% leaflet_js %}
    {% leaflet_css %}
{% endblock extra_head %}

{% block title %}
{{ facility.name }} - Facilities | {{ block.super }}
{% endblock %}

{% block content %}
<div class="panel panel-default">
  <div class="panel-heading">
      <h3 class="panel-title">{{ facility.facility_type.name }}: {{ facility.name }}</h3>
  </div>
  <div class="panel-body">
    <p class="lead">{{ facility.description }}</p>
    {% if request.user.is_authenticated %}
    <a href="{% url "facilities:facility_feedback" camp_slug=camp.slug facility_type_slug=facilitytype.slug facility_uuid=facility.uuid %}" class="btn btn-primary"><i class="fas fa-comment-dots"></i> Submit Feedback</a>
    {% endif %}
    <a href="{% url "facilities:facility_list" camp_slug=camp.slug facility_type_slug=facilitytype.slug %}" class="btn btn-primary"><i class="fas fa-list"></i> Back to {{ facilitytype.name }} list</a>
    <p>{% leaflet_map "facility_detail" %}</p>
  </div>
</div>

<script type="text/javascript">
// add a listener to add the marker for the facility on the leaflet map after it inits
window.addEventListener("map:init", function (e) {
    var detail = e.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 }}]);
    marker.addTo(detail.map);
    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='{{ feedback }}' class='btn btn-primary' style='color: white;'><i class='fas fa-comment-dots'></i> Feedback</a></p>{% endif %}");
    detail.map.setView([{{ facility_list.0.location.y }}, {{ facility_list.0.location.x }}], 15);
}, false);
</script>

{% endblock %}