{% extends "waves/services/../services/base.html" %}
{% load waves_tags %}
{% block scripts %}
    {{ block.super }}
    <script>
        var reloading;

        function checkReloading() {
            if (window.location.hash == "#autoreload") {
                reloading = setTimeout("window.location.reload();", 5000);
                $('#reloadCB').bootstrapToggle('on');
            }
        }

        function toggleAutoRefresh(checked) {
            if (checked) {
                window.location.replace("#autoreload");
                reloading = setTimeout("window.location.reload();", 5000);
            } else {
                window.location.replace("#");
                clearTimeout(reloading);
            }
        }
        $(function () {
            $('#reloadCB').change(function () {
                console.log('toggle fired' + $(this).prop('checked'));
                toggleAutoRefresh($(this).prop('checked'));
            })
        });
        // $("#reloadCB").onSwitchChange(toggleAutoRefresh($("#reloadCB")));
        window.onload = checkReloading;

    </script>
{% endblock %}
{% block content_main %}
    <div id="sec1">
        <div class="text-page container">
            <div class="row">
                <div class="col-md-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <p class="panel-title">
                            <h2>
                                {{ job.service }} job
                                <span class="label label-{{ job.label_class }} pull-right">{{ job.get_status_display }}</span>
                            </h2>
                            <div class="text-right">
                                Auto Refresh
                                <input type="checkbox" data-toggle="toggle" data-size="small" id="reloadCB"></div>
                            </p>
                        </div>
                        <div class="panel-body">
                            {% include "waves/jobs/parts/job_detail.html" with job=job %}
                        </div>
                        <div class="panel-footer text-right">
                            <em>
                                Created on {{ job.created }} <br/>
                                Last update {{ job.updated }}
                            </em>
                        </div>
                    </div>

                </div>
                <div class="col-md-4 panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Job History
                        </div>
                        <div class="panel-body">
                            <div class="panel-group" id="panel-job-{{ job.slug }}">
                                {% for history in job.public_history %}
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <a class="panel-title collapsed" data-toggle="collapse"
                                               data-parent="#panel-job-{{ job.slug }}"
                                               href="#panel-element-{{ history.id }}">{{ history.get_status_display }}
                                                - {{ history.timestamp }}</a>
                                        </div>
                                        {% if history.message %}
                                            <div id="panel-element-{{ history.id }}" class="panel-collapse collapse">
                                                <div class="panel-footer">
                                                    {{ history.message }}
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body text-right">
                            {%  if job.submission %}
                                <a class="btn btn-primary" href="{% url 'wfront:service_details' job.submission.service.id %}">Back to
                                    service</a>
                                {% online_exec_button service=job.submission.service label="New job" %}
                            {% endif %}
                        </div>
                    </div>
                    {% if user.is_staff %}
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title ">
                                    <span class="text-primary">Admin</span>
                                </h3>
                            </div>
                            <div class="panel-body text-right">
                                <a class="btn btn-warning" href="{% url 'admin:wcore_job_change' job.id %}">Job</a>
                                <a class="btn btn-warning" href="{{ job.submission  }}">Service</a>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}