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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'processing/css/detrending_diagnostics.css' %}">
<link rel="stylesheet" href="{% static 'processing/css/floating_params.css' %}"/>
{% endblock extra_head %}

{% block header_title %}{% block app_title %}
Detrending Performance
{% endblock %}{% endblock %}

{% block left_menu %}

<a id="download-button" 
   href="{% url 'processing:download_diagnostics_plot' %}">
    <div class="lcars-element 
                button 
                lcars-melrose-bg
                lcars-u-1-1">
        Download Figure
    </div>
</a>

<div class="lcars-element 
            button 
            lcars-melrose-bg
            lcars-u-1-1"
     id="plot-button">
    Update plot
</div>

<a href="{% url 'processing:refresh_diagnostics' %}">
    <div class="lcars-element 
                button 
                lcars-husk-bg
                lcars-u-1-1">
        Refresh
    </div>
</a>
{% endblock left_menu %}


{% block main %}
<div id="active-area" class="lcars-column fill-space">
    <div id="plot-config-parent"> 
        <table class="lcars-table standard-header">
            <thead>
                <tr>
                    <th>Color</th>
                    <th>Marker</th>
                    <th>Scale</th>
                    {% for expr in match_expressions %}
                    <th>{{expr}}</th>
                    {% endfor %}
                    <th>Min. Fraction</th>
                    <th>Label</th>
                </tr>
            </thead>
            <tbody class="lcars-table select-row">
                {% for processing in photref %}
                <tr>
                    <td>
                        <input type="color" 
                               id="plot-color:{{processing.id}}"
                               value={{processing.color}}>
                    </td>
                    <td>
                        <div class="dropdown">
                            <button class="dropbtn selected-marker"
                                    id="marker-button:{{processing.id}}">
                                {% include "core/plot_marker.html" with symb=processing.marker size="30" svg="T" %}
                            </button>
                                <div class="dropdown-content"
                                     id="marker:{{processing.id}}">
                                    {% for symb in " x+osv^<>" %}
                                    {% include "core/plot_marker.html" with symb=symb size="30" svg="T" %}
                                    {% endfor %}
                                </div>
                        </div> 
                    </td>
                    <td>
                        <input type="text" 
                               id="scale:{{processing.id}}"
                               value={{processing.scale}}>
                    </td>

                    {% for val in processing.expressions %}
                    <td> {{val}} </td>
                    {% endfor %}
                    <td> 
                        <input class="param" 
                               id="min-fraction:{{processing.id}}" 
                               type="text"
                               value="{{processing.min_fraction}}"> 
                    </td>
                    <td>
                        <input class="param" 
                               id="label:{{processing.id}}" 
                               type="text"
                               value="{{processing.label}}"> 
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="plot-sep" class="lcars-bracket hollow top"></div>
    <div id="plot-parent" class="fill-space lcars-row">
        <div id="plot-params" class="param lcars-column">
            {% cycle plot_config.x_range plot_config.y_range as range silent %}
            {% for dir in "xy" %}
            <label for="plot-{{dir}}-min">{{dir}} range:</label>
            <input class="param"
                   id="plot-{{dir}}-min"
                   type="text"
                   value="{{range.0}}">
            <label for="plot-{{dir}}-max"> to </label>
            <input class="param"
                   id="plot-{{dir}}-max"
                   type="text"
                   value="{{range.1}}">
            {% cycle range %}
            <div id="param-sep"></div>
            {% endfor %}
            <label for="mag-expression">Magnitude expression:</label>
            <input class="param"
                   id="mag-expression"
                   type="text"
                   value="{{plot_config.mag_expression.0}}">
            <label for="mag-label">X label:</label>
            <input class="param"
                   id="mag-label"
                   type="text"
                   value="{{plot_config.mag_expression.1}}">
            <div id="param-sep"></div>
            <label for="marker-size">Marker size:</label>
            <input class="param"
                   id="marker-size"
                   type="text"
                   value="{{plot_config.marker_size}}">
        </div>
    </div>
</div>

<script src="{% static 'js/autowisp.util.js' %}"></script>
<script src="{% static 'processing/js/detrending.diagnostics.js' %}"></script>
{% url 'processing:update_diagnostics_plot' as updateURL %}
<script type="text/javascript">
    initDiagnosticsPlotting("{{updateURL}}");
</script> 
{% endblock main %}
