{% load tags %}
{% load humanize %}
  <div class="row">
    <div class="col col-sm-7">
      <h2 id="observation-info" class="align-middle"
          data-start="{{ observation.start|date:"U"}}"
          data-end="{{ observation.end|date:"U"}}">
        Observation #{{ observation.id }}
        {% if from_vetting %}
          <button id="copy-link-btn" data-permalink="{% url 'base:observation_view' observation_id=observation.id %}" class="btn btn-primary btn-sm py-0 px-1 rounded-pill"><span class="mr-1 d-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link my-auto align-text-top" viewBox="0 0 16 16">
            <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
            <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
          </svg></span><small>Copy Link</small></button>
          {% endif %}
      </h2>
      <div class="timezone text-muted">
            <span class="bi bi-clock" aria-hidden="true"></span>
        Timeframes are in <span id="timezone-info" data-toggle="tooltip" title="">UTC</span>
      </div>
    </div>

    <div class="col d-none d-lg-flex justify-content-end align-items-center">
      <span class="observation-actions">
        {% if user.is_authenticated %}
          <a href="#" class="btn btn-outline-dark" role="button" data-toggle="modal" data-target="#HotkeysModal">
            <span class="bi bi-fire" aria-hidden="true" title="Hotkeys"></span>
          </a>
        {% endif %}
        {% if discuss_slug %}
          <a id="obs-discuss" class="btn btn-primary" role="button"
             data-slug="{{ discuss_slug }}"
             href="{% if has_comments %}{{ discuss_slug }}{% else %}{{ discuss_url }}{% endif %}"
             target="_blank" data-toggle="tooltip" title="Discuss (d)">
            <span class="bi bi-chat-left-fill" aria-hidden="true"></span> Discuss
          </a>
        {% endif %}
        {% if can_delete %}
          <a id="obs-delete" class="btn btn-danger" role="button" href="{% url 'base:observation_delete' observation_id=observation.id %}">
            <span class="bi bi-trash" aria-hidden="true" title="Delete Observation (x)"></span>
          </a>
        {% endif %}
      </span>
    </div>

    <div class="col d-flex d-lg-none justify-content-end align-items-center">
      <span class="observation-actions">
        {% if user.is_authenticated %}
          <a href="#" class="btn btn-outline-dark" role="button" data-toggle="modal" data-target="#HotkeysModal">
            <span class="bi bi-fire" aria-hidden="true" title="Hotkeys"></span>
          </a>
        {% endif %}
        {% if discuss_slug %}
          <a id="obs-discuss" class="btn btn-primary" role="button"
             data-slug="{{ discuss_slug }}"
             href="{% if has_comments %}{{ discuss_slug }}{% else %}{{ discuss_url }}{% endif %}"
             target="_blank" data-toggle="tooltip" title="Discuss (d)">
            <span class="bi bi-chat-left-fill" aria-hidden="true"></span>
          </a>
        {% endif %}
        {% if can_delete %}
          <a id="obs-delete" class="btn btn-danger" role="button" href="{% url 'base:observation_delete' observation_id=observation.id %}">
            <span class="bi bi-trash" aria-hidden="true" title="Delete Observation (x)"></span>
          </a>
        {% endif %}
      </span>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 front-border align-self-start sticky-div">
      <table class="table table-sm table-borderless table-hover">
        <tr>
          <td>
            <span class="badge badge-secondary">Satellite</span>
          </td>
          <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>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Station</span>
          </td>
          <td>
            {% if observation.ground_station %}
              <a href="{% url 'base:station_view' station_id=observation.ground_station.id %}">
                {{ observation.ground_station.id }} - {{ observation.ground_station.name }}
              </a>
            {% else %}
              -
            {% endif %}
          </td>
        </tr>
        <tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Station Owner</span>
          </td>
          <td>
            {% if observation.ground_station.owner %}
              <a href="{% url 'users:view_user' username=observation.ground_station.owner.username %}">
                {{ observation.ground_station.owner.displayname }}
              </a>
            {% else %}
              -
            {% endif %}
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Observer</span>
          </td>
          <td>
            {% if observation.author %}
              <a href="{% url 'users:view_user' username=observation.author.username %}">
                {{ observation.author.displayname }}
              </a>
            {% else %}
              -
            {% endif %}
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Status</span>
          </td>
          <td>
            <span id="rating-spinner">
              <div class="spinner">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
              </div>
            </span>
            <span id="rating-status">
              {% if observation.is_future %}
                <span class="badge badge-future" aria-hidden="true"
                      data-toggle="tooltip" data-placement="right"
                      title="This observation is in the future">Pending</span>
              {% elif observation.status < -100 %}
                <span class="badge badge-failed" aria-hidden="true"
                      data-toggle="tooltip" data-placement="right"
                      title="{{ observation.status }}">Failed</span>
              {% elif observation.status >= -100  and observation.status < 0 %}
                <span class="badge badge-bad" aria-hidden="true"
                      data-toggle="tooltip" data-placement="right"
                      title="{{ observation.status }}">Bad</span>
              {% elif observation.status >= 0  and observation.status < 100 %}
                <span class="badge badge-unknown" aria-hidden="true"
                      data-toggle="tooltip" data-placement="right"
                      title="{{ observation.status }}">Unknown</span>
              {% elif observation.status >= 100 %}
                <span class="badge badge-good" aria-hidden="true"
                      data-toggle="tooltip" data-placement="right"
                      title="{{ observation.status }}">Good</span>
              {% endif %}
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Transmitter</span>
          </td>
          <td>
            {{ observation.transmitter_description }}
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Transmitter Status</span>
          </td>
          <td>
            {% if observation.transmitter_status is None %}
            Unknown
            {% elif not observation.transmitter_status %}
            Inactive
            {% else %}
            Active
            {% endif %}
          </td>
        </tr>
        {% if observation.transmitter_unconfirmed %}
        <tr>
          <td>
            <span class="badge badge-secondary">Transmitter Unconfirmed</span>
          </td>
          <td>
           Yes
          </td>
        </tr>
        {% endif %}
        <tr>
          <td>
            <span class="badge badge-secondary">Transmitter Frequency</span>
          </td>
          <td>
            {% if observation.transmitter_downlink_high %}
              <span title="{{ observation.transmitter_downlink_low|intcomma }}Hz - {{ observation.transmitter_downlink_high|intcomma }}Hz">
                  {{ observation.transmitter_downlink_low|frq }} - {{ observation.transmitter_downlink_high|frq }}
              </span>
            {% else %}
              <span title="{{ observation.transmitter_downlink_low|intcomma}}Hz">
                  {{ observation.transmitter_downlink_low|frq }}
              </span>
            {% endif %}
          </td>
        </tr>
        {% if observation.transmitter_downlink_drift %}
          <tr>
            <td>
              <span class="badge badge-secondary">Transmitter Drift</span>
            </td>
            <td>
              {{ observation.transmitter_downlink_drift }} ppb
            </td>
          </tr>
        {% endif %}
        {% if observation.transmitter_downlink_drift or observation.center_frequency %}
        <tr>
          <td>
            <span class="badge badge-secondary">Observation Frequency</span>
          </td>
          <td>
            <span title="{{ observation.observation_frequency|intcomma }}Hz">
              {{ observation.observation_frequency|frq }}
            </span>
          </td>
        </tr>
        {% endif %}
        <tr>
          <td>
            <span class="badge badge-secondary"> Transmitter Mode</span>
          </td>
          <td>
            <span>{{ observation.transmitter_mode|default:"-" }}</span>
            <span>{{ observation.transmitter_baud|floatformat|default:"" }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Timeframe</span>
          </td>
          <td>
            <span data-toggle="tooltip" data-placement="bottom" title="{{ observation.start|naturaltime }}">
              <span class="datetime-date">{{ observation.start|date:"Y-m-d" }}</span>
              <span class="datetime-time">{{ observation.start|date:"H:i:s" }}</span><br>
            </span>
            <span data-toggle="tooltip" data-placement="bottom" title="{{ observation.end|naturaltime }}">
              <span class="datetime-date">{{ observation.end|date:"Y-m-d" }}</span>
              <span class="datetime-time">{{ observation.end|date:"H:i:s" }}</span>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Rise</span>
          </td>
          <td>
            <div class="green_circle"></div>
            {{ observation.rise_azimuth }}°
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Max</span>
          </td>
          <td>
            {{ observation.max_altitude }}°
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">Set</span>
          </td>
          <td>
            <div class="red_circle"></div>
            {{ observation.set_azimuth }}°
          </td>
        </tr>
        {% if observation.client_version %}
          <tr>
            <td>
              <span class="badge badge-secondary">Client Version</span>
            </td>
            <td>
              {{ observation.client_version }}
            </td>
          </tr>
        {% endif %}
        <tr>
          <td>
            <span class="badge badge-secondary">Polar Plot</span>
          </td>
          <td>
            <div id="polar_plot">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                   id="polar"
                   data-tle1="{{ observation.tle_line_1 }}"
                   data-tle2="{{ observation.tle_line_2 }}"
                   data-timeframe-start="{{ observation.start|date:"c" }}"
                   data-timeframe-end="{{ observation.end|date:"c" }}"
                   data-groundstation-lat="{{ observation.station_lat }}"
                   data-groundstation-lon="{{ observation.station_lng }}"
                   data-groundstation-alt="{{ observation.station_alt }}"
                   width="120px" height="120px"
                   viewBox="-110 -110 220 220"
                   overflow="hidden">
                <path fill="none" stroke="black" stroke-width="1"
                      d="M 0 -95 v 190 M -95 0 h 190"/>
                <circle fill="none" stroke="black" cx="0" cy="0" r="30"/>
                <circle fill="none" stroke="black" cx="0" cy="0" r="60"/>
                <circle fill="none" stroke="black" cx="0" cy="0" r="90"/>
                <text x="-4" y="-96">N</text>
                <text x="-4" y="105">S</text>
                <text x="96" y="4">E</text>
                <text x="-106" y="4">W</text>
              </svg>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">TLE fetched from</span>
          </td>
          <td>
            {% if observation.tle_source == "" %}

            {% elif observation.tle_source == "SatNOGS" %}
                SatNOGS
            {% else %}
                {{ observation.tle_source }}
             {% endif %}
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">TLE fetch time</span>
          </td>
          <td>
            <span data-toggle="tooltip" data-placement="bottom" title="{{ observation.tle_updated|naturaltime }}">
              <span class="datetime-date">{{ observation.tle_updated|date:"Y-m-d" }}</span>
              <span class="datetime-time">{{ observation.tle_updated|date:"H:i:s" }}</span><br>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary" style="text-align: left;">Observation start <br>since TLE fetch time </span><br>
          </td>
          <td>
           <span data-toggle="tooltip" data-placement="bottom" title="{{ fetch_difference|date:"Y-m-d H:i:s" }}">
            <span class="datetime-date">{{ observation.tle_updated|timesince:observation.start}}</span><br>
          </span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary">TLE epoch time</span>
          </td>
          <td>
            <span data-toggle="tooltip" data-placement="bottom" title="{{ tle_datetime|naturaltime }}">
              <span class="datetime-date">{{ tle_datetime|date:"Y-m-d" }}</span>
              <span class="datetime-time">{{ tle_datetime|date:"H:i:s" }}</span><br>
            </span>
          </td>
        </tr>
        <tr>
          <td>
            <span class="badge badge-secondary" style="text-align: left;">Observation start <br>since TLE epoch</span>
          </td>
          <td>
          <span data-toggle="tooltip" data-placement="bottom" title="{{ epoch_difference|date:"Y-m-d H:i:s" }}">
            {{ tle_datetime|timesince:observation.start}}
          </span><br>
          </td>
        </tr>
        {% if observation.has_audio or observation.has_waterfall or observation.has_artifact %}
          <tr>
            <td>
              <span class="badge badge-secondary">Downloads</span>
            </td>
            <td>
              {% if observation.has_audio and observation.audio_url %}
                <a href="{{ observation.audio_url }}"
                   target="_blank"
                   download="">
                  <button type="button" class="btn btn-outline-dark btn-sm">
                    <i class="bi bi-download"></i> Audio
                  </button>
                </a>
              {% endif %}
              {% if observation.waterfall_old %}
                <a href="{{ observation.waterfall_old.url }}"
                   target="_blank"
                   download="">
                  <button type="button" class="btn btn-outline-dark btn-sm">
                    <i class="bi bi-download"></i> Waterfall
                  </button>
                </a>
              {% elif observation.waterfall %}
                <a href="{{ observation.waterfall.url }}"
                   target="_blank"
                   download="">
                  <button type="button" class="btn btn-outline-dark btn-sm">
                    <i class="bi bi-download"></i> Waterfall
                  </button>
                </a>
              {% endif %}
              {% if observation.has_artifact %}
                <a href="{{ observation.artifact_url }}"
                   target="_blank"
                   download="">
                  <button type="button"
                          class="btn btn-outline-dark btn-sm"
                          title="Artifact for this observation is available via SatNOGS DB API.">
                    <i class="bi bi-download"></i> Artifact
                  </button>
                </a>
              {% endif %}
            </td>
          <tr>
        {% endif %}
      </table>
    </div>

    <div class="col-md-8">
      <div class="col-md-12 observation-data" id="{{ observation.id }}"
           data-start="{{ observation.start|date:"U" }}"
           data-end="{{ observation.end|date:"U" }}"
           data-groundstation="{{ observation.ground_station }}">
        <ul class="nav nav-tabs observation-tabs" role="tablist">
          <li role="presentation" class="nav-item">
            <a class="nav-link active" href="#tab-waterfall"
               id="tab-waterfall-btn"
               aria-controls="tab-waterfall"
               role="tab"
               data-toggle="tab">Waterfall
             </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#tab-audio"
               id="tab-audio-btn"
               aria-controls="tab-audio"
               role="tab"
               data-toggle="tab">Audio
             </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#tab-data"
               id="tab-data-btn"
               aria-controls="tab-data"
               role="tab"
               data-toggle="tab">
            Data
              {% if demoddata_count > 0 %}
              <span class="badge badge-secondary d-inline">{{ demoddata_count }}</span>
              {% endif %}
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#tab-metadata"
              id="tab-metadata-btn"
              aria-controls="tab-metadata"
              role="tab"
              data-toggle="tab">Metadata
            </a>
          </li>
        </ul>

        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="tab-waterfall">
            {% if observation.has_waterfall %}
              <div id="waterfall-status" class="row justify-content-between">
                <div id="waterfall-current-status">
                  <div class="badge badge-secondary">Signal in WF</div>
                  <div id="vetting-spinner">
                    <div class="spinner">
                      <div class="bounce1"></div>
                      <div class="bounce2"></div>
                      <div class="bounce3"></div>
                    </div>
                  </div>
                  {% if observation.waterfall_status == True %}
                    <div id="waterfall-status-badge" class="badge badge-with-signal" aria-hidden="true"
                          data-toggle="tooltip" data-placement="right"
                            title="Vetted With Signal on {{ observation.waterfall_status_datetime|date:"Y-m-d H:i:s" }}
                                   {% if observation.waterfall_status_user %} by {{ observation.waterfall_status_user.displayname }}
                                   {% else %} automatically
                                   {% endif %}"
                    >With Signal</div>

                  {% elif observation.waterfall_status == False %}
                    <div id="waterfall-status-badge" class="badge badge-without-signal" aria-hidden="true"
                          data-toggle="tooltip" data-placement="right"
                            title="Vetted Without Signal on {{ observation.waterfall_status_datetime|date:"Y-m-d H:i:s" }}
                                   {% if observation.waterfall_status_user %} by {{ observation.waterfall_status_user.displayname }}
                                   {% else %} automatically
                                   {% endif %}"
                    >Without Signal</div>
                  {% else %}
                    <div id="waterfall-status-badge" class="badge badge-unknown" aria-hidden="true"
                          data-toggle="tooltip" data-placement="right" title="Waterfall needs vetting"
                    >Unknown</div>
                  {% endif %}
                  <a class="btn btn-sm btn-outline-dark" href="https://wiki.satnogs.org/Operation#Rating_observations" data-toggle="tooltip" title="Help" target="_blank">
                    <i class="bi bi-info-circle" aria-hidden="true"></i>
                  </a>
                </div>
                {% if can_vet %}
                  <div id="waterfall-status-form">
                    <form class="d-none">{% csrf_token %}</form>
                    <button id="unknown-status" type="button" title="Unknown (u)"
                            class="btn btn-sm btn-warning {% if observation.waterfall_status is None %}d-none{% endif %}"
                            data-id="{{ observation.id }}" data-status="unknown" data-toggle="tooltip">
                      <i class="bi bi-question-circle"></i>
                    </button>
                    <button id="with-signal-status" type="button" title="With Signal (g)"
                            class="btn btn-sm btn-success {% if observation.waterfall_status == True %}d-none{% endif %}"
                            data-id="{{ observation.id }}" data-status="with-signal" data-toggle="tooltip">
                      <i class="bi bi-check"></i>
                    </button>
                    <button id="without-signal-status" type="button" title="Without Signal (b)"
                            class="btn btn-sm btn-danger {% if observation.waterfall_status == False %}d-none{% endif %}"
                            data-id="{{ observation.id }}" data-status="without-signal" data-toggle="tooltip">
                      <i class="bi bi-x"></i>
                    </button>
                  </div>
                {% endif %}
              </div>
              <div id="waterfall-{{ observation.id }}">
                {% if from_vetting == True %}
                  <div id="waterfall-loading" class="m-auto d-block spinner-border text-muted"></div>
                {% endif %}
                {% if observation.waterfall_old %}
                  <img id="waterfall-img" class="img-fluid" {% if from_vetting %}data-{% endif %}src="{{ observation.waterfall_old.url }}" alt="waterfall">
                {% else %}
                  <img id="waterfall-img" class="img-fluid" {% if from_vetting %}data-{% endif %}src="{{ observation.waterfall.url }}" alt="waterfall">
                {% endif %}
              </div>
            {% else %}
              <div class="notice">
                Waiting for waterfall
              </div>
            {% endif %}
          </div>
          <div role="tabpanel" class="tab-pane" id="tab-audio">
            {% if observation.has_audio %}
              {% if observation.audio_url %}
                <div id="loading-{{ observation.id }}" class="notice">Loading audio...</div>
                <div class="progress" id="progress-bar-{{ observation.id }}">
                  <div class="progress-bar progress-bar-striped progress-bar-animated pb-info" role="progressbar"></div>
                </div>
                <div class="wave tab-data" id="data-{{ observation.id }}"
                     data-id="{{ observation.id }}"
                     data-audio="{{ observation.audio_url }}"></div>
                <div id="wave-spectrogram"></div>
                <button type="button" class="btn btn-primary btn-sm playpause">
                  <i class="bi bi-play"></i>
                  <i class="bi bi-pause"></i>
                </button>
                <span id="playback-time-{{ observation.id }}" class="badge badge-info playback-time"></span>
              {% else %}
                <div class="notice">
                  Audio is not currently available
                </div>
              {% endif %}
            {% else %}
              <div class="notice">
                Waiting for audio
              </div>
            {% endif %}
          </div>
          <div role="tabpanel" class="tab-pane tab-data" id="tab-data">
            {% if demoddata_count > 0 %}
                <div class="row justify-content-between align-items-center">
                  <div class="col-">
                    <div class="btn-group btn-group-sm" id="load-data-btn-group" role="group">
                      <button type="button" class="btn btn-primary" id="load-next-10-button">Load More Data(<span id='next-data-num'></span>)</button>
                      <button type="button" class="btn btn-info" id="load-all-button">Load All Data(<span id='all-data-num'></span>) </button>
                      <span id="demoddata-spinner">
                        <div class="spinner">
                          <div class="bounce1"></div>
                          <div class="bounce2"></div>
                          <div class="bounce3"></div>
                        </div>
                      </span>
                    </div>
                  </div>
                  {% if show_hex_to_ascii_button %}
                    <div class="col-">
                      <div class="btn-group btn-group-sm" id="decode-btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-dark" id="ascii-button">ASCII</button>
                        <button type="button" class="btn btn-sm btn-outline-dark active" id="hex-button">HEX</button>
                        <button type="button" class="btn btn-sm btn-outline-dark" id="ax25-button" style="display: none;">AX.25</button>
                      </div>
                    </div>
                  {% endif %}
                </div>
                {% for demoddata_entry in demoddata_details %}
                  <div class="demoddata" data-type="{{ demoddata_entry.type }}">
                    <span class="badge badge-secondary data-badge">
                      <a href="{{ demoddata_entry.url }}" class="data-link">
                        {{ demoddata_entry.name }}
                      </a>
                    </span>
                    <div class="card">
                      <div class="card-body p-2 bg-light border border-secondary data-card">
                      </div>
                    </div>
                  </div>
                {% endfor %}
            {% else %}
              <div class="notice">
                Waiting for demoded data
              </div>
            {% endif %}
          </div>
          <div role="tabpanel" class="tab-pane tab-metadata" id="tab-metadata">
            {% if observation.client_metadata %}
              <pre class="mt-3 bg-light border border-secondary" id="json-metadata" data-json="{{ observation.client_metadata }}"></pre>
            {% else %}
              <div class="notice">
                Waiting for metadata
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="row justify-content-center">
    <div class="col-">
      <pre class="p-2 bg-light border border-secondary">{{ observation.tle_line_1 }}<br>{{ observation.tle_line_2 }}</pre>
    </div>
  </div>

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

  <!-- Hotkeys Modal -->
  {% include 'includes/observation-hotkeys.html' %}
