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

{% block header_title %}
AutoWISP Reductions Progress
{% endblock header_title %}

{% block extra_head %}
<link rel="stylesheet" 
      href="{% static 'processing/css/jquery.orgchart.css' %}">
<link rel="stylesheet" 
      href="{% static 'processing/css/progress_bar.css' %}">
<link rel="stylesheet" href="{% static 'css/navbar.css' %}">
<link rel="stylesheet" href="{% static 'processing/css/checkboxes.css' %}">
<script defer src="{% static 'processing/js/progress.js' %}"></script>
{% endblock extra_head %}

{% block app_title %}
Processing Progress
{% endblock app_title %}

{% block left_menu %}
{% if running %}
{% if await_start >= 0 %}
<div class="lcars-element 
            lcars-golden-tanoi-bg
            lcars-u-1-1">
    Waiting to start {{ await_start }}
</div>
{% else %}
<div class="lcars-element 
            lcars-golden-tanoi-bg
            lcars-u-1-1">
    Processing
</div>
{% endif %}
{% else %}
<!-- Submit Start Processing with selected steps -->
<button type="submit" form="steps-form"
        class="lcars-element 
               button 
               lcars-melrose-bg
               lcars-u-1-1">
    Start Processing
</button>
{% endif %}

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

{% block main %}

<form id="steps-form" method="post" action="{% url 'processing:start_processing' %}">
    {% csrf_token %}

{# Expose refresh config to JS via data attributes #}
{% if refresh_seconds %}
<div id="aw-progress-config"
     data-refresh-seconds="{{ refresh_seconds }}"
     data-refresh-url="{% if await_start >= 0 %}{% url 'processing:progress' await_start=await_start %}{% else %}{% url 'processing:progress' %}{% endif %}">
</div>
{% endif %}

<table class="lcars-table standard-header">
    <thead>
        <tr>
            <th>
                <div class="aw-step-header">
                    <span>Step</span>
                    {% if not running %}
                    <div class="aw-select-all">
                        <span id="aw-select-all" class="aw-select-all-label" role="button" tabindex="0">
                            Select all
                        </span>
                    </div>
                    {% endif %}
                </div>
            </th>
            <th>Image Type</th>
            {% for channel in channels %}
            <th style="justify-content: center;">{{ channel }}</th>
            {% endfor %}
        </tr>
    </thead>
    {% for step, imtype, by_channel, runs in progress %}
    <tr style="border-bottom: 3px dotted white;">
        <td class="tooltip">
            <span class="tooltiptext">step configuration</span>

            <div class="aw-step-puzzle">
                <a href="{% url 'configuration:config_tree' step=step|join:"_" version=0 %}">
                    <div class="lcars-element 
                                button 
                                rounded 
                                lcars-chestnut-rose-bg
                                lcars-u-2
                                aw-step-name">
                        {{ step|join:" " }}
                    </div>
                </a>

                <label class="aw-step-checkbox aw-step-checkbox--right">
                    {% with token=step|join:'_'|add:'_'|add:imtype %}
                    <input type="checkbox" 
                           name="steps" 
                           value="{{ token }}" 
                           {% if running %}disabled{% endif %}
                           {% if not running or token in selected_tokens %}checked{% endif %}>
                    {% endwith %}
                    <span class="checkbox-ui" aria-hidden="true"></span>
                </label>
            </div>
        </td>
        <td class="tooltip">
            {% if step.0 == 'fit' and step.1 == 'magnitudes' or step.0 == 'find' and step.1 == 'stars' %}
                {% if step.0 == 'fit' and step.1 == 'magnitudes' %}
                <a href="{% url 'processing:select_photref_target' %}">
                    <span class="tooltiptext">select reference image</span>
                {% else %}
                <a href="{% url 'processing:select_starfind_batch' %}">
                    <span class="tooltiptext">tune source extraction</span>
                {% endif %}
                    <div class="lcars-element 
                                button 
                                rounded 
                                lcars-chestnut-rose-bg"
                         style="align-items: center; justify-content: left;">
                        {{ imtype }}
                    </div>
                </a>
            {% else %}
            {{ imtype }}
            {% endif %}
        </td>
        {% for success, failure, pending, by_status in by_channel %}
        {% with final=success|add:failure %}
        {% with total=final|add:pending %}
        <td>
            <table>
                <tr>
                    <td colspan=2 class="tooltip">
                        <span class="tooltiptext">
                            {% if step.0 == 'calibrate' %}
                            Review cilabration diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='quantiles' as diagnostic_url %}
                            {% elif step.0 == 'find' and step.1 == 'stars' %}
                            Review star finding diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='num_extracted_src' as diagnostic_url %}

                            {% elif step.0 == 'solve' and step.1 == 'astrometry' %}
                            Review astrometry diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='pointing_offset' as diagnostic_url %}
                            {% elif step.0 == 'fit' and step.1 == 'star' and step.2 == 'shape' %}
                            Review star shepe fit diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='bg_center' as diagnostic_url %}
                            {% elif step.0 == 'measure' and step.1 == 'aperture' and step.2 == 'photometry' %}
                            Review aperture photometry diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='bg_center' as diagnostic_url %}
                            {% elif step.0 == 'fit' and step.1 == 'source' and step.2 == 'extracted' and step.4 == 'map' %}
                            Review source extraction PSF diagnostics
                            {% url 'diagnostics:display_image_diagnostics' diagnostic_name='s_center' as diagnostic_url %}
                            {% elif step.0 == 'fit' and step.1 == 'magnitudes' or step.0 == 'epd' or step.0 == 'tfa' or step.1 == 'epd' or step.1 == 'tfa' %}
                            Review magnitude fitting performance 
                            {% url 'diagnostics:display_detrending_diagnostics' as diagnostic_url %}
                            {% endif %}
                        </span>
                        {% if diagnostic_url %}
                        <a href="{{ diagnostic_url }}">
                        {% endif %}

                        <div id="progress-with-label">
                            <span style="width: {% widthratio final total 100 %}%;">
                                {{success}}/{{total}}
                                {% if failure > 0 %}
                                | {{failure}}/{{total}}
                                {% endif %}
                            </span>
                            <div class="progress-success" 
                                 style="width: {% widthratio success total 100 %}%">
                            </div>
                            <div class="progress-failure" 
                                 style="width: {% widthratio failure total 100 %}%">
                            </div>
                        </div>
                        {% if diagnostic_url %}
                        </a">
                        {% endif %}
                    </td>
                </tr>
                {% for status, count in by_status %}
                <tr>
                    <td class="lcars-u-1">Status {{ status }}</td>
                    <td>
                        <div id="progress-with-label" 
                             style="width: 100%">
                            <span style="width:{% widthratio count pending 100 %}%">
                                {{count}}/{{pending}}
                            </span>
                            <div class="progress-success" 
                                 style="width: {% widthratio count pending 100 %}%">
                            </div>
                        </div>
                    </td>

                </tr>
                {% endfor %}
            </table>
        </td>
        {% endwith %}
        {% endwith %}
        {% endfor %}
        <td class="dropdown">
            {% if runs %}
            <div class="dropbtn
                               lcars-element 
                               button 
                               rounded 
                               lcars-husk-bg"
                 style="align-items: center;">
                Logs
            </div>
            <div class="dropdown-content">
                {% for run_id, started, finished in runs %}
                <a href="{% url 'processing:review' run_id 'INFO' %}"
                   class="dropdown-content">
                    Started {{started}}
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </td>
    </tr>
    {% endfor %}
</table>

</form>

{% endblock main %}

{% block scripts %}
{# Moved all JS to static/processing/js/progress.js #}
{% endblock %}