{% extends 'core/lcars_app.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet"
      href="{% static 'diagnostics/css/diagnostics_app.css' %}">
{% block diagnostics_extra_head %}{% endblock %}
{% endblock extra_head %}

{% block header_title %}{{ diagnostics_title|default:"Diagnostics" }}{% endblock %}

{% block app_title %}{{ diagnostics_title|default:"Diagnostics" }}{% endblock app_title %}

{% block header_bar_extra %}
{% if available_diagnostics %}
<div class="lcars-bar horizontal"
     id="diag-selector-bar"
     data-diagnostics-url="{% url 'diagnostics:display_diagnostics' x_diagnostic='XPLACEHOLDER' y_diagnostic='YPLACEHOLDER' %}">
    <select id="diagnostic-selector"
            class="lcars-bar horizontal button lcars-rust-bg"
            onchange="navigateDiagnostics()">
        {% for diag_name in available_diagnostics %}
        <option value="{{ diag_name }}"
                {% if diag_name == y_diagnostic %}selected{% endif %}>
            {{ diag_name }}
        </option>
        {% endfor %}
    </select>
    <select id="x-diagnostic-selector"
            class="lcars-bar horizontal button lcars-rust-bg"
            onchange="navigateDiagnostics()">
        {% for diag_name in available_diagnostics %}
        <option value="{{ diag_name }}"
                {% if diag_name == x_diagnostic %}selected{% endif %}>
            {{ diag_name }}
        </option>
        {% endfor %}
    </select>
</div>
{% endif %}
{% endblock header_bar_extra %}

{% block left_menu %}
<a href="{% url 'diagnostics:list_expressions' %}">
    <div class="lcars-element button lcars-melrose-bg lcars-u-1-2">
        Diagnostic Expressions
    </div>
</a>
{% if download_pdf_url %}
<a id="download-button" href="{{ download_pdf_url }}">
    <div class="lcars-element button lcars-melrose-bg lcars-u-1-2">
        Download Figure
    </div>
</a>
{% endif %}
{{ block.super }}
{% endblock left_menu %}

{% block main %}
<div id="active-area" class="lcars-column fill-space">
    <div id="diagnostics-table-parent">
        {% comment %} "asc": first click sorts ascending, which the library does not
           default to.  A first click that jumps to descending reads as the
           table having been shuffled rather than ordered. {% endcomment %}
        <table class="lcars-table standard-header sortable asc">
            <thead>
                <tr>
                    <th class="no-sort">Color</th>
                    <th class="no-sort">Style</th>
                    <th class="no-sort">Scale</th>
                    <th class="no-sort">Label</th>
                    {% for field in diagnostics_fields %}
                    {% comment %} A channel column holds a dropdown, which
                       sorts by nothing useful. {% endcomment %}
                    <th{% if field in slot_headings %} class="no-sort"{% endif %}>
                        {{ field }}
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody class="lcars-table select-row">
                {% for diagnostic in diagnostics_list %}
                {% include "diagnostics/_series_row.html" %}
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="plot-sep" class="lcars-bracket hollow top"></div>
    <div id="diagnostics-display" class="fill-space">
        {% block diagnostics_display %}
        <p class="lcars-text">Select diagnostics to display.</p>
        {% endblock diagnostics_display %}
    </div>
</div>

<script src="{% static 'js/autowisp.util.js' %}"></script>
{# One delegated listener on document, no init call, so load order is free. #}
<script src="{% static 'js/sortable.min.js' %}"></script>
<script src="{% static 'diagnostics/js/diagnostics_app.js' %}"></script>
{% if update_plot_url %}
<script type="text/javascript">
    initImageDiagnostics("{{ update_plot_url }}");
</script>
{% endif %}
{% block diagnostics_extra_scripts %}{% endblock %}
{% endblock main %}

{% block footer_bar_extra %}
<div class="lcars-bar horizontal bottom">
    <button id="legend-toggle"
            class="lcars-bar bottom button lcars-rust-bg"
            onclick="this.classList.toggle('inactive'); this.textContent = this.classList.contains('inactive') ? 'Show Legend' : 'Hide Legend'; updateFigure();">
        Hide Legend
    </button>
</div>
{% endblock footer_bar_extra %}