{% extends 'tom_common/base.html' %}
{% load bootstrap4 targets_extras dataproduct_extras dataservices_extras %}
{% 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>
          <a class="dropdown-item" href="{% url 'tom_catalogs:query' %}" title="Catalog Search">Catalog Search</a>
        </div>
          {% catalog_query_menu %}
        {% update_broker_data_button %}
        <button onclick="document.getElementById('invisible-export-button').click()" class="btn btn-primary">Export Filtered Targets</button>
         <!-- use an invisible button, because the key "Enter" event will triggered the first submit button and we want the default action to be applying filter -->
      </span>
      </div>
    </div>
    {% select_target_js %}
    {% aladin_skymap object_list %}
    {% bootstrap_pagination page_obj extra=request.GET.urlencode %}
    <label id="displaySelected"></label>
    <button id="optionSelectAll" type="button" class="btn btn-link" onClick="select_all({{ target_count }})"></button>
    <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>
    {% target_table object_list %}
    {% bootstrap_pagination page_obj extra=request.GET.urlencode %}
  </div>
  {{ filter.fields }}
  <div class="col-md-2">
    <form action="" method="get" class="form">
      {% bootstrap_form filter.form %}
      {% buttons %}
        <button type="submit" class="btn btn-primary">
          Filter
        </button>
        <a href="{% url 'targets:list' %}" class="btn btn-secondary" title="Reset">Reset</a>
        <button type="submit" formaction="{% url 'targets:export' %}" id="invisible-export-button" style="display:none"></button>
      {% endbuttons %}
    </form>
  </div>
</div>
{% endblock %}