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

{% 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 %}
{{ facility.name }} | Facilities | BackOffice | {{ block.super }}
{% endblock %}

{% block content %}
<div class="panel panel-default">
  <div class="panel-heading">
      <h3 class="panel-title">{{ facility.name }} | Facilities | BackOffice</h3>
  </div>
  <div class="panel-body">
    <p>
      <a href="{% url 'backoffice:facility_update' camp_slug=camp.slug facility_uuid=facility.uuid %}" class="btn btn-primary"><i class="fas fa-edit"></i> Update Facility</a>
      <a href="{% url 'backoffice:facility_delete' camp_slug=camp.slug facility_uuid=facility.uuid %}" class="btn btn-danger"><i class="fas fa-times"></i> Delete Facility</a>
      <a href="{% url 'backoffice:facility_list' camp_slug=camp.slug %}" class="btn btn-default"><i class="fas fa-undo"></i> Facility List</a>
    </p>
    <table class="table">
      <tbody>
        <tr>
          <th>Facility Name</th>
          <td>{{ facility.name }}</td>
        </tr>
        <tr>
          <th>Facility Type</th>
          <td><i class="{{ facility.facility_type.icon }}"></i> {{ facility.facility_type.name }}</p>
        </tr>
        <tr>
          <th>Description</th>
          <td>{{ facility.description|linebreaksbr }}</td>
        </tr>
        <tr>
          <th>Opening Hours</th>
          <td>
          {% if facility.opening_hours.exists %}
          <table class="table table-condensed">
            <thead>
              <tr>
                <th>Opens</th>
                <th>Closes</th>
                <th>Duration</th>
                <th>Notes</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for opening in facility.opening_hours.all %}
              <tr>
                <td>{{ opening.when.lower }}</td>
                <td>{{ opening.when.upper }}</td>
                <td>{{ opening.duration }}</td>
                <td>{{ opening.notes|trustedcommonmark|default:"N/A" }}</td>
                <td>
                  <div class="btn-group">
                    <a href="{% url 'backoffice:facility_opening_hours_update' camp_slug=camp.slug facility_uuid=facility.pk pk=opening.pk %}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> Update</a>
                    <a href="{% url 'backoffice:facility_opening_hours_delete' camp_slug=camp.slug facility_uuid=facility.pk pk=opening.pk %}" class="btn btn-danger btn-sm"><i class="fas fa-times"></i> Delete</a>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          This facility does not have opening hours, it is always open.
          {% endif %}
          <p>
          <a href="{% url 'backoffice:facility_opening_hours_create' camp_slug=camp.slug facility_uuid=facility.pk %}" class="btn btn-success btn-sm"><i class="fas fa-plus"></i> Add opening hours</a>
          </td>
        </tr>
        <tr>
          <th>Feedback</th>
          <td>
          <table class="table">
            <thead>
              <tr>
                <th>Username</th>
                <th>Created</th>
                <th>Facility</th>
                <th>Quick Feedback</th>
                <th>Comment</th>
                <th>Urgent</th>
                <th>Handled</th>
              </tr>
            </thead>
            <tbody>
            {% for feedback in facility.feedbacks.all %} 
            <tr>
              <td>{{ feedback.user|default:"N/A" }}</td>
              <td>{{ feedback.created }}</td>
              <td>{{ feedback.facility }}</td>
              <td><i class="{{ feedback.quick_feedback.icon }} fa-2x"></i> {{ feedback.quick_feedback }}</td>
              <td>{{ feedback.comment|default:"N/A" }}</td>
              <td>{{ feedback.urgent|yesno }}</td>
              <td>{{ feedback.handled|yesno }}</td>
            </tr>
            {% endfor %}
            </tbody>
          </table>
          </td>
        </tr>
        <tr>
          <th>Location</th>
          <td>
            Lat {{ facility.location.y }} Long {{ facility.location.x }}<br>
            <div id="map" class="map"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script type="text/javascript">
function MapReadyCallback() {
    // add a marker for this facility
    var marker = L.marker([{{ facility.location.y }}, {{ facility.location.x }}], {icon: {{ facility.facility_type.marker }}})
    marker.bindPopup("<b>{{ facility.name }}</b><br><p>{{ facility.description|linebreaksbr }}</p>").addTo(this);
    // max zoom since we have only one marker
    this.setView(marker.getLatLng(), 13);
};
</script>

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

{% endblock %}