{% extends "base_bootstrap.html" %}

{% block title %}{% if listHeader %}{{listHeader}}{% else %}Followup List{% endif %}{% endblock %}

<!-- Lightcurve data Globals -->
{% block lightcurvedataglobal %}
<script language="javascript" type="text/javascript">
var jslcdataglobal = new Object();
var jslabelsglobal = new Object();
var jslimitsglobal = new Object();
</script>
{% endblock %}




<!-- Recurrence data Globals -->
{% block recurrencedataglobal %}
<script language="javascript" type="text/javascript">
var jsrecurrencedataglobal = new Object();
var jsrecurrencelabelsglobal = new Object();
var jsrecurrencelimitsglobal = new Object();
</script>
{% endblock %}

{% block recurrenceplotdata %}
<script language="javascript" type="text/javascript">
{% for row in subdata %}
var jsrecurrencedata = new Array();
var jsrecurrencelabels = new Array();
var jsrecurrencelimits = { "xmin": -8.0,  // arcsec
                           "xmax": 8.0,
                           "ymin": -8.0,
                           "ymax": 8.0 };

{% for recurrencepoints in row.recurrenceData.0 %}
  jsrecurrencedata.push({{recurrencepoints}});
{% endfor %}


{% for labels in row.recurrenceData.1 %}
  jsrecurrencelabels.push({{labels|safe}});
{% endfor %}

jsrecurrencelimitsglobal["#flot-recurrenceplot{{row.id}}"] = jsrecurrencelimits;
jsrecurrencedataglobal["#flot-recurrenceplot{{row.id}}"] = jsrecurrencedata;
jsrecurrencelabelsglobal["#flot-recurrenceplot{{row.id}}"] = jsrecurrencelabels;

{% endfor %}
</script>
{% endblock %}


{% block lightcurvedata %}
{% for row in subdata %}
<script language="javascript" type="text/javascript">
var jslcdata = new Array();
var jslabels = new Array();
var jslclimits = { "xmin": {{ row.lcLimits.xmin.0|add:"-30" }},
                   "xmax": {{ row.lcLimits.today }},
                   "ymin": {{ row.lcLimits.ymin|last }},
                   "ymax": {{ row.lcLimits.ymax|last }},
                   "discoveryDate": {{ row.lcLimits.discoveryDate }},
                   "today": {{ row.lcLimits.today }} };

jslimitsglobal["#flot-lightcurve{{row.id}}"] = jslclimits;


// The first data items are detection data, non-detections, blanks (and anything else)
{% for dataseries in row.lc|slice:":-1" %}
  // Normally we have 5 filters, but in case we have more, slice all but the last element
  // (which is the combined data for all filters).
  {% for filterdata in dataseries %}
    jslcdata.push({{filterdata}});
  {% endfor %}
  jslcdataglobal["#flot-lightcurve{{row.id}}"] = jslcdata;
{% endfor %}


// The last item is the data labels. The length of this array must be the same as the
// length of the filterdata (minus the last element).
{% for lclabels in row.lc|last %}
  jslabels.push({{lclabels|safe}});
  jslabelsglobal["#flot-lightcurve{{ row.id }}"] = jslabels;
{% endfor %}

</script>
{% endfor %}
{% endblock %}


{% block content %}

<!-- Moved the nav bar to the base template. -->

<!-- Idea - use Button Groups for the quickview buttons -->

<div class="container-fluid">

{% if listHeader %}
   <h3>{{ listHeader }}</h3>
{% else %}
   <h3>Object List</h3>
{% endif %}

<h4>({{subdata.paginator.count}})</h4>

