{% extends 'tom_common/base.html' %}
{% load django_bootstrap5 static targets_extras %}
{% block title %}Share {{ target_list.name }} Target List{% 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 %}
<h3> Share <a href="{% url 'targets:list' %}?targetlist__name={{ target_list.id }}" title="View Target Lists">{{ target_list.name }}</a> Target List </h3>
<form method="post" class="form" id='targetgroup-share-form'>
    {% csrf_token %}
    {% for hidden in form.hidden_fields %}
      {{ hidden }}
    {% endfor %}
    <div class="row" style="padding-inline:1rem">
        <div class="col-sm-3">
            {% bootstrap_field form.share_destination %}
        </div>
        <div class="col-sm-5">
            {% bootstrap_field form.share_title %}
        </div>
        <div class="col-sm-1">
            <input type="submit" class="btn btn-primary" formaction="{% url 'targets:share-group' pk=target_list.id %}" id="submit_targetlist" value="Submit" name="share_targetlist_form" style="position:absolute; bottom:1rem" onclick="setTarget('')">
        </div>
    </div>
    <div class="row" style="padding-inline:1rem">
        <div class="col-sm-12">
            {% bootstrap_field form.share_message %}
        </div>
    </div>

    <div class="col-md-10">
        {% select_target_js %}
        <label id="displaySelected"></label>
        <div class="custom-control custom-switch">
          <input type="checkbox" class="custom-control-input" checked id="dataSwitch" name="dataSwitch">
          <label class="custom-control-label" for="dataSwitch">Include Photometric Data</label>
        </div>
        {% csrf_token %}
        <div class="form-group d-flex justify-content-end align-items-baseline">
            <input type="hidden" value="{{ query_string }}" name="query_string">
            <input type="hidden" value="False" id="isSelectAll" name="isSelectAll">
        </div>
      {% target_table target_list.targets.all True %}
    </div>
</form>
{% bootstrap_button "Back" button_class="btn btn-primary" href="{% url 'targets:targetgrouping' %}" title="Back"%}
<script>
    const targetgroupShareForm = document.getElementById('targetgroup-share-form');
    function setTarget(val) {
      if (val && val != '') {
        targetgroupShareForm.setAttribute('target', val);
      }
      else{
        targetgroupShareForm.removeAttribute('target');
      }
      return true;
    };
</script>
{% endblock %}