{% extends "base_bootstrap.html" %}

{% load render_table from django_tables2 %}

{% block title %}Candidate {{transient.id}}{% 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 aladindataglobal %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/aladin3.css" />
<script language="javascript" type="text/javascript">
var jsaladinglobal = new Object();
</script>
{% endblock %}

{% block lightcurvedata %}
<script language="javascript" type="text/javascript">
var jslcdata = new Array();
var jslabels = new Array();
// We have an array with 4 elements. Each element is another array of n elements (usually 5).
// They must all be the same size - the length of which is captured in the jslabels array.
// 1. Data points
// 2. Blanks
// 3. Nondetections
// 4. Data labels

// 2013-01-14 KWS Add max/min limits.  The last value in the (e.g.) xmin array is the min for the whole array.
//                Likewise for the other limits.  Note that we had to add x2min and x2max here into the
//                javascript array, because for some reason Flot doesn't allow calculations within its axis
//                element specifiers.

// 2012-01-16 KWS Moved graphing specific max/min limits (e.g. padding, x2min and x2max) into the lightcurve
//                javascript code to restrict the HTML code to just presenting the required data values.

// 2013-02-14 KWS Change the xmin to the FIRST value of the xmin array (which doesn't include the limit dates).
// 2018-05-14 KWS Lightcurve now goes back to -30 days.
var jslclimits = { {% if transient.tcs_cmf_metadata_id.filename|slice:"4" == "RING"  %} "xmin": {{ lclimits.xmin|last }}, {% else %} "xmin": {{ lclimits.xmin.0|add:"-30" }}, {% endif %}
                   "xmax": {{ lclimits.today }},
                   "ymin": {% if lclimits.ymin|last > 17 %}17.0{% else %}{{ lclimits.ymin|last }}{% endif %},
                   "ymax": {% if lclimits.ymax|last < 21 %}21.0{% else %}{{ lclimits.ymax|last }}{% endif %},
                   "discoveryDate": {{ lclimits.discoveryDate }},
                   "today": {{ lclimits.today }} };

jslimitsglobal["#flot-lightcurve"] = jslclimits;


// The first data items are detection data, non-detections, blanks (and anything else)
{% for dataseries in lcdata|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 %}
{% endfor %}

jslcdataglobal["#flot-lightcurve"] = jslcdata;

// 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 lcdata|last %}
  jslabels.push({{lclabels|safe}});
{% endfor %}

jslabelsglobal["#flot-lightcurve"] = jslabels;
</script>
{% endblock %}




{% block lightcurvedataforced %}
{% if lcdataforced.0 %}
<script language="javascript" type="text/javascript">

// lcDataForced = [forcedDetectionData, forcedDetectionDataBlanks, plotLabels, plotLimits]
// lcDataForcedFlux = [forcedDetectionDataFlux, plotLabelsFlux, fluxLimits]
// colourDataForced = [colourPlotData, colourPlotLimits, colourPlotLabels]

// 2018-05-14 KWS Lightcurve now goes back to -30 days.
var jslcdataforced = new Array();
var jslabelsforced = new Array();
var jslclimitsforced = { {% if transient.tcs_cmf_metadata_id.filename|slice:"4" == "RING"  %} "xmin": {{ lcdataforced.3.xmin|last }}, {% else %} "xmin": {{ lcdataforced.3.xmin.0|add:"-30" }}, {% endif %}
                         "xmax": {{ lcdataforced.3.today }},
                         "ymin": {% if lcdataforced.3.ymin|last > 17 %}17.0{% else %}{{ lcdataforced.3.ymin|last }}{% endif %},
                         "ymax": {% if lcdataforced.3.ymax|last < 21 %}21.0{% else %}{{ lcdataforced.3.ymax|last }}{% endif %},
                         "discoveryDate": {{ lcdataforced.3.discoveryDate }},
                         "today": {{ lcdataforced.3.today }} };

jslimitsglobal["#flot-lightcurve-forced"] = jslclimitsforced;


{% for dataseries in lcdataforced|slice:":-2" %}
  {% for filterdata in dataseries %}
    jslcdataforced.push({{filterdata}});
  {% endfor %}
{% endfor %}

jslcdataglobal["#flot-lightcurve-forced"] = jslcdataforced;

// 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 lcdataforced.2 %}
  jslabelsforced.push({{lclabels|safe}});
{% endfor %}

jslabelsglobal["#flot-lightcurve-forced"] = jslabelsforced;
</script>
{% endif %}
{% endblock %}



{% block lightcurvedataforcedflux %}
{% if lcdataforcedflux.0 %}
<script language="javascript" type="text/javascript">
// lcDataForcedFlux = [forcedDetectionDataFlux, plotLabelsFlux, fluxLimits]
var jslcdataforcedflux = new Array();
var jslabelsforcedflux = new Array();
var jslclimitsforcedflux = { {% if transient.tcs_cmf_metadata_id.filename|slice:"4" == "RING"  %} "xmin": {{ lcdataforcedflux.3.xmin|last }}, {% else %} "xmin": {{ lcdataforcedflux.3.xmin.0|add:"-30" }}, {% endif %}
                             "xmax": {{ lcdataforcedflux.3.today }},
                             "ymin": {% if lcdataforcedflux.3.ymin|last > 0 %}-200.0{% else %}{{ lcdataforcedflux.3.ymin|last }}{% endif %},
                             "ymax": {% if lcdataforcedflux.3.ymax|last < 1000 %}1000.0{% else %}{{ lcdataforcedflux.3.ymax|last }}{% endif %},
                             "discoveryDate": {{ lcdataforcedflux.3.discoveryDate }},
                             "today": {{ lcdataforcedflux.3.today }} };

jslimitsglobal["#flot-lightcurve-forced-flux"] = jslclimitsforcedflux;

console.log(jslclimitsforcedflux);

{% for dataseries in lcdataforcedflux|slice:":-2" %}
  {% for filterdata in dataseries %}
    jslcdataforcedflux.push({{filterdata}});
  {% endfor %}
{% endfor %}

jslcdataglobal["#flot-lightcurve-forced-flux"] = jslcdataforcedflux;

// 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 lcdataforcedflux.2 %}
  jslabelsforcedflux.push({{lclabels|safe}});
{% endfor %}

jslabelsglobal["#flot-lightcurve-forced-flux"] = jslabelsforcedflux;

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

{% block lightcurvedataforcedstackflux %}
{% if lcdataforcedstackflux.0 %}
<script language="javascript" type="text/javascript">
// lcDataForcedFlux = [forcedDetectionDataFlux, plotLabelsFlux, fluxLimits]
var jslcdataforcedstackflux = new Array();
var jslabelsforcedstackflux = new Array();
var jslclimitsforcedstackflux = { {% if transient.tcs_cmf_metadata_id.filename|slice:"4" == "RING"  %} "xmin": {{ lcdataforcedstackflux.3.xmin|last }}, {% else %} "xmin": {{ lcdataforcedstackflux.3.xmin.0|add:"-30" }}, {% endif %}
                             "xmax": {{ lcdataforcedstackflux.3.today }},
                             "ymin": {{ lcdataforcedstackflux.3.ymin|last }},
                             "ymax": {{ lcdataforcedstackflux.3.ymax|last }},
                             "discoveryDate": {{ lcdataforcedstackflux.3.discoveryDate }},
                             "today": {{ lcdataforcedstackflux.3.today }} };

jslimitsglobal["#flot-lightcurve-forced-stack-flux"] = jslclimitsforcedstackflux;

console.log(jslclimitsforcedstackflux);

{% for dataseries in lcdataforcedstackflux|slice:":-2" %}
  {% for filterdata in dataseries %}
    jslcdataforcedstackflux.push({{filterdata}});
  {% endfor %}
{% endfor %}

jslcdataglobal["#flot-lightcurve-forced-stack-flux"] = jslcdataforcedstackflux;

// 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 lcdataforcedstackflux.2 %}
  jslabelsforcedstackflux.push({{lclabels|safe}});
{% endfor %}

jslabelsglobal["#flot-lightcurve-forced-stack-flux"] = jslabelsforcedstackflux;


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


<!-- Colour data Globals -->
{% block colourplotdataglobal %}
<script language="javascript" type="text/javascript">
var jscolourdataglobal = new Object();
var jscolourlabelsglobal = new Object();
var jscolourlimitsglobal = new Object();
</script>
{% endblock %}



{% block colourplotdata %}
{% if colourdata.0.0 or colourdata.0.1 or colourdata.0.2 %}
<script language="javascript" type="text/javascript">

var jscolourdata = new Array();
var jscolourlabels = new Array();
// The colour limits currently rely on the lightcurve data, but in future we may change this
var jscolourlimits = { {% if transient.tcs_cmf_metadata_id.filename|slice:"4" == "RING"  %} "xmin": {{ lclimits.xmin|last }}, {% else %} "xmin": {{ lclimits.xmin.0 }}, {% endif %}
                       "xmax": {{ lclimits.today }},
                       "ymin": {{ colourplotlimits.ymin|last }},
                       "ymax": {{ colourplotlimits.ymax|last }},
                       "discoveryDate": {{ lclimits.discoveryDate }},
                       "today": {{ lclimits.today }} };

jscolourlimitsglobal["#flot-colourplot"] = jscolourlimits;

// We have an array with 2 elements. Each element is another array of n elements (currently up to 3 colours).
// They must all be the same size - the length of which is captured in the jscolorlabels array.
// 1. Data points
// 2. Data labels

// We will reuse the lightcuve limits (jslclimits) above for max and min date values.

// The first data item is the detection colours
{% for colourdataseries in colourdata|slice:":1" %}
  {% for colour in colourdataseries %}
    jscolourdata.push({{colour}});
  {% endfor %}
{% endfor %}

jscolourdataglobal["#flot-colourplot"] = jscolourdata;

// 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 colourlabels in colourdata|last %}
  jscolourlabels.push({{colourlabels|safe}});
{% endfor %}

jscolourlabelsglobal["#flot-colourplot"] = jscolourlabels;

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

{% block recurrenceplotdata %}
<script language="javascript" type="text/javascript">
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 recurrencedata.0 %}
  jsrecurrencedata.push({{recurrencepoints}});
{% endfor %}


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