{% if processingStatus != 1 %}
  {% if classifyform and subdata.paginator.count %}
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-secondary btn-sm active" id="select_all_u" name="select_all"> <input type="radio" name="options" autocomplete="off" checked />All Undecided</label>
    <label class="btn btn-outline-success btn-sm" id="select_all_c" name="select_all"> <input type="radio" name="options" autocomplete="off" />All Confirmed</label>
    <label class="btn btn-outline-success btn-sm" id="select_all_g" name="select_all"> <input type="radio" name="options" autocomplete="off" />All Good</label>
    <label class="btn btn-outline-warning btn-sm" id="select_all_p" name="select_all"> <input type="radio" name="options" autocomplete="off" />All Possible</label>
    <label class="btn btn-outline-primary btn-sm" id="select_all_e" name="select_all"> <input type="radio" name="options" autocomplete="off" />All Eyeball</label>
    <label class="btn btn-outline-info btn-sm" id="select_all_a" name="select_all"> <input type="radio" name="options" autocomplete="off" />All Attic</label>
    <label class="btn btn-outline-danger btn-sm" id="select_all_t" name="select_all"> <input type="radio" name="options" autocomplete="off" />All Trash</label>
  </div>
  {% endif %}
{% endif %}
</div>

{% if subdata.paginator.count %}
<div class="container-fluid">

{% if processingStatus != 1 %}
  {% if classifyform and subdata.paginator.count %}
  <form id="classify_form" action="" method="post">{% csrf_token %}
  <button class="btn btn-outline-info my-2 my-sm-0" type="submit" value="Classify Objects" name="classify">Classify</button>
  {% endif %}
{% endif %}

<div class="pagination">
    <span class="step-links">
        {% if subdata.has_previous %}
            <a href="?page={{ subdata.previous_page_number }}{{ urlsuffix }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ subdata.number }} of {{ subdata.paginator.num_pages }}.
        </span>

        {% if subdata.has_next %}
            <a href="?page={{ subdata.next_page_number }}{{ urlsuffix }}">next</a>
        {% endif %}
    </span>
</div>

