{% extends "djangui/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 %}
{% if task_error %}
    <h1 class="text-center">{{ task_error }}</h1>
{% else %}
    {% include "djangui/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.items %}
                    <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.items %}
                    <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>
{% endif %}
{% 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 %}