jsrecurrencelimitsglobal["#flot-recurrenceplot"] = jsrecurrencelimits;
jsrecurrencedataglobal["#flot-recurrenceplot"] = jsrecurrencedata;
jsrecurrencelabelsglobal["#flot-recurrenceplot"] = jsrecurrencelabels;

</script>
{% endblock %}

{% if fpData %}
{% block fprecurrenceplotdata %}
<script language="javascript" type="text/javascript">
var fpjsrecurrencedata = new Array();
var fpjsrecurrencelabels = new Array();
var fpjsrecurrencelimits = { "xmin": -1.5 * {{ fpData.rms }},
                           "xmax": 1.5 * {{ fpData.rms }},
                           "ymin": -1.5 * {{ fpData.rms }},
                           "ymax": 1.5 * {{ fpData.rms }} };

{% for recurrencepoints in fpData.plotdata %}
  fpjsrecurrencedata.push({{recurrencepoints}});
{% endfor %}

{% for labels in fpData.plotlabels %}
  fpjsrecurrencelabels.push({{labels|safe}});
{% endfor %}

jsrecurrencelimitsglobal["#flot-recurrenceplot-fp"] = fpjsrecurrencelimits;
jsrecurrencedataglobal["#flot-recurrenceplot-fp"] = fpjsrecurrencedata;
jsrecurrencelabelsglobal["#flot-recurrenceplot-fp"] = fpjsrecurrencelabels;

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


