{% extends 'tom_common/base.html' %}
{% load bootstrap4 targets_extras dataproduct_extras dataservices_extras %}
{% load render_table from django_tables2 %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}Targets{% endblock %}

{% block content %}
<div class="row">
  <div class="col-md-10">
    <div class="row">
      <div class="col-md-12">
        <span class="float-right">
        {{ target_count }} Target{{ target_count|pluralize }} &nbsp;
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Create Targets
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="{% url 'targets:create' %}" title="Create a Target">Create a Target</a>
          <a class="dropdown-item" href="{% url 'targets:import' %}" title="Import Targets">Import Targets</a>
        </div>
        {% catalog_query_menu %}

        {% update_broker_data_button %}

        <!-- Export Filtered Targets button (gets current filter form values for export list)-->
        <button type="button" class="btn btn-primary" title="Export Filtered Targets"
                onclick="const queryString = new URLSearchParams(new FormData(document.querySelector('form.mb-3'))).toString(); window.location.href = '{% url 'targets:export' %}?' + queryString;">
          Export Filtered Targets
        </button>
      </span>
      </div>
    </div>

    {# Aladin skymap -- initialized once on page load (Moon/Sun computed here). #}
    {# On HTMX filter updates, only the target markers are updated via OOB swap #}
    {# into the aladin-targets-data div below (see target_table_partial.html). #}
    {% aladin_skymap skymap_objects %}

    {# Placeholder for OOB target data updates from HTMX #}
    <div id="aladin-targets-data"></div>

    <hr>

    <form id="grouping-form" action="{% url 'targets:add-remove-grouping' %}" method="POST">
      {% csrf_token %}
      <div class="d-flex flex-row align-items-baseline">
        <label>Merge duplicate targets</label>
        <button type="submit" class="btn btn-outline-success ml-1" name="merge">Merge</button>
      </div>
      <div class="form-group d-flex flex-row align-items-baseline">
        <label>Add/Remove from grouping</label>
        <select name="grouping" class="form-control w-25 ml-1">
          {% for grouping in groupings %}
          <option value="{{ grouping.id }}">{{ grouping.name }}</option>
          {% endfor %}
        </select>
        <input type="hidden" value="{{ query_string }}" name="query_string">
        <input type="hidden" value="False" id="isSelectAll" name="isSelectAll">
        <button type="submit" class="btn btn-outline-primary ml-1" name="add">Add</button>
        <button type="submit" class="btn btn-outline-primary ml-1" name="move">Move</button>
        <button type="submit" class="btn btn-outline-danger ml-1" name="remove">Remove</button>
      </div>
    </form>

    {% block target_table_content %}
    <hr>
    {# Search form (we refer to this id="filter-form" in the TargetTable.Meta.attrs) #}
    <form id="filter-form" class="mb-3"
      hx-get="{% url 'tom_targets:list' %}"
      hx-target="div.table-container"
      hx-swap="outerHTML"
      hx-indicator=".progress">
        {% crispy filter.form %}
    </form>

    {# Progress indicator #}
    <div class="progress">
        <div class="indeterminate"></div>
    </div>

    {# The actual table #}
    <div class="table-container">
        {% include "tom_targets/partials/target_table_partial.html" %}
    </div>

    <hr>
      {% endblock target_table_content %}
  </div>
  </div>

  <script>
  document.body.addEventListener('change', function(e) {
    // This eventListener toggles all the checkboxes when the header-checkbox is toggled.

    // Check if the source of the change event is our header checkbox
    if (e.target && e.target.classList.contains('header-checkbox')) {

        // Find all checkboxes with the specific name used in the rows
        const checkboxes = document.querySelectorAll('input[name="selected-target"]');

        // Set their state to match the header checkbox
        checkboxes.forEach(cb => cb.checked = e.target.checked);
    }
  });
  </script>
{% endblock content %}