{% extends "base.html" %}
{% load tags %}
{% load static %}

{% block title %} - Ground Stations{% endblock %}

{% block css %}
  <link rel="stylesheet" href="{% static 'lib/mapbox-gl/dist/mapbox-gl.css' %}">
{% endblock css %}

{% block content %}
  <h2>
    Ground Stations
    <button type="button" class="btn btn-sm btn-default map-modal-reveal" data-toggle="modal" data-target="#MapModal">
      <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Map
    </button>
    <div class="stations-totals">
      <button type="button" id="stations-online" class="btn btn-sm btn-default active">
        <span class="label label-online">{{ online }}</span> Online
      </button>
      <button type="button" id="stations-testing" class="btn btn-sm btn-default active">
        <span class="label label-testing">{{ testing }}</span> Testing
      </button>
      <button type="button" id="stations-offline" class="btn btn-sm btn-default">
        <span class="label label-offline">{{ offline }}</span> Offline
      </button>
      <button type="button" id="stations-future" class="btn btn-sm btn-default">
        <span class="label label-future">{{ future }}</span> Future
      </button>
    </div>
  </h2>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-hover">
        <thead>
          <th>ID</th>
          <th>Name</th>
          <th>Location</th>
          <th>Total</th>
          <th>Future</th>
          <th>Antennas</th>
          <th>Owner</th>
        </thead>
        <tbody>
          {% for station in stations %}
            <tr class="station-row clickable-row" data-href="{% url 'base:station_view' station_id=station.id %}" {% if station.status < 1 %}style="display:none;"{% endif %}>
              <td>
                <a href="{% url 'base:station_view' station_id=station.id %}">
                  <span class="station
                               {% if station.last_seen %}
                                 label label-{{ station.get_status_display|lower }}
                               {% else %}
                                 label label-future
                               {% endif %}"
                        data-toggle="tooltip"
                        data-placement="bottom"
                        title="{% if station.last_seen %}
                                 Seen {{ station.last_seen|timesince }} ago
                               {% else %}
                                 Never seen
                               {% endif %}">
                    {{ station.id }}
                  </span>
                </a>
              </td>
              <td>
                {{ station.name }}
              </td>
                <td>
                  {% if station.has_location %}
                    {% if station.qthlocator %}
                      <span data-toggle="tooltip" data-placement="bottom"
                            title="{{ station.lat|floatformat:-3 }}°, {{ station.lng|floatformat:-3 }}°">
                      {{ station.qthlocator }}
                    {% else %}
                      {{ station.lat|floatformat:-1 }}°, {{ station.lng|floatformat:-1 }}°
                    {% endif %}
                    @{{ station.alt}}m
                  {% else %}
                    Location not defined
                  {% endif %}
                </td>
              <td>
                <a href="{% url 'base:observations_list' %}?station={{ station.id }}" class="badge total-pill" data-placement="bottom">
                  {{ station.total_obs }}
                </a>
              </td>
              <td>
                <a href="{% url 'base:observations_list' %}?future=1&good=0&bad=0&unknown=0&failed=0&station={{ station.id }}" class="badge badge-info">
                  {{ station.future_obs }}
                </a>
              </td>
              <td class="antennas">
                {% for antenna in station.antennas.all %}
                  <span class="antenna-pill" data-toggle="tooltip" data-placement="bottom"
                        title="{% for range in antenna.frequency_ranges.all %} {{ range.min_frequency|frq }} - {{ range.max_frequency|frq }}&#xA{% endfor %}">
                    {{ antenna.antenna_type }} ({{ antenna.bands}})
                  </span>
                {% endfor %}
              </td>
              <td>
                <a href="{% url 'users:view_user' username=station.owner.username %}">
                  {{ station.owner.displayname }}
                </a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade map-modal" id="MapModal" tabindex="-1" role="dialog" aria-labelledby="MapModal">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Stations Map</h4>
        </div>
        <div class="modal-body">
          <div id="map" data-mapboxid="{{ mapbox_id }}" data-mapboxtoken="{{ mapbox_token }}" data-stations="{% url 'base:stations_all' %}"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}


{% block javascript %}
  <script src="{% static 'lib/mapbox-gl/dist/mapbox-gl.js' %}"></script>
  <script src="{% static 'js/stations.js' %}"></script>
  <script src="{% static 'js/map.js' %}"></script>
{% endblock %}
