{% extends "djangui_home.html" %}
{% load i18n %}
{% load djangui_tags %}
{% block extra_js %}
    {{ js.super }}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
{% endblock extra_js %}
{% block extra_css %}
    {{ extra_css.super }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.css"/>
{% endblock extra_css %}
{% block extra_style %}
    {{ extra_style.super }}
    #djangui-task-submit {
      float: left;
      margin-left: 3px;
    }
{% endblock extra_style %}
{% block left_sidebar %}{% endblock left_sidebar %}
{% block center_content_class %}col-md-9 col-xs-12{% endblock center_content_class %}
{% block center_content %}
{% include "modals/resubmit_modal.html" %}
<h1 class="text-center">{{ task_info.job.job_name }}</h1>
<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#task-report" aria-controls="task-report" role="tab" data-toggle="tab">{% trans "Job Summary" %}</a></li>
    <li role="presentation"><a href="#task-output" aria-controls="task-output" role="tab" data-toggle="tab">{% trans "Files and Output" %}</a></li>
    <div class="pull-right">
        <div class="btn-group">
        {% if task_info.archives %}

            <a href="{{ task_info.archives.0.url }}" role="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-download" aria-hidden="true"></span> {% trans "Download All" %}
            </a>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                {% for archive in task_info.archives %}
                    <li><a href="{{ archive.url }}">{% if archive.url|endswith:"zip" %}{% trans "As Zip" %}{% else %}{% trans "As tar.gz" %}{% endif %}</a></li>
                {% endfor %}
            </ul>
        {% endif %}
            <form action="{% url 'celery_task_command' %}" id="djangui-task-submit" method="post">
                {% csrf_token %}
                <input name="job-id" value="{{ task_info.job.pk }}" type="hidden">
                {% if not task_info.job.status|complete_job %}
                <button class="btn btn-primary btn-danger" name="celery-command" value="stop" type="submit">
                    <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> {% trans "Stop Job" %}
                </button>
                {% endif %}
                <button class="btn btn-primary" name="celery-command" value="clone" type="submit">
                    <span class="glyphicon glyphicon-copy" aria-hidden="true"></span> {% trans "Clone Job" %}
                </button>
                <button class="btn btn-warning" name="celery-command" value="resubmit" type="submit">
                    <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> {% trans "Resubmit Job" %}
                </button>
                <button class="btn btn-danger" name="celery-command" value="delete" type="submit">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> {% trans "Delete Job" %}
                </button>

            </form>
        </div>
    </div>
  </ul>


  <!-- Tab panes -->
  <div class="tab-content">
