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

{% block title %} - Vet Observations {% endblock %}

{% block css %}
  <link rel="stylesheet" href="{% static 'lib/jquery.json-viewer/json-viewer/jquery.json-viewer.css' %}">
{% endblock css %}

{% block content %}
{% if obs_ids %}
<div class="row mb-3">
  <div class="col mx-auto">
    <div class="d-flex row justify-content-between mt-3">
      <div class="col-4"><button id="btn-prev" class="btn btn-secondary" disabled="true"><span class="mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-left-circle" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
      </svg></span>Previous</button></div>
      <div class="col-4 d-flex justify-content-center"><h3>Observation <span id="current-obs-display">1</span> of <span id="total-obs-display"></span></h3></div>
      <div class="col-4 d-flex align-items-center justify-content-end">
        <div class="d-flex flex-column justify-content-center mr-3">
          <label class="d-block" for="auto-advance-checkbox">
              Auto
          </label>
          <input class="" type="checkbox" id="auto-advance-checkbox">
        </div>
        <button id="btn-next" class="btn btn-secondary" disabled="true">Next<span class="ml-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
      </svg></span></button></div>
    </div>
  </div>
</div>
<div class="row">
  <div id="obs-loading" class="mx-auto spinner-border text-muted"></div>
</div>
{% endif %}
<div id="vet-obs-container" data-chunks_buffer_headstart="{{ chunks_buffer_headstart }}" data-fwd_buffer_chunks="{{ fwd_buffer_chunks }}" 
  data-bwd_buffer_chunks="{{ bwd_buffer_chunks }}" data-page_size="{{ page_size }}" data-query_url="{{ query_url }}">
  {% if not obs_ids %}
    <p class="my-3">No observations with waterfall to vet. Check your search parameters and your vetting permissions and try again. <a href="{{ observation_search_url }}"> Back to the observations search</a>.</p>
  {% endif %}
</div>
{{ obs_ids|json_script:"obs-ids" }}
{% endblock content %}

{% block javascript %}
  <script src="{% static 'lib/wavesurfer.js/dist/wavesurfer.min.js' %}"></script>
  <script src="{% static 'lib/wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js' %}"></script>
  <script src="{% static 'lib/moment/min/moment.min.js' %}"></script>
  <script src="{% static 'lib/jquery.json-viewer/json-viewer/jquery.json-viewer.js' %}"></script>
  <script src="{% static 'lib/satellite.js/dist/satellite.min.js' %}"></script>
  <script src="{% static 'lib/kaitai-struct/KaitaiStream.js' %}"></script>
  <script src="{% static 'js/vet_observations.js' %}"></script>
  <script src="{% static 'js/utc.js' %}"></script>
  <script src="{% static 'js/polar_svg.js' %}"></script>
  <script src="{% static 'js/observation_view.js' %}"></script>
  <script src="{% static 'js/satellite.js' %}"></script>
  <script src="{% static 'js/ax25monitor.js' %}"></script>
  {% endblock javascript %}
  