<script src="{{ STATIC_URL }}js/plotly/plotly-latest.kws.js"></script>
{% for row in subdata %}
<div class="row mt-2 mb-2 row-border">
<div class="col-lg-2 col-md-6 col-sm-12">
    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <a href="{% url "candidate" row.id %}">{% if row.ps1_designation %}{{ row.ps1_designation }}{% elif row.local_designation %}{{ row.local_designation }}{% else %}{{ row.id }}{% endif %}</a>{% if row.other_designation %} (<a href="https://wis-tns.org/object/{{row.other_designation}}">{{ row.other_designation }}</a>){% endif %} {% if row.xmseparation %}({{ row.xmseparation|floatformat:2 }}&quot;){% endif %}<br />
    </div>
    </div>
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-label">Coords: </span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ row.ra_sex }} {{ row.dec_sex }}</span>
    </div>
    </div>

    {% if row.ra_avg %}
    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">({{ row.ra_avg|floatformat:"5" }} {{ row.dec_avg|floatformat:"5" }})</span>
    </div>
    </div>
    {% else %}
    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">({{ row.ra_psf|floatformat:"5" }} {{ row.dec_psf|floatformat:"5" }})</span>
    </div>
    </div>
    {% endif %}

    {% if row.galactic %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Galactic Coords</span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
      {% if row.galactic.1 > -15 and row.galactic.1 < 15 %}
      <font class="text-danger">
      ({{ row.galactic.0|floatformat:"5" }},{{ row.galactic.1|floatformat:"5" }})
      </font>
      {% else %}
      <font class="text-secondary">
      ({{ row.galactic.0|floatformat:"5" }},{{ row.galactic.1|floatformat:"5" }})
      </font>
      {% endif %}
    </div>
    </div>
    {% endif %}

    {% if row.followup_flag_date %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-label">Flag Date: </span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ row.followup_flag_date }}</span>
    </div>
    </div>
    {% endif %}

    {% if row.sherlockClassification %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-label">Context</span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ row.sherlockClassification }}</span>
    </div>
    </div>
    {% endif %}
    {% if row.observation_status %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Spectral Type</span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ row.observation_status }}</span>
    </div>
    </div>
    {% endif %}
    {% if row.rb_cat or row.rb_pix %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-label">Realbogus Factors</span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ row.rb_cat|floatformat:"2" }} (catalogue) {{ row.rb_pix|floatformat:"2" }} (TF pixel)</span>
    </div>
    </div>
    {% endif %}
    {% if row.latest_mjd and row.earliest_mjd %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-label">Earliest and Latest MJDs</span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ row.earliest_mjd|floatformat:"3" }} {{ row.latest_mjd|floatformat:"3" }}</span>
    </div>
    </div>
    {% endif %}
    {% if row.external_crossmatches %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Aliases</span>
    </div>
    </div>

    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ row.external_crossmatches }}</span>
    </div>
    </div>
    {% endif %}
    {% if row.gw %}
    <div class="row parameter-label">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">GW Events</span>
    </div>
    </div>

    {% for event in row.gw %}
    <div class="row parameter-value">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ event.gravity_event_id.gravity_event_id }} ({{ event.enclosing_contour }}%)</span>
    </div>
    </div>
    {% endfor %}
    {% endif %}
</div>

<div class="col-lg-3 col-md-6 col-sm-12">
    <div class="row">
    {% if row.lc %}
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div id="flot-lightcurve{{row.id}}"></div>
      <script language="javascript" type="text/javascript">var lcdivname = "#flot-lightcurve{{row.id}}", lcplotheight = 200, markersize = 7, errorbarsize = 2, arrowsize = 4;</script>
      <script src="{{ STATIC_URL }}js/lightcurveplotly.js"></script>
    </div>
    {% endif %}

    {% if row.sxm and row.sxm.0.catalogue_table_name %}
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Catalogue:</span>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-value">{{ row.sxm.0.catalogue_table_name }}</span>
    </div>
    {% endif %}

    {% if row.sxm and row.sxm.0.catalogue_object_id %}
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Host:</span>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-value">{{ row.sxm.0.catalogue_object_id }}</span>
    </div>
    {% endif %}

    {% if row.sxm and row.sxm.0.z %}
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">z (spec):</span>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-value">{{ row.sxm.0.z|floatformat:"2" }}</span>
    </div>
    {% endif %}

    {% if row.sxm and row.sxm.0.distance and row.sxm.0.z %}
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Distance:</span>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-value">{{ row.sxm.0.distance|floatformat:"1" }} Mpc</span>
    </div>
    {% endif %}

    {% if row.sxm and row.sxm.0.distance_modulus and row.sxm.0.z %}
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Distance Modulus:</span>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-value">{{ row.sxm.0.distance_modulus|floatformat:"2" }}</span>
    </div>
    {% endif %}

    {% if row.sxm and row.sxm.0.physical_separation_kpc and row.sxm.0.z %}
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-label">Physical Offset:</span>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12">
      <span class="parameter-value">{{ row.sxm.0.physical_separation_kpc|floatformat:"2" }} Kpc</span>
    </div>
    {% endif %}

    </div>
</div>

<div class="col-lg-2 col-md-6 col-sm-12">
    {% if row.recurrenceData %}
    <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
    <div id="flot-recurrenceplot{{row.id}}"></div>
    <script language="javascript" type="text/javascript">var recdivname = "#flot-recurrenceplot{{row.id}}", recplotmaxwidth=250, recmarkersize = 10;</script>
    <script src="{{ STATIC_URL }}js/recurrenceplotplotly.js"></script>
    </div>
    </div>
    {% endif %}
</div>

<div class="col-lg-5 col-md-6 col-sm-12">
    <div class="row">
    <div class="col-lg-3 col-md-12 col-sm-12">
      <div id="aladin-lite-div{{row.id}}" style="width:150px;height:150px;"></div>
      <script type="text/javascript" src="{{ STATIC_URL }}js/aladin.js" charset="utf-8"></script>
      <script type="text/javascript">
          var imagesurvey = {% if row.dec_avg > -30.0 or row.dec > -30.0 %}"P/PanSTARRS/DR1/color-i-r-g"{% else %}"P/DSS2/color"{% endif %};
          var aladin = A.aladin('#aladin-lite-div{{row.id}}', {survey: imagesurvey, fov:0.02, target: "{{ row.ra_sex }} {{ row.dec_sex }}", showFrame: false, showLayersControl: false, showGotoControl: false, showZoomControl: false});
      </script>
    </div>

{% if row.tcs_images_id %}
    <div class="col-lg-3 col-md-4 col-sm-12">
    <img id="stampimages" src="{{ MEDIA_URL }}images/data/{{ dbname }}/{{ row.tcs_images_id.whole_mjd }}/{{ row.tcs_images_id.target }}.jpeg" alt="triplet" onerror="this.src='{{ STATIC_URL }}images/image_not_available.jpeg';" height="150" />
    </div>
    <div class="col-lg-3 col-md-4 col-sm-12">
    <img id="stampimages" src="{{ MEDIA_URL }}images/data/{{ dbname }}/{{ row.tcs_images_id.whole_mjd }}/{{ row.tcs_images_id.ref }}.jpeg" alt="triplet" onerror="this.src='{{ STATIC_URL }}images/image_not_available.jpeg';" height="150" />
    </div>
    <div class="col-lg-3 col-md-4 col-sm-12">
    <img id="stampimages" src="{{ MEDIA_URL }}images/data/{{ dbname }}/{{ row.tcs_images_id.whole_mjd }}/{{ row.tcs_images_id.diff }}.jpeg" alt="triplet" onerror="this.src='{{ STATIC_URL }}images/image_not_available.jpeg';" height="150" />
    </div>
{% endif %}








  {% if processingStatus != 1 %}
    {% if row.detection_list_id %}
      {% if classifyform and subdata.paginator.count %}
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-outline-secondary btn-sm active" value="U" id="{{row.id}}_u"> <input type="radio" id="U" autocomplete="off" checked value="U" class="U" name="{{row.id}}_promote_demote" />Undecided</label>
          {% if row.detection_list_id.id == 1 or row.detection_list_id == 1 %}
            <label class="btn btn-outline-success btn-sm" value="G" id="{{row.id}}_g"> <input type="radio" id="G" autocomplete="off" value="G" class="G" name="{{row.id}}_promote_demote" />Good</label>
            <label class="btn btn-outline-warning btn-sm" value="P" id="{{row.id}}_p"> <input type="radio" id="P" autocomplete="off" value="P" class="P" name="{{row.id}}_promote_demote" />Possible</label>
            <label class="btn btn-outline-info btn-sm" value="A" id="{{row.id}}_a"> <input type="radio" id="A" autocomplete="off" value="A" class="A" name="{{row.id}}_promote_demote" />Attic</label>
          {% elif row.detection_list_id.id == 2 or row.detection_list_id == 2 %}
            <label class="btn btn-outline-success btn-sm" value="C" id="{{row.id}}_c"> <input type="radio" id="C" autocomplete="off" value="C" class="C" name="{{row.id}}_promote_demote" />Confirmed</label>
            <label class="btn btn-outline-warning btn-sm" value="P" id="{{row.id}}_p"> <input type="radio" id="P" autocomplete="off" value="P" class="P" name="{{row.id}}_promote_demote" />Possible</label>
            <label class="btn btn-outline-info btn-sm" value="A" id="{{row.id}}_a"> <input type="radio" id="A" autocomplete="off" value="A" class="A" name="{{row.id}}_promote_demote" />Attic</label>
          {% elif row.detection_list_id.id == 3 or row.detection_list_id == 3 %}
            <label class="btn btn-outline-info btn-sm" value="A" id="{{row.id}}_a"> <input type="radio" id="A" autocomplete="off" value="A" class="A" name="{{row.id}}_promote_demote" />Attic</label>
            <label class="btn btn-outline-danger btn-sm" value="T" id="{{row.id}}_t"> <input type="radio" id="T" autocomplete="off" value="T" class="T" name="{{row.id}}_promote_demote" />Trash</label>
          {% elif row.detection_list_id.id == 4 or row.detection_list_id == 4 %}
            <label class="btn btn-outline-warning btn-sm" value="P" id="{{row.id}}_p"> <input type="radio" id="P" autocomplete="off" value="P" class="P" name="{{row.id}}_promote_demote" />Possible</label>
            <label class="btn btn-outline-info btn-sm" value="A" id="{{row.id}}_a"> <input type="radio" id="A" autocomplete="off" value="A" class="A" name="{{row.id}}_promote_demote" />Attic</label>
            <label class="btn btn-outline-danger btn-sm" value="T" id="{{row.id}}_t"> <input type="radio" id="T" autocomplete="off" value="T" class="T" name="{{row.id}}_promote_demote" />Trash</label>
          {% elif row.detection_list_id.id == 5 or row.detection_list_id == 5 %}
            <label class="btn btn-outline-warning btn-sm" value="P" id="{{row.id}}_p"> <input type="radio" id="P" autocomplete="off" value="P" class="P" name="{{row.id}}_promote_demote" />Possible</label>
            <label class="btn btn-outline-danger btn-sm" value="T" id="{{row.id}}_t"> <input type="radio" id="T" autocomplete="off" value="T" class="T" name="{{row.id}}_promote_demote" />Trash</label>
          {% elif row.detection_list_id.id == 8 or row.detection_list_id == 8 %}
            <label class="btn btn-outline-warning btn-sm" value="P" id="{{row.id}}_p"> <input type="radio" id="P" autocomplete="off" value="P" class="P" name="{{row.id}}_promote_demote" />Possible</label>
            <label class="btn btn-outline-info btn-sm" value="A" id="{{row.id}}_a"> <input type="radio" id="A" autocomplete="off" value="A" class="A" name="{{row.id}}_promote_demote" />Attic</label>
            <label class="btn btn-outline-danger btn-sm" value="T" id="{{row.id}}_t"> <input type="radio" id="T" autocomplete="off" value="T" class="T" name="{{row.id}}_promote_demote" />Trash</label>
          {% elif row.detection_list_id.id == 0 or row.detection_list_id == 0 %}
            <label class="btn btn-outline-primary btn-sm" value="E" id="{{row.id}}_e"> <input type="radio" id="E" autocomplete="off" value="E" class="E" name="{{row.id}}_promote_demote" />Eyeball</label>
          {% endif %}
          <script>
              // Store the value of the option in sessionStorage so we can use it later or on page refresh.
              $('[id^="{{row.id}}_"]').click(function() {
              var value = $( this ).children('input').val();
              sessionStorage.setItem($( this ).children('input').attr('name'),value);
              });
          </script>

        </div>
      </div>
      {% endif %}
    {% endif %}
  {% endif %}

  {% if row.comments %}
  <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-label">Comments:</span>
  </div>
  {% for comment in row.comments %}
  <div class="col-lg-12 col-md-12 col-sm-12">
    <span class="parameter-value">{{ comment.date_inserted|date:"Y-m-d H:i:s" }}{% if comment.username %} ({{ comment.username }}){% endif %}: {{ comment.comment }}</span>
  </div>
  {% endfor %}
  {% endif %}

</div>
</div>
</div>
{% endfor %}

<div class="pagination">
    <span class="step-links">
        {% if subdata.has_previous %}
            <a href="?page={{ subdata.previous_page_number }}{{ urlsuffix }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ subdata.number }} of {{ subdata.paginator.num_pages }}.
        </span>

        {% if subdata.has_next %}
            <a href="?page={{ subdata.next_page_number }}{{ urlsuffix }}">next</a>
        {% endif %}
    </span>
</div>

{% if processingStatus != 1 %}
  {% if classifyform and subdata.paginator.count %}
  <button class="btn btn-outline-info my-2 my-sm-0" type="submit" value="Classify Objects" name="classify">Classify</button>
  </form>
  {% endif %}
{% endif %}


  <button class="btn btn-outline-primary btn-sm my-2 my-sm-0" id="tbutton" value="tbutton" name="tbutton">Test - Please Ignore</button>
  <script src="{{ STATIC_URL }}js/bootstrap_utils.js"></script>

</div>
{% endif %}



{% endblock %}