{% block colourplotdataforced %}
{% if colourdataforced.0.0 or colourdataforced.0.1 or colourdataforced.0.2 %}
<script language="javascript" type="text/javascript">
    //colourDataForced = [colourPlotData, colourPlotLimits, colourPlotLabels]
var jscolourdataforced = new Array();
var jscolourlabelsforced = new Array();
// The colour limits currently rely on the lightcurve data, but in future we may change this
var jscolourlimitsforced = { {% if transient.tcs_cmf_metadata_id.filename|slice:"4" == "RING"  %} "xmin": {{ lclimits.xmin|last }}, {% else %} "xmin": {{ lclimits.xmin.0 }}, {% endif %}
                             "xmax": {{ lclimits.today }},
                             "ymin": {{ colourdataforced.1.ymin|last }},
                             "ymax": {{ colourdataforced.1.ymax|last }},
                             "discoveryDate": {{ lclimits.discoveryDate }},
                             "today": {{ lclimits.today }} };

jscolourlimitsglobal["#flot-colourplot-forced"] = jscolourlimitsforced;

{% for colourdataseries in colourdataforced|slice:":1" %}
  {% for colour in colourdataseries %}
    jscolourdataforced.push({{colour}});
  {% endfor %}
{% endfor %}

jscolourdataglobal["#flot-colourplot-forced"] = jscolourdataforced;

{% for colourlabels in colourdataforced|last %}
  jscolourlabelsforced.push({{colourlabels|safe}});
{% endfor %}

jscolourlabelsglobal["#flot-colourplot-forced"] = jscolourlabelsforced;
</script>
{% endif %}
{% endblock %}



{% block aladindata %}
<script language="javascript" type="text/javascript">
jsaladinglobal['#aladin-lite-div'] = {};
jsaladinglobal['#aladin-lite-div'].coords = ["{{ avg_coords.ra_sex }}", "{{ avg_coords.dec_sex }}"];
jsaladinglobal['#aladin-lite-div'].coordsdeg = ["{{ avg_coords.ra }}", "{{ avg_coords.dec }}"];
jsaladinglobal['#aladin-lite-div'].name = "{% if transient.atlas_designation %}{{ transient.atlas_designation }}{% else %}{{ transient.id }}{% endif %}{% if transient.other_designation %} ({{ transient.other_designation }}){% endif %}";
jsaladinglobal['#aladin-lite-div'].sherlock = [];

