{% extends "base.html" %}
{% block title %}{{ instrument_name|default:"Instrument not found" }}{% endblock %}
{% load view %}
{% load static %}
{% load colour_table_rows %}

{% block body %}
    {% if message %}
        <div class="text-center col-md-6 col-md-offset-3 well well-small" id="notactive">
            {{ message }}
        </div>
    {% else %}
        <!-- Instrument Name -->
        <div class="row">
            <div class="col-md-12 text-center">
                <h2>{{ instrument_name }}</h2>
            </div>
        </div>

        <!-- Instrument status and control buttons -->
        <div class="row" id="btn-instrument_active">
            <!-- Status panel -->
            <div class="col-md-6">
                {% include "snippets/instrument_status.html" with processing=processing queued=queued last_instrument_run=last_instrument_run only %}
            </div>

            <!-- Pause / Resume Reduction button-->
            <div class="col-md-6 text-center">
                {% if instrument.is_paused %}
                    <a class="btn btn-danger btn-block" id="pause"><i class="fa fa-play"></i>&nbsp;&nbsp;Resume
                        Autoreduction on {{ instrument_name }}</a>
                {% else %}
                    <a class="btn btn-success btn-block" id="pause"><i class="fa fa-pause"></i>&nbsp;&nbsp;Pause
                        Autoreduction on {{ instrument_name }}</a>
                {% endif %}
                <form id="form-pause" method="POST"
                      action="{% url 'instrument:pause' instrument_name %}">
                    {% csrf_token %}
                    <input type="hidden" name="currently_paused" id="currently_paused"
                           value="{{ instrument.is_paused }}">
                </form>
                <p></p>
            </div>


            <div class="col-md-6 text-center" id="btn-re-run_past_job">
                <p><a href="{% url 'instrument:submit_runs' instrument=instrument_name %}"
                        class="btn btn-success btn-block"
                        {% if not has_variables %}disabled{% endif %}><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Re-run past jobs</a></p>
            </div>

            <div class="col-md-6 text-center" id="btn-configure_new_runs">
                <p><a href="{% url 'instrument:variables' instrument=instrument_name %}"
                      class="btn btn-success btn-block"
                      {% if not has_variables %}disabled{% endif %}
                      ><i class="fa fa-plus"></i>&nbsp;&nbsp;Configure New Runs</a></p>
            </div>

            <div class="col-md-6 text-center" id="btn-see_instrument_variables">
                <p><a href="{% url 'instrument:variables_summary' instrument=instrument_name %}"
                        class="btn btn-success btn-block"
                        {% if not has_variables %}disabled{% endif %}><i class="fa fa-eye"></i>&nbsp;&nbsp;See Instrument variables</a></p>
            </div>
            {% if not has_variables %}
            <div class="col-md-offset-6 col-md-6 text-center alert alert-warning" role="alert" id="alert_message">
                <i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;
                The buttons above have been disabled because {{ error_reason }}.
            </div>
            {% endif %}

        </div>
        <br/>
        <hr/>
        <!-- Display table for reduction jobs -->
        <div class="row" id="filter-options">
            <!-- Filter , Sort and Pagination options -->
            <form action="{{ request.path }}" method="get" id="filter_options">
                <div class="col-md-3">
                    <label for="filter_select">Filter by: </label>
                    <select class="form-control" name="filter" form="filter_options"
                            id="filter_select">
                        <option value="run" title="Display run numbers"
                                {% if filtering == 'run' %}selected="selected"{% endif %}>Run number
                        </option>
                        <option value="experiment" title="Display run number grouped by RB number"
                                {% if filtering == 'experiment' %} selected="selected" {% endif %}>
                            Experiment Reference (RB)
                        </option>
                    </select>
                </div>

                <div class="col-md-3">
                    <label for="sort_select">Sort by</label>
                    <select class="form-control" name="sort" form="filter_options" id="sort_select">
                        <option value="run" {% if sort == 'run' %}selected="selected"{% endif %}>
                            Number
                        </option>
                        >
                        <option value="date" {% if sort == 'date' %}selected="selected"{% endif %}>
                            Date
                        </option>
                    </select>
                </div>

                {% if filtering == 'run' %}
                    <div class="col-md-3">
                        <label for="pagination_select">Items per page</label>
                        <select title="The number of reduction jobs that should be shown per page"
                                class="form-control" name="pagination" form="filter_options"
                                id="pagination_select">
                            <option {% if max_items == '10' %}selected="selected"{% endif %}>10
                            </option>
                            <option {% if max_items == '25' %}selected="selected"{% endif %}>25
                            </option>
                            <option {% if max_items == '50' %}selected="selected"{% endif %}>50
                            </option>
                            <option {% if max_items == '100' %}selected="selected"{% endif %}>100
                            </option>
                            <option {% if max_items == '250' %}selected="selected"{% endif %}>250
                            </option>
                            <option {% if max_items == '500' %}selected="selected"{% endif %}>500
                            </option>
                        </select>
                    </div>

                {% endif %}
                <div class="col-md-3">
                    <input class="btn btn-primary" type="submit" value="Apply filters"
                           id="apply_filters">
                </div>
            </form>
        </div>
        <br/>
        <!-- Display table for every reduction job -->
        <div class="row" id="runs-table">
        <div class="tab-content col-md-12">
            {% if filtering == 'run' %}
                <!-- Run number filtered jobs -->
                <div class="row" id="by-run-number">
                {% for run in paginator.current_page.records %}
                    {% if forloop.first %}
                        <div class="row run-row-top" id="run-row-top">
                    {% else %}
                        <div class="row run-row">
                    {% endif %}
                <div class="col-md-5 col-sm-5 col-md-offset-1 col-xs-4"><a
                        href="{% url 'runs:summary' instrument_name=instrument_name run_number=run.run_number run_version=run.run_version %}"
                        {% if forloop.first %} id="top-run-number" {% endif %} class="run-num-links">{{ run.title }}</a></div>
                <div class="col-md-2 col-sm-2 col-xs-4 run-status text-{% colour_table_row run.status.value_verbose %}">
                    <strong>{{ run.status.value_verbose }}</strong></div>
                <div class="col-md-4 col-sm-5 col-xs-4"><strong>Last
                    updated:</strong> {{ run.last_updated }}</div>
                </div>
                {% endfor %}
            </div>
            {% elif filtering == 'experiment' %}
                <!-- Experiment filtered jobs -->
                <div class="row" id="by-experiment-number">
                {% for experiment, associated_runs in experiments.items %}
                    {% if forloop.first %}
                        <div class="col-md-12 run-row-top" data-toggle="collapse"
                             data-target="#RB{{ experiment.reference_number }}">
                    {% else %}
                        <div class="col-md-12 run-row" data-toggle="collapse"
                             data-target="#RB{{ experiment.reference_number }}">
                    {% endif %}
                <div class="col-md-1"></div>
                <a href="{% url 'experiment_summary' experiment.reference_number %}"
                   onClick="event.stopPropagation();"> RB{{ experiment.reference_number }}</a>
                </div>

                    <div id="RB{{ experiment.reference_number }}" class="collapse">
                        {% for run in associated_runs %}
                            <div class="row run-row-internal">
                                <div class="col-md-5 col-sm-5 col-md-offset-1 col-xs-4"><a
                                        href="{% url 'runs:summary' instrument_name=instrument_name run_number=run.run_number run_version=run.run_version %}">{{ run.title }}</a>
                                </div>
                                <div class="col-md-2 col-sm-2 col-xs-4 run-status text-{% colour_table_row run.status.value_verbose %}">
                                    <strong>{{ run.status.value_verbose }}</strong></div>
                                <div class="col-md-4 col-sm-5 col-xs-4"><strong>Last
                                    updated:</strong> {{ run.last_updated }}</div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
            {% else %}
                <div class="row">No runs to show</div>
            {% endif %}
            </div>
            </div>
            <br/>
            <!-- Paginator -->
            {% if filtering == 'run' %}
                <div class="row">
                    {% if paginator %}
                        <div class="col-md-12 text-center">
                            <div class="btn-group" role="group">
                                {% if paginator.has_previous %}
                                    <button title="First Page" class="btn btn-default"
                                            onclick="changePage(1)"><i
                                            class="fa fa-step-backward"></i></button>
                                    <button title="Previous Page" class="btn btn-default"
                                            onclick="changePage({{ paginator.previous_page_index }})">
                                        <i class="fa fa-chevron-left"></i></button>
                                {% endif %}

                                {% for page in paginator.display_list %}
                                    {% if page.is_visible %}
                                        {% if page.number == paginator.current_page_index %}
                                            <button title="Current Page"
                                                    class="btn btn-primary inline">{{ page.display_name }}</button>
                                        {% else %}
                                            <button class="btn btn-default"
                                                    onclick="changePage({{ page.number }})">{{ page.display_name }}</button>
                                        {% endif %}
                                    {% else %}
                                        <button title="There are additional pages. Please access them using the navigation buttons."
                                                class="btn btn-default disabled">...
                                        </button>
                                    {% endif %}
                                {% endfor %}

                                {% if paginator.has_next %}
                                    <button title="Next Page" class="btn btn-default"
                                            onclick="changePage({{ paginator.next_page_index }})"><i
                                            class="fa fa-chevron-right"></i></button>
                                    <button title="Last page" class="btn btn-default"
                                            onclick="changePage({{ last_page_index }})"><i
                                            class="fa fa-step-forward"></i></button>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{% static "css/vendor/bootstrap-tour.min.css" %}">
{% endblock %}
{% block scripts %}
    {% if preload_runs %}
        <script>window.preload_runs = true;</script>
    {% endif %}

    <script src="{% static "javascript/pause_instrument.js" %}"></script>
    <script src="{% static "javascript/instrument_variables.js" %}"></script>
    <script src="{% static "javascript/runs_list.js" %}"></script>

    <script src="{% static "javascript/vendor/bootstrap-tour.min.js" %}"></script>
    <script src="{% static "javascript/tours/instrument_summary_tour.js" %}"></script>
    <script src="{% static "javascript/tours/navbar_tour.js" %}"></script>
    <script src="{% static "javascript/create_tour.js" %}"></script>
{% endblock %}