{% 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_targets/css/main.css' %}">
{% endblock %}
{% block content %}
<script>
  // Function to update the URL.
  const updateUrlWithTab = (tabId) => {
    const url = new URL(window.location.href);
    url.searchParams.set('tab', tabId);
    history.replaceState({}, document.title, url.toString());
  };

  document.addEventListener("DOMContentLoaded", function() {
    // Listen for tab changes.
    document.querySelectorAll('#tabs .nav-link').forEach(tab => {
      tab.addEventListener('click', function() {
        updateUrlWithTab(this.id.replace('-tab', ''));
      });
    });

    // Initial tab selection from URL.
    const tabQuery = new URL(window.location.href).searchParams.get('tab');
    if (tabQuery) {
      const activeTab = '#' + tabQuery;
      const tabElement = document.querySelector(`a[href="${activeTab}"]`);
      if (tabElement) {
        tabElement.click();
      }
    }
  });
</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_finderchart 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>
      {% include_app_tabs %}
    </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>
        <button hx-get="{% url 'targets:render-observation-table' pk=target.id %}"
                hx-target="#observation-table"
                hx-indicator=".progress"
                hx-disabled-elt="this"
                class="btn btn-secondary mb-3">Refresh Observation List
        </button>
        <div id="observation-table">
        {% include 'tom_targets/partials/observation_table.html' %}
        </div>
      </div>
      <div class="tab-pane" id="manage-data">
        {% if user.is_authenticated %}
          {% upload_dataproduct object %}
        {% endif %}
        {% if user.is_authenticated %}
        <hr>
        {% query_single_target_data_service object %}
        <hr>
        {% 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 %}
        {% get_photometry_data object %}
        </div>
      <div class="tab-pane" id="spectroscopy">
        {% spectroscopy_for_target target %}
      </div>
      {% include_app_tab_divs %}

      {% comments_enabled as comments_are_enabled %}
      {% if comments_are_enabled %}
      <hr/>
      <h5>Comments</h5>
          {% 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 %}