// Experiment with new marker types. The data needs to be in vo format.
{% if sherlockvo %}
jsaladinglobal['#aladin-lite-div'].sherlockvo = `{{ sherlockvo|safe }}`;
{% else %}
jsaladinglobal['#aladin-lite-div'].sherlockvo = null;
{% endif %}

{% if transientvo %}
jsaladinglobal['#aladin-lite-div'].transientvo = `{{ transientvo|safe }}`;
{% else %}
jsaladinglobal['#aladin-lite-div'].transientvo = null;
{% endif %}

{% for x in sx %}
jsaladinglobal['#aladin-lite-div'].sherlock.push({
  name: "{{ x.catalogue_table_name|escapejs }}",
  marker: [{{ x.radeg }}, {{ x.decdeg }}],
  popupTitle: "{{ x.catalogue_table_name|escapejs }} ({{ x.catalogue_object_type|escapejs }}): {{ x.catalogue_object_id|escapejs }}{% if x.z %} (z = {{ x.z|floatformat:4 }}){% endif %}"
});
{% endfor %}

</script>
{% endblock %}



{% block content %}

<!-- For my own sanity - see comments describing which columns are which in the layout -->

<div class="container-fluid">
  <div class="row">
    <!-- First part of the page - 3 columns in large format, width 4, 2, 6 -->

    <div class="col-lg-4 col-md-6 col-sm-12">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <h1>
            {% if transient.atlas_designation %}
              {{ transient.atlas_designation }}
            {% else %}
              {{ transient.id }}
            {% endif %}
          </h1>

        </div>
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">Coords: </span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <h2>{{ avg_coords.ra_sex }} {{ avg_coords.dec_sex }}</h2>
          <h2>({{ avg_coords.ra|floatformat:"5" }} {% if avg_coords.dec >= 0.0 %}+{% endif %}{{ avg_coords.dec|floatformat:"5" }})</h2>
        </div>

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

        {% if transient.vra or transient.rb_pix %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-label">Realbogus Factors</span>
        </div>
    
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">{% if transient.vra %}{{ transient.vra|floatformat:"2" }} (VRA){% endif %} {% if transient.rb_pix %}{{ transient.rb_pix|floatformat:"2" }} (RB Pix){% endif %}</span>
        </div>
        {% endif %}

        {% if transient.detection_list_id %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-label">Flag Date:</span>
        </div>
    
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">{{ transient.followup_flag_date|default_if_none:"" }}</span>
        </div>
        {% endif %}

        <!-- 2019-02-11 KWS Added ATel button. -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a class="btn btn-outline-primary" href="{% url 'atel' transient.id %}" role="button">Generate AstroNote</a>
        </div>

      </div>
    </div>

    <div class="col-lg-2 col-md-6 col-sm-12">
      <div class="row">
        {% if transient.other_designation %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">IAU Name: </span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <h2><a href="https://wis-tns.org/object/{{transient.other_designation}}">{{ transient.other_designation }}</a></h2>
        </div>
        {% endif %}

        {% if externalXMs %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">See Also: </span>
        </div>

        {% for row in externalXMs %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          {% ifchanged row.external_designation %}
             {% if row.url %}
               <h3><a href="{{ row.url }}">{{ row.external_designation }}</a></h3>
             {% else %}
               <h3>{{ row.external_designation }}</h3>
             {% endif %}
          {% endifchanged %}
        </div>
        {% endfor %}        
        {% endif %}

        <!-- 2026-02-02 Lasair Crossmatches START. -->

        {% if lasairCrossmatches %}
        {% for l in lasairCrossmatches %}

        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">{{ l.description }} Crossmatches: </span>
        </div>

        {% for row in l.crossmatches %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <h3><a href="{{ l.baseurl }}/objects/{{ row.object }}/">{{ row.object }}</a></h3>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Offset = {{ row.separation|floatformat:"2" }}"</span>
        </div>
        {% endfor %}

        {% endfor %}
        {% endif %}

        <!-- 2026-02-02 Lasair Crossmatches END. -->

        <!-- 2026-02-02 Pan-STARRS Crossmatches START. -->

        {% if panstarrsCrossmatches %}
        {% for p in panstarrsCrossmatches %}

        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">{{ p.description }} Crossmatches: </span>
        </div>

        {% for row in p.crossmatches %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <h3><a href="{{ p.baseurl }}/psdb/candidate/{{ row.object }}/">{% if row.objectname %}{{ row.objectname }}{% else %}Pan-STARRS object{% endif %}</a></h3>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Offset = {{ row.separation|floatformat:"2" }}"</span>
        </div>
        {% endfor %}

        {% endfor %}
        {% endif %}

        <!-- 2026-02-02 Pan-STARRS Crossmatches END. -->

        {% if tnsXMs %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">TNS Crossmatch: </span>
        </div>

        {% for row in tnsXMs %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          {% ifchanged row.external_designation %}
             {% if row.url %}
               <h3><a href="{{ row.url }}">{{ row.external_designation }}</a></h3>
             {% else %}
               <h3>{{ row.external_designation }}</h3>
             {% endif %}
          {% endifchanged %}
        </div>

        {% if row.separation %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Offset = {{ row.separation|floatformat:"2" }}"</span>
        </div>
        {% endif %}
        {% if row.object_z %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Object z = {{ row.object_z|floatformat:"3" }}</span>
        </div>
        {% endif %}
        {% if row.host_z %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Host z = {{ row.host_z|floatformat:"3" }}</span>
        </div>
        {% endif %}
        {% if row.discoverer %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Discoverer = {{ row.discoverer }}</span>
        </div>
        {% endif %}
        {% if row.other_info and row.other_info != transient.atlas_designation %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Name = {{ row.other_info }}</span>
        </div>
        {% endif %}
        {% if row.disc_date %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Discovered on {{ row.disc_date }}</span>
        </div>
        {% endif %}

        {% endfor %}
        {% endif %}

        {% if extinction %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">Galactic Extinction </span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
           <style>
             .ext-table {
               font-family: "Courier New", Courier, monospace;
               font-size: 0.7rem;
             }
             .ext-table td:nth-child(2),
             .ext-table th:nth-child(2) {
               text-align: right;
             }
           </style>

           <table class="ext-table">
             <thead>
               <tr>
                 <th>Filter</th>
                 <th style="text-align: right;">A</th>
               </tr>
             </thead>
             <tbody>
               {# dictsort is optional, just to keep rows in a predictable order #}
               {% for key, value in extinction.items %}
                 <tr>
                   {# remove the 'A_' prefix by slicing off the first 2 characters #}
                   <td>{{ key|slice:"2:" }}</td>
           
                   {# format the float to 3 decimal places #}
                   <td style="text-align: right;">{{ value|floatformat:3 }}</td>
                 </tr>
               {% endfor %}
             </tbody>
           </table>
        </div>
        {% endif %}

      </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-label">Number of Detections:</span>
        </div>
    
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">{{ table.rows|length }}</span>
        </div>

        {% if transient.detection_list_id %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-label">Object List:</span>
        </div>
    
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">{{ transient.detection_list_id.name|default_if_none:"" }}</span>
        </div>
        {% endif %}

        {% if transient.processing_flags %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-label">Processing Flags:</span>
        </div>
    
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">{{ transient.decode_processing_flags_bits|default_if_none:"" }}</span>
        </div>
        {% endif %}

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

        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">Context: </span>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12">
          <h2>{{ transient.sherlockClassification }}</h2>
        </div>

        {% if sc.0.annotation %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">{{ sc.0.annotation|default_if_none:""|safe }}</span>
        </div>
        {% endif %}

        {% if comments %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">Comments:</span>
        </div>
        {% for comment in 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" }}[{{ comment.date_inserted_mjd|floatformat:"5" }}]{% if comment.username %} ({{ comment.username }}){% endif %}: {{ comment.comment }}</span>
        </div>
        {% endfor %}
        {% endif %}

        {% if gw %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">Possible GW Events Association:</span>
        </div>
        {% for row in gw %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value"><a href="https://gracedb.ligo.org/superevents/{{ row.gravity_event_id }}/view/">{{ row.gravity_event_id }}</a>{% if row.map_iteration.mjd_obs %} <a href="https://psweb.mp.qub.ac.uk/o4_events/superevents/{{ row.gravity_event_id }}/{{ row.map_iteration.map_iteration }}/skymap.png">qub map</a> (MJD = {{ row.map_iteration.mjd_obs|floatformat:"5" }}).{% endif %}{% if row.days_since_event %} Time since GW trigger {{ row.days_since_event|floatformat:"2" }} days.{% endif %} {% if row.enclosing_contour %} Within {{ row.enclosing_contour|default_if_none:"" }}&#37; contour{% endif %}{% if row.probability %} ({{ row.probability }}&#37;).{% endif %}{% if row.map_iteration.alert_time %}{% if row.distance %} Position specific distance {{ row.distance|floatformat:"0" }} (+/- {{ row.distance_sigma|floatformat:"0" }}) Mpc. {% endif %}{% if row.map_iteration.class_bbh %}BBH ({{ row.map_iteration.class_bbh_pc|floatformat:"0" }}&#37) {% endif %}{% if row.map_iteration.class_bns %}BNS ({{ row.map_iteration.class_bns_pc|floatformat:"0" }}&#37) {% endif %}{% if row.map_iteration.class_nsbh %}NSBH ({{ row.map_iteration.class_nsbh_pc|floatformat:"0" }}&#37) {% endif %}{% if row.map_iteration.class_terrestrial %}Terr ({{ row.map_iteration.class_terrestrial_pc|floatformat:"0" }}&#37) {% endif %}Alert time: {{ row.map_iteration.alert_time }}.{% endif %}{% if row.map_iteration.alert_type %} Alert type: {{ row.map_iteration.alert_type }}.{% endif %}</span>
        </div>
        {% endfor %}
        {% endif %}

      </div>
    </div>

  </div>
  <!-- First part of page layout ends -->

  <!-- Second part of page - 3 columns, width 6, 2, 4 OR 8, 4 if there are no images -->

  <div class="row">
    {% if images %}
    <div class="col-lg-6 col-md-6 col-sm-12">
    {% else %}
    <div class="col-lg-8 col-md-6 col-sm-12">
    {% endif %}

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">Unforced Photometry Lightcurve</span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div id="flot-lightcurve"></div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value"><a href="../../lightcurve/{{transient.id}}/">Raw Unforced Data</a></span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div id="mjdticker"><form name="Boxes" onsubmit="0"> Current MJD (vertical line): <input id="mjdtickerform" name="row2d" value="wait ..."></form></div>
        </div>

        {% if lcdataforced.0 %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">Forced Photometry Lightcurve</span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div id="flot-lightcurve-forced"></div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value"><a href="../../lightcurveforced/{{transient.id}}/">Raw Forced Data</a></span>
        </div>
        {% endif %}

        {% if lcdataforcedflux.0 %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">Forced Photometry Flux</span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div id="flot-lightcurve-forced-flux"></div>
        </div>
        {% endif %}

        {% if lcdataforcedstackflux.0 %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">Forced Diffstack Photometry Flux</span>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div id="flot-lightcurve-forced-stack-flux"></div>
        </div>

        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value"><a href="../../lightcurvestackedforced/{{transient.id}}/">Raw Stacked Forced Data</a></span>
        </div>
        {% endif %}

        {% if userList %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <span class="parameter-value">Object is a member of:</span>
        </div>
        {% for row in userList %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="../../userlist/{{row.object_group_id.id}}/">{{ row.object_group_id.description }}</a>
        </div>
        {% endfor %}
        {% endif %}

      </div>
    </div>
    
    {% if images %}
    <div class="col-lg-2 col-md-6 col-sm-12">
    {% else %}
    <div class="col-lg-4 col-md-6 col-sm-12">
    {% endif %}
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div id="flot-recurrenceplot"></div>
        </div>

      {% if conesearchold %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-label">Partner Database Objects in the Vicinity: </span>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12">
            <table class="generictable">
            <tr>
              <th>Partner Object ID</th>
              <th>Separation</th>
            </tr>
          
            {% for row in conesearchold %}
              <tr>
              <td><a href="{{olddburl}}candidate/{{row.xmid}}/">{% if row.xmName %}{{ row.xmName }}{% if row.xmTNS %} ({{ row.xmTNS }}){% endif %}{% else %}{{ row.xmid }}{% endif %}</a></td>
              <td>{{ row.separation|floatformat:2 }}&quot;</td>
              </tr>
            {% endfor %}
          
            </table>
        </div>
      {% endif %}

        <div class="col-lg-12 col-md-12 col-sm-12">
          <div id="aladin-lite-div" style="width:250px;height:250px;"></div>

          <script type="text/javascript" src="{{ STATIC_URL }}js/aladin3.js" charset="utf-8"></script>
          <script language="javascript" type="text/javascript">var aladindivname = "#aladin-lite-div";</script>
          <script src="{{ STATIC_URL }}js/aladin_display_vo.js"></script>

        </div>

        {% if finderImages %}
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="parameter-value">Finders: </span>
        </div>

        {% for row in finderImages %}
          <div class="col-lg-12 col-md-12 col-sm-12">
          <a href="{{ MEDIA_URL }}images/data/{{ dbName }}/{{ row.whole_mjd }}/{{ row.image_filename }}.jpeg"><img src="{{ MEDIA_URL }}images/data/{{ dbName }}/{{ row.whole_mjd }}/{{ row.image_filename }}.jpeg" alt="{{ row.pss_filename }}" title="{{ row.pss_filename }}" onerror="this.src='{{ STATIC_URL }}images/image_not_available.jpeg';" height="250px" /></a>
          </div>
        {% endfor %}
        {% endif %}



      <!-- WIKISKY --> <!-- NEED TO INPUT RA (DECIMAL HOURS) HERE x 2 -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://www.wikisky.org/?ra={{ avg_coords.ra_in_hours }}&de={{ avg_coords.dec }}&zoom=13&show_grid=1&show_constellation_lines=1&show_constellation_boundaries=1&show_const_names=0&show_galaxies=1&show_box=1&box_ra={{ avg_coords.ra_in_hours }}&box_de={{ avg_coords.dec }}&box_width=50&box_height=50&img_source=DSS2" target="_blank">WIKISKY</a>
        </div>

      {% if avg_coords.dec >= -30.0 %}
      <!-- PS1 Stamp Server -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://ps1images.stsci.edu/cgi-bin/ps1cutouts?pos={{ avg_coords.ra }}{% if avg_coords.dec >= 0.0 %}+{% endif %}{{ avg_coords.dec }}&filter=color&filter=g&filter=r&filter=i&filetypes=stack&auxiliary=data&size=240&output_size=512&verbose=0&autoscale=99.500000&catlist=" target="_blank">PS1 Stamp</a>
        </div>
      {% endif %}

      {% if avg_coords.dec < 0.0 %}
      <!-- Skymapper Stamp Server -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://api.skymapper.nci.org.au/public/siap/dr4/query?POS={{ avg_coords.ra }},{{ avg_coords.dec }}&SIZE=0.05&BAND=g,r,i&FORMAT=GRAPHIC&VERB=3" target="_blank">Skymapper DR4 Stamps</a>
        </div>
      {% endif %}

      <!-- SDSS DR15 NAVIGATE LINK -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://skyserver.sdss.org/dr15/en/tools/chart/navi.aspx?ra={{ avg_coords.ra }}&dec={{ avg_coords.dec }}&scale=0.1&width=500&height=500&opt=GPS" target="_blank">SDSS DR15 Navigate</a>
        </div>

      <!-- NED LINK -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://nedwww.ipac.caltech.edu/cgi-bin/nph-objsearch?in_csys=Equatorial&in_equinox=J2000.0&lon={{ avg_coords.ra|floatformat:6 }}d&lat={{ avg_coords.dec|floatformat:6 }}d&radius=2.0&hconst=73&omegam=0.27&omegav=0.73&corr_z=1&z_constraint=Unconstrained&z_value1=&z_value2=&z_unit=z&search_type=Near+Position+Search&ot_include=ANY&nmp_op=ANY&out_csys=Equatorial&out_equinox=J2000.0&obj_sort=Distance+to+search+center&of=pre_text&zv_breaker=30000.0&list_limit=5&img_stamp=YES" target="_blank">NED: 2 arcmin radius</a>
        </div>

      <!-- LEDA -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://leda.univ-lyon1.fr/fG.cgi?n=0&c=o&p=J{{ avg_coords.ra }}d{{ avg_coords.dec }}d&f=0.16667&ob=ra" target="_blank">LEDA: 10 arcsec radius</a>
        </div>

      <!-- SIMBAD -->
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://simbad.u-strasbg.fr/simbad/sim-coo?Coord={{avg_coords.ra}}d{{ avg_coords.dec }}d&Radius=10&Radius.unit=arcsec&CooFrame=FK5&CooEqui=2000&CooEpoch=2000" target="_blank">SIMBAD: 10 arcsec radius</a>
        </div>

      <!-- Galactic Extinction -->

        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="http://nedwww.ipac.caltech.edu/cgi-bin/nph-calc?in_csys=Equatorial&in_equinox=J2000.0&obs_epoch=2000.0&lon={{ avg_coords.ra }}d&lat={{ avg_coords.dec }}d&pa=0.0&out_csys=Equatorial&out_equinox=J2000.0" target="_blank">Galactic Extinction</a>
        </div>

      <!-- Legacy Survey -->

        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="https://www.legacysurvey.org/viewer?ra={{ avg_coords.ra }}&dec={{ avg_coords.dec }}&zoom=15&mark={{ avg_coords.ra }},{{ avg_coords.dec }}" target="_blank">Legacy Survey</a>
        </div>

        {% if transient.detection_list_id.name == "good" or transient.detection_list_id.name == "followup" %}
        <div class="col-lg-12 col-md-12 col-sm-12">
        <a href="https://www.pessto.org/marshall/transients/search?q={{transient.atlas_designation}}">PESSTO Followup</a>
        </div>
        {% endif %}

      </div>

    </div>

    <!-- Third column only exists if there are images -->
    {% if images %}
    <div class="col-lg-4 col-md-12 col-sm-12">
      <div class="scrollTable">
      <div class="table-responsive table-body table-condensed">
      <table>
      <tr>
      {% for image in images %}
         {% ifchanged image.image_group_id %}
            </tr><tr>
         {% endifchanged %}
         <td>
         <span id="imageinfo">
         {{ image.image_type }}
         {% if image.filter %}
         ({{ image.filter }})
         {% endif %}
         mjd: {{ image.stamp_mjd|floatformat:5 }}<br />
         </span>

         {% if not public %}<a href="{{ MEDIA_URL }}images/data/{{ dbName }}/{{ image.filename }}.fits">{% endif %}
         <img id="stampimages" src="{{ MEDIA_URL }}images/data/{{ dbName }}/{{ image.filename }}.jpeg" alt="{{ image.pss_filename }}" title="{{ image.pss_filename }}" onerror="this.src='{{ STATIC_URL }}images/image_not_available.jpeg';" height="150px" />
         {% if not public %}</a>{% endif %}
         </td>
      {% endfor %}
      </tr>
      </table>
      </div>
      </div>
    </div>
    {% endif %}

  </div>
  <!-- Second part of page layout ends -->

  <!-- Third part of page - 1 column, width 12 -->
  {% if table.rows.count != 0 %}
  <div class="col-lg-12 col-md-12 col-sm-12">

    <div class="table-responsive table-body table-condensed">
    
    {% render_table table %}

    </div>

  </div>
  {% endif %}
  <!-- Third part of page layout ends -->

  <!-- Fourth part of page - 1 column, width 12 - form submit -->
{% if not public and user.is_authenticated %}
{% if processingStatus != 1 %}

   {% if form %}
  <div class="col-lg-12 col-md-12 col-sm-12">
    <form action="" method="post" id="classifyform">
        {%csrf_token%}
        {% for error in form.non_field_errors %}
        <div class="form-group has-errors text-danger small">
            {{ error }}
        </div>
        {% endfor %}
        {% for field in form.visible_fields %}
          <div class="form-group has-errors text-danger small">
              {{ field.errors }}
          </div>
          <div class="form-group">
              {{ field.label }}
          </div>
          <div class="form-group">
          {% if field.name == "promote_demote" %}
            <div class="btn-group flex-wrap btn-group-toggle" data-toggle="buttons">
            {% for radio in field %}
              <label for="{{ radio.id_for_label }}" class="btn btn-outline-secondary btn-sm {% if forloop.last %}active{% endif %}">{{ radio.choice_label }}
              {{ radio.tag }}
              </label>
            {% endfor %}
          </div>
          {% elif field.name == "user_list_membership" %}
            {% for choice in field %}
              <div class="checkbox">
                {{ choice.tag }}
                <label for="{{ choice.id_for_label }}">{{ choice.choice_label }}<br />
                </label>
              </div>
            {% endfor %}

          {% else %}
            {{ field }}
          {% endif %}
        </div>
        {% endfor %}

        {% for hidden in form.hidden_fields %}
          {{ hidden }}
        {% endfor %}
        {% if can_edit_fl == 1 %}
          <button class="btn btn-outline-info my-2 my-sm-0" type="submit" value="Update Object">Update Object</button>
        {% else %}
          <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit" value="Update Object" disabled>Update Object</button>
          {% include "atlas/permissions_alert.html" %}
        {% endif %}
    </form>
  </div>
  {% endif %}

{% else %}
  <div class="col-lg-12 col-md-12 col-sm-12">
     <span class="parameter-value">Database Dump in Progress. Updates not allowed.</span>
  </div>

{% endif %}
{% endif %}
  <!-- Fourth part of page layout ends -->


</div>


<script src="{{ STATIC_URL }}js/plotly/plotly-latest.kws.js"></script>
<script language="javascript" type="text/javascript">var lcdivname = "#flot-lightcurve", lcplotheight = 400, markersize = 15, errorbarsize = 4, arrowsize = 7;</script>
<script src="{{ STATIC_URL }}js/lightcurveplotly.js"></script>
<!--
<script language="javascript" type="text/javascript">
</script>
-->

{% if lcdataforced.0 %}
<script language="javascript" type="text/javascript">var lcdivname = "#flot-lightcurve-forced", lcplotheight = 400, markersize = 15, errorbarsize = 4, arrowsize = 7;</script>
<script src="{{ STATIC_URL }}js/lightcurveplotly.js"></script>
{% endif %}

{% if lcdataforcedflux.0 %}
<script language="javascript" type="text/javascript">var lcdivname = "#flot-lightcurve-forced-flux", lcplotheight = 400, markersize = 15, errorbarsize = 4, arrowsize = 7;</script>
<script src="{{ STATIC_URL }}js/lightcurveplotly.js"></script>
</script>
{% endif %}

{% if lcdataforcedstackflux.0 %}
<script language="javascript" type="text/javascript">var lcdivname = "#flot-lightcurve-forced-stack-flux", lcplotheight = 400, markersize = 15, errorbarsize = 4, arrowsize = 7;</script>
<script src="{{ STATIC_URL }}js/lightcurveplotly.js"></script>
</script>
{% endif %}

<script language="javascript" type="text/javascript">var recdivname = "#flot-recurrenceplot", recplotmaxwidth=300, recmarkersize = 15;</script>
<script src="{{ STATIC_URL }}js/recurrenceplotplotly.js"></script>

<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/mjdcalc.js"></script>


{% endblock %}