<br>
    <div role="tabpanel" class="tab-pane active" id="task-report">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">{% trans "Job Information" %}</h4>
            </div>
            <div class="panel-body">
                <dl class="dl-horizontal">
                  <dt>{% trans "Job Status" %}</dt>
                  <dd>{{ task_info.job.status }}</dd>
                  <dt>{% trans "Job Description" %}</dt>
                  <dd>{{ task_info.job.job_description }}</dd>
                </dl>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">{% trans "Command Sent" %}</h4>
            </div>
            <div class="panel-body">
                <code>{{ task_info.job.command }}</code>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{% trans "Job Output" %}</h3>
            </div>
            <div class="panel-body">
                <code>{{ task_info.job.stdout|linebreaks }}</code>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{% trans "Job Errors" %}</h3>
            </div>
            <div class="panel-body">
                <code>{{ task_info.job.stderr|linebreaks }}</code>
            </div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="task-output">
        <div role="tabpanel">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#task-output-all" aria-controls="task-output-all" role="tab" data-toggle="tab">{% trans "All Files" %}</a></li>
            {% for output_group, output in task_info.file_groups.iteritems %}
                <li role="presentation"><a href="#task-output-{{ output_group }}" aria-controls="task-output-{{ output_group }}" role="tab" data-toggle="tab">{{ output_group|title }}</a></li>
            {% endfor %}
          </ul>

          <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="task-output-all">
                <dl class="dl-horizontal">
                {% for file in task_info.all_files %}
                    <dt>{% if file.slug %}{{ file.slug }}{% endif %}</dt>
                    <dd><a href="{{ file.url }}">{{ file.name }}</a></dd>
                {% endfor %}
                </dl>
            </div>
            {% for output_group, output_files in task_info.file_groups.iteritems %}
                <div role="tabpanel" class="tab-pane" id="task-output-{{ output_group }}">
                    {% if output_group == 'tabular' %}
                        {% for output_file_content in output_files %}
                    <div class="panel panel-default">
                          <!-- Default panel contents -->
                          <div class="panel-heading"><a href="{{ output_file_content.url }}">{{ output_file_content.name }}</a></div>

                          <!-- Table -->
                          <div class="panel-body table-responsive">
                              <table class="table">
                                {% for entry in output_file_content.preview %}
                                    {% if forloop.first %}
                                        <thead>
                                            {% for item in entry %}
                                                <th>{{ item }}</th>
                                            {% endfor %}
                                        </thead>
                                        <tbody>
                                    {% else %}
                                        <tr>
                                        {% for item in entry %}
                                            <td>{{ item }}</td>
                                        {% endfor %}
                                        </tr>
                                    {% endif %}
                                    {% if forloop.last %}
                                        </tbody>
                                    {% endif %}
                                {% endfor %}
                              </table>
                          </div>
                        </div>
                        {% endfor %}

                    {% elif output_group == 'images' %}
                        {% if output_files %}
                        <div id="task-image-output" class="carousel slide">
                          <!-- Indicators -->
                          <ol class="carousel-indicators">
                              {% for output_file_content in output_files %}
                                  {% if forloop.first or forloop.counter0|divisibleby:4 %}
                                    <li data-target="#task-image-output" data-slide-to="{{ forloop.counter|divide:5 }}" {% if forloop.first %}class="active"{% endif %}></li>
                                  {% endif %}
                              {% endfor %}
                          </ol>

                          <!-- Wrapper for slides -->
                          <div class="carousel-inner" role="listbox">
                              {% for output_file_content in output_files %}
                                  {% if forloop.first or forloop.counter0|divisibleby:4 %}
                                      {% if not forloop.first %}
                                          </div></div>
                                      {% endif %}
                                      <div class="item{% if forloop.first %} active{% endif %}">
                                        <div class="row">
                                  {% endif %}
                                    <div class="col-sm-3"><a href="{{ output_file_content.url }}" data-toggle="lightbox" data-gallery="task-images" data-type="image"><img src="{{ output_file_content.url }}" alt="{{ output_file_content.name }}" class="img-responsive"></a></div>
                                  {% if not forloop.empty and forloop.last %}
                                      </div></div>
                                  {% endif %}
                              {% endfor %}
                          </div>

                          <!-- Controls -->
                          <a class="left carousel-control" href="#task-image-output" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#task-image-output" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                          </a>
                        </div>
                        {% endif %}
                    {% elif output_group == 'fasta' %}
                         {% for output_file_content in output_files %}
            <div class="panel panel-default">
                              <div class="panel-heading"><a href="{{ output_file_content.url }}">{{ output_file_content.name }}</a></div>
                              <div class="panel panel-body">
                                    {% for entry in output_file_content.preview %}
                                        {{ entry }}<br>
                                    {% endfor %}
                              </div></div>
                        {% endfor %}
                    {% endif %}
                    </div>
            {% endfor %}
          </div>
        </div>
        </div>
    </div>
</div>
{% endblock center_content %}

{% block inline_js %}
{{ block.super }}
<script>
    $(document).ready(function(){
        $('#djangui-task-submit button').click(function(event){
            event.preventDefault();
            var $form = $(this).closest('form');
            var formData = $form.serializeArray();
            formData.push({'name': 'celery-command', 'value': $(this).attr('value')});
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(data){
                    if (data.valid){
                        if(data.redirect){
                            window.location.replace(data.redirect);
                        }
                        else{
                            // the only way we end here is from a resubmission at the moment
                            $('#new-task-url').attr('href', data.extra.task_url);
                            $('#myModal').modal();
                        }
                    }
                    else{
                        clearErrors($form.parent());
                        processErrors($form.parent(), data.errors);
                    }
                }
            });
            return true;
        });

        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });
    });
</script>
{% endblock %}