{% 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_quantity='XPLACEHOLDER' y_quantities='YPLACEHOLDER' %}"
     data-section-url="{% url 'diagnostics:diagnostics_section' x_quantity=x_quantity y_quantity='YPLACEHOLDER' %}">
    {% comment %} An action rather than a state: choosing a quantity adds
       its section, or scrolls to it if the page already has one. The
       leading placeholder is what the selector returns to afterwards --
       without it, choosing the quantity already shown would fire no
       `change` at all. {% endcomment %}
    <select id="diagnostic-selector"
            class="lcars-bar horizontal button lcars-rust-bg"
            onchange="addOrJumpToSection()">
        <option value="">Add or go to&hellip;</option>
        {% for diag_name in available_diagnostics %}
        <option value="{{ diag_name }}">{{ 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_quantity %}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">
    {% comment %} One section per y quantity, in the order the URL names
       them -- which is the order they took their markers in, and the
       order the legend follows. A section added later is appended here.
    {% endcomment %}
    <div id="diagnostics-table-parent">
        {% for section in sections %}
        {% include "diagnostics/_series_section.html" %}
        {% endfor %}
    </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 %}