{% extends 'tom_common/base.html' %}
{% load comments bootstrap4 tom_common_extras targets_extras observation_extras dataproduct_extras static cache %}
{% block title %}Target {{ object.name }}{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{% static 'tom_common/css/main.css' %}">
<link rel="stylesheet" href="{% static 'tom_targets/css/main.css' %}">
{% endblock %}
{% block content %}
<script>
// This script maintains the selected tab upon reload
$(document).ready(function(){
  // This is required due to the apparent redefinition of $ in another library: https://api.jquery.com/jquery.noconflict/
  // Based on trial and error, the offending script appears to be JS9, which is used in dataproduct_list_for_target
  $.noConflict();
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
  });

  var activeTab = localStorage.getItem('activeTab');
  if(activeTab){
    $('#tabs a[href="' + activeTab + '"]').tab('show');
  }
});
</script>
<div class="row">
  <div class="col-md-4">
    <div id="target-info">
      {% target_feature object %}
      {% if object.future_observations %}
      <div class="alert alert-success">
        {{ object.future_observations|length }} upcoming observation{{ object.future_observations|pluralize }}
      </div>
      {% endif %}
      {% target_unknown_statuses object %}
      {% target_buttons object %}
      {% target_data object %}
      {% recent_photometry object limit=3 %}
      {% if object.type == 'SIDEREAL' %}
      {% aladin object %}
      {% endif %}
      
    </div>
  </div>
  <div class="col-md-8">
    <ul class="nav nav-tabs" role="tablist" id="tabs">
      <li class="nav-item">
        <a class="nav-link active" id="observe-tab" href="#observe" role="tab" data-toggle="tab">Observe</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="observations-tab" href="#observations" role="tab" data-toggle="tab">Observations</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="manage-data-tab" href="#manage-data" role="tab" data-toggle="tab">Manage Data</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="manage-groups-tab" href="#manage-groups" role="tab" data-toggle="tab">Manage Groups</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="photometry-tab" href="#photometry" role="tab" data-toggle="tab">Photometry</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="spectroscopy-tab" href="#spectroscopy" role="tab" data-toggle="tab">Spectroscopy</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="observe">
        <h4>Observe</h4>
        {% observing_buttons object %}
        <hr/>
        {% observationtemplate_run object %}
        <hr/>
        <h4>Plan</h4>
        {% if object.type == 'SIDEREAL' %}
          {% target_plan %}
          {% moon_distance object %}
        {% elif target.type == 'NON_SIDEREAL' %}
          <p>Airmass plotting for non-sidereal targets is not currently supported. If you would like to add this functionality, please check out the <a href="https://github.com/TOMToolkit/tom_nonsidereal_airmass" target="_blank">non-sidereal airmass plugin.</a></p>
        {% endif %}
      </div>
      <div class="tab-pane" id="observations">
        {% existing_observation_form object %}
        <h4>Observations</h4>
        <a href="{% url 'targets:detail' pk=target.id %}?update_status=True" title="Update status of observations for target" class="btn btn-primary">Update Observations Status</a>
        {% observation_list object %}
      </div>
      <div class="tab-pane" id="manage-data">
        {% if user.is_authenticated %}
          {% upload_dataproduct object %}
        {% endif %}
        {% dataproduct_list_for_target object %}
      </div>
      <div class="tab-pane" id="manage-groups">
        {% target_groups target %}
      </div>
      <div class="tab-pane" id="photometry">
        {% photometry_for_target target %}
        </div>
      <div class="tab-pane" id="spectroscopy">
        {% spectroscopy_for_target target %}
      </div>

      {% comments_enabled as comments_are_enabled %}
      <hr/>
      <h5>Comments</h5>
        {% if comments_are_enabled %}
          {% render_comment_list for object %}
          {% url 'targets:detail' object.id as next %}
          {% if user.is_authenticated %}
            {% render_comment_form for object %}
          {% endif %}
        {% endif %}
    </div>
  </div>
</div>
{% endblock %}
