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

{% load static %}

{% block title %} - Ground Station {{ station.name }} Status Log{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-12">
      <h2>
        <a href="{% url 'base:station_view' station_id=station.id %}">
          {{ station.id }} - {{ station.name }}
        </a>
      </h2>
      <div class="timezone text-muted">
        <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
        Timeframes are in <a href="#" data-toggle="modal" data-target="#UTCModal">UTC</a>
      </div>
      <table class="table table-hover">
        <thead>
          <th>Status</th>
          <th>Datetime</th>
        </thead>
        <tbody>
          {% for log in station_log %}
            <tr>
              <td>
                <span class="label label-{{ log.get_status_display|lower }}">{{ log.get_status_display }}</span>
              </td>
              <td>
                <span data-toggle="tooltip" title="{{ log.changed|timesince }} ago">{{ log.changed|date:"Y-m-d H:i:s" }}</span>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- UTC Modal -->
  {% include 'includes/utc.html' %}
{% endblock content %}

{% block javascript %}
  <script src="{% static 'lib/moment/min/moment.min.js' %}"></script>
  <script src="{% static 'js/utc.js' %}"></script>
{% endblock javascript %}
