{% extends "base.html" %}
{% block title %}{{ instrument_name|default:"Instrument not found" }}{% endblock %}
{% load static %}
{% include crispy_tags %}
{% load crispy_forms_tags %}
{% load colour_table_row %}
{% load render_table from django_tables2 %}

{% block body %}
    {% if message %}
        <div class="text-center card" id="notactive">{{ message }}</div>
    {% else %}
        {% if info_message %}
        <div id="top-alert-message" class="text-center alert alert-warning">{{ info_message }}</div>
        {% endif %}
        <!-- Instrument Name -->
        <div class="row">
            <div class="col-lg-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-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">
            <div>
                {% if instrument.is_paused %}
                    <a class="btn btn-danger btn-block" id="pause">
                        <i class="fas fa-play"></i>
                        &nbsp;&nbsp;Resume Autoreduction on {{ instrument_name }}
                    </a>
                {% else %}
                    <a class="btn btn-success btn-block" id="pause">
                        <i class="fas fa-pause"></i>
                        &nbsp;&nbsp;Pause Autoreduction on {{ instrument_name }}
                    </a>
                {% endif %}
                <form id="form-pause" method="POST" action="{% url 'runs:pause' instrument_name %}">
                    {% csrf_token %}
                    <input type="hidden" name="currently_paused" id="currently_paused" value="{{ instrument.is_paused }}">
                </form>
                <p></p>
            </div>
            <div id="btn-re-run_past_job">
                <p>
                    <a href="{% url 'runs:rerun_jobs' instrument=instrument_name %}" class="btn btn-success btn-block {% if not has_variables %} disabled {% endif %}">
                        <i class="fas fa-arrow-left"></i>
                        &nbsp;&nbsp;Re-run past jobs
                    </a>
                </p>
            </div>
            <div id="btn-configure_new_runs">
                <p>
                    <a href="{% url 'runs:variables' instrument=instrument_name %}"class="btn btn-success btn-block {% if not has_variables %} disabled {% endif %}">
                        <i class="fas fa-plus"></i>
                        &nbsp;&nbsp;Configure New Runs
                    </a>
                </p>
            </div>
            <div id="btn-see_instrument_variables">
                <p>
                    <a href="{% url 'runs:variables_summary' instrument=instrument_name %}" class="btn btn-success btn-block {% if not has_variables %} disabled {% endif %}">
                        <i class="far fa-eye"></i>
                        &nbsp;&nbsp;See Instrument variables
                    </a>
            </div>
            <div id="btn-batch_job">
                <p>
                    <a href="{% url 'runs:configure_batch_run' instrument=instrument_name %}" class="btn btn-success btn-block {% if not has_variables %} disabled {% endif %}">
                        <i class="fa fa-cog"></i>
                        &nbsp;&nbsp;Submit batch job
                    </a>
                </p>
            </div>
            {% if not has_variables %}
                <div class="alert alert-warning" role="alert" id="variables_alert_message">
                    <i class="fa fa-exclamation-triangle"></i>
                    &nbsp;&nbsp;The buttons above have been disabled because {{ error_reason }}.
                </div>
            {% endif %}
            </div>
        </div>
        <br/>
        <hr/>
        <!-- Display table for reduction jobs -->
        <div id="filter-options">
            <form action="{{ request.path }}" method="get" id="filter_options">
            <div class="form-row align-items-center">
                <div class="col-auto my-1">
                    {{ options_form.filter|as_crispy_field }}
                </div>
                <div class="col-auto my-1">
                    {{ options_form.per_page|as_crispy_field }}
                </div>
                <div class="col-auto my-1">
                <button type="submit" class="btn btn-primary" value="Apply filters" id="apply_filters">Submit</button>
                </div>
            </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' or filtering == 'batch_runs' %}
                    {% render_table run_table %}
                {% elif filtering == 'experiment' %}
                    {% render_table experiment_table %}
                {% else %}
                    <div class="row">No runs to show</div>
                {% endif %}
            </div>
        </div>
            <br/>
        </div>
    {% endif %}
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{% static "css/vendor/bootstrap-tourist.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-tourist.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 %}
