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

{% load staticfiles %}

{% block title %} - Observation {{ observation.id }}{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-6">
      <h2 id="observation-info"
          data-start="{{ observation.start|date:"U"}}"
          data-end="{{ observation.end|date:"U"}}">
        Observation #{{ observation.id }}
      </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>
    </div>
    <div class="col-md-6 text-right">
      <h2>
        {% if is_deletable %}
          <a href="{% url 'base:observation_delete' id=observation.id %}" id="obs-delete" class="btn btn-danger">Delete Observation</a>
        {% endif %}
      </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <table class="table table-hover">
        <thead>
          <th>Satellite</th>
          <th>Frequency</th>
          <th>Encoding</th>
          <th>Timeframe</th>
          <th>Observer</th>
        </thead>
        <tbody>
            <tr>
              <td>
                <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
                  {{ observation.satellite.norad_cat_id }}  - {{ observation.satellite.name }}
                </a>
              </td>
              <td>{{ observation.transmitter.downlink_low|frq }}</td>
              <td>{{ observation.transmitter.mode|default:"-" }}</td>
              <td>{{ observation.start|date:"Y-m-d H:i:s" }}</br>{{ observation.end|date:"Y-m-d H:i:s" }}</td>
              <td>
                <a href="{% url 'users:view_user' username=observation.author.username %}">
                  {{ observation.author.displayname }}
                </a>
              </td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>

  {% if not observation.data_set.all %}
    <div class="row">
      <div class="col-md-12">
        <p class="notice">
          No data associated with this observation.
        </p>
      </div>
    </div>
  {% else %}
    <div class="row">
      <div class="col-md-12">
        <h3>Timeline</h3>
        <div id="timeline"></div>
        <div id="hoverRes">
          <div class="coloredDiv"></div>
          <div id="name"></div>
          <div id="scrolled_date"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">

        <div class="row">
          <div class="col-md-6">
            <h3>Data</h3>
          </div>
          <div class="col-md-6 text-right">
            {% if discuss_slug %}
              <h3>
                <a id="obs-discuss"
                   data-slug="{{ discuss_slug }}"
                   href="{% if has_comments %}{{ discuss_slug }}{% else %}{{ discuss_url }}{% endif %}"
                   class="btn btn-primary" target="_blank">
                  <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                  Discuss Observation
                </a>
              </h3>
            {% endif %}
          </div>
        </div>

        {% for data in dataset %}
          <div class="panel panel-default observation-data" id="{{ data.id }}"
               data-start="{{ data.start|date:"U" }}"
               data-end="{{ data.end|date:"U" }}"
               data-groundstation="{{ data.ground_station }}">
            <div class="panel-heading">
              <h3 class="panel-title">
                {% if data.is_vetted %}
                  {% if data.is_verified %}
                    <span class="glyphicon glyphicon-ok-sign {{ data.vetted_status }}" aria-hidden="true"
                          data-toggle="tooltip" data-placement="right"
                          title="Verified good on {{ data.vetted_datetime|date:"Y-m-d H:i:s" }} by {{ data.vetted_user }}"></span>
                  {% else %}
                    <span class="glyphicon glyphicon-remove-sign {{ data.vetted_status }}" aria-hidden="true"
                          data-toggle="tooltip" data-placement="right"
                          title="Verified bad on {{ data.vetted_datetime|date:"Y-m-d H:i:s" }} by {{ data.vetted_user }}"></span>
                  {% endif %}
                {% endif %}

                Data payload <a href="{% url 'base:observation_data_view' id=data.id %}">#{{ data.id }}</a> ~

                Ground Station:
                <a href="{% url 'base:station_view' id=data.ground_station.id %}">
                  {{ data.ground_station }}
                </a>
              </h3>

              <div class="vetting">
                {% if not data.is_vetted and is_vetting_user %}
                  <a href="{% url 'base:data_verify' id=data.id %}">
                    <button id="verify-data" type="button" class="btn btn-default btn-xs">
                      <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> Verify
                    </button>
                  </a>
                  <a href="{% url 'base:data_mark_bad' id=data.id %}">
                    <button id="bad-data" type="button" class="btn btn-default btn-xs">
                      <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> No Data
                    </button>
                  </a>
                {% endif %}
              </div>
            </div>
            <div class="panel-body">
              <ul class="nav nav-tabs data-tabs" role="tablist">
                <li role="presentation" class="active">
                  <a href="#tab-waterfall-{{ data.id }}"
                     aria-controls="tab-waterfall-{{ data.id }}"
                     role="tab"
                     data-toggle="tab">Watefall</a>
                </li>
                <li role="presentation">
                  <a href="#tab-audio-{{ data.id }}"
                     aria-controls="tab-audio-{{ data.id }}"
                     role="tab"
                     data-toggle="tab">Audio</a>
                </li>
                <li role="presentation">
                  <a href="#tab-data-{{ data.id }}"
                     aria-controls="tab-data-{{ data.id }}"
                     role="tab"
                     data-toggle="tab">Data</a>
                </li>
              </ul>
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="tab-waterfall-{{ data.id }}">
                  {% if data.waterfall %}
                    <div id="waterfall-{{ data.id }}" class="waterfall">
                      <img class="img-responsive waterfall" src="{{ MEDIA_URL }}{{ data.waterfall }}" alt="waterfall">
                    </div>
                  {% else %}
                    <div class="notice">
                      Waiting for waterfall
                    </div>
                  {% endif %}
                </div>
                <div role="tabpanel" class="tab-pane" id="tab-audio-{{ data.id }}">
                  {% if data.payload %}
                    <div id="loading" class="notice">Loading data</div>
                    <div class="wave tab-data" id="data-{{ data.id }}"
                         data-id="{{ data.id }}"
                         data-payload="{{ MEDIA_URL }}{{ data.payload }}"></div>
                   <button type="button" class="btn btn-primary btn-xs playpause">
                     <span class="glyphicon glyphicon-play"></span>
                     <span class="glyphicon glyphicon-pause"></span>
                   </button>
                   <span id="playback-time-{{ data.id }}" class="label label-info playback-time"></span>
                  {% else %}
                    <div class="notice">
                      Waiting for audio
                    </div>
                  {% endif %}
                </div>
                <div role="tabpanel" class="tab-pane tab-data" id="tab-data-{{ data.id }}">
                  {% if data.demoddata.all %}
                    {% for demoddata in data.demoddata.all %}
                    <span class="label label-default">{{ demoddata.payload_demod }}</span>
                    <div class="well well-sm data-well">
                      {{ demoddata.display_payload }}
                    </div>
                    {% endfor %}
                  {% else %}
                    <div class="notice">
                      Waiting for demoded data
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <div class="panel-footer">
              {% if not data.payload and not data.waterfall  %}
                &nbsp;
              {% endif %}
              {% if data.payload %}
                <a href="{{ MEDIA_URL }}{{ data.payload }}"
                   target="_blank"
                   download="">
                  <button type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-download"></span> Audio
                  </button>
                </a>
              {% endif %}
              {% if data.waterfall %}
                <a href="{{ MEDIA_URL }}{{ data.waterfall }}"
                   target="_blank"
                   download="">
                  <button type="button" class="btn btn-default btn-xs">
                    <span class="glyphicon glyphicon-download"></span> Waterfall
                  </button>
                </a>
              {% endif %}
              <span class="pull-right hidden-xs">
                <span class="label label-default">Timeframe</span>
                {{ data.start|date:"Y-m-d H:i:s" }} - {{ data.end|date:"Y-m-d H:i:s" }}
              </span>

            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  <div class="row tle-data">
    <div class="col-md-12">
      <h3>TLE used <small>by Celestrak</small></h3>
        <pre>{{ observation.tle.tle1 }}<br>{{ observation.tle.tle2 }}</pre>
    </div>
  </div>

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

  <!-- Satellite Modal -->
  {% include 'includes/satellite.html' %}

{% endblock content %}

{% block javascript %}
  <script src="{% static 'lib/d3/d3.js' %}"></script>
  <script src="{% static 'lib/d3-timeline/src/d3-timeline.js' %}"></script>
  <script src="{% static 'lib/wavesurfer.js/dist/wavesurfer.js' %}"></script>
  <script src="{% static 'lib/moment/moment.js' %}"></script>
  <script src="{% static 'lib/uri.js/src/URI.min.js' %}"></script>
  <script src="{% static 'js/utc.js' %}"></script>
  <script src="{% static 'js/observation_view.js' %}"></script>
  <script src="{% static 'js/satellite.js' %}"></script>
{% endblock javascript %}