{% extends "wooey/base.html" %}
{% load i18n %}
{% load wooey_tags %}

{% block breadcrumbs %}
    <li><a href="{{ job_info.job.script_version.script.get_url }}">{{ job_info.job.script_version.script.script_name }}</a></li>
    <li><a href="#">{% blocktrans with job_id=job_info.job.id %}Job # {{ job_id }}{% endblocktrans %}</a></li>
{% endblock breadcrumbs %}

{% 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 }}
    #wooey-job-submit {
      float: left;
      margin-left: 3px;
    }
{% endblock extra_style %}
{% block center_content_class %}col-md-12 col-xs-12{% endblock center_content_class %}
{% block center_content %}


<div class="page-header">

    <!-- Nav tabs -->
    <div class="pull-right">

        <div class="btn-toolbar" role="toolbar">

        {% if job_info.archives %}

            <div class="btn-group">
            <a href="{{ job_info.archives.0.url }}" role="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> {% trans "Download" %}
            </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 job_info.archives %}
                    <li><a href="{{ archive.url }}"><span class="glyphicon glyphicon-compressed"></span> {% if archive.url|endswith:"zip" %}.zip{% else %}.tar.gz{% endif %}</a></li>
                {% endfor %}
            </ul>
            </div>

            <div class="btn-group">
            <a href="{{ job_info.archives.0.url }}" role="button" class="btn btn-success">
            {% url 'wooey:celery_results_uuid' job_info.job.uuid as permalink %}
            {% absolute_url permalink as permalink %}
            <span class="glyphicon glyphicon-share" aria-hidden="true"></span> {% trans "Share" %}
            </a>
            <button type="button" class="btn btn-success 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">
                <!-- <li><a href="""><span class="glyphicon glyphicon-figshare"></span> Figshare</a></li> -->
                <li><a href="{{ permalink }}" onclick="$('#modal-permalink').modal(); return false;"><span class="glyphicon glyphicon-link"></span> Permalink</a></li>

                <li><a href="mailto:?subject=Wooey Job #{{ job_info.job.id }} is {{ job_info.job.status }}&body=You can see the result and any outputs at the following link:%0D%0A{{ permalink }}"><span class="glyphicon glyphicon-envelope"></span> Email</a></li>
            </ul>
            </div>


    {% include 'wooey/modals/permalink_modal.html' %}


        {% endif %}
            <form action="{% url 'wooey:celery_task_command' %}" id="wooey-job-submit" method="post">
                {% csrf_token %}
                <input name="job-id" value="{{ job_info.job.pk }}" type="hidden">

                {% if not job_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" %}
                    </button>
                {% else %}
                    <button class="btn btn-primary btn-warning" name="celery-command" value="rerun" type="submit">
                        <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> {% trans "Re-run" %}
                    </button>
                {% endif %}
                <button class="btn btn-warning" name="celery-command" value="resubmit" type="submit">
                    <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> {% trans "Resubmit" %}
                </button>
                <button class="btn btn-primary" name="celery-command" value="clone" type="submit">
                    <span class="glyphicon glyphicon-copy" aria-hidden="true"></span> {% trans "Clone" %}
                </button>

                <button class="btn btn-danger" name="celery-command" value="delete" type="submit">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> {% trans "Delete" %}
                </button>


            </form>

    </div>
    </div>

  <h1>{{ job_info.job.job_name }} <small>{{ job_info.job.job_description }}</small></h1>


  <div class="job-metadata">
      • Priority 1
      • Submitted {{ job_info.job.created_date|timesince }} ago by {{ job_info.job.user }}
      • Updated {{ job_info.last_modified|timesince }} ago



    {% if job_info.job.status == 'completed' %}
    <span class="label label-success"><span class="glyphicon glyphicon-ok"></span> Success</span>
    {% elif job_info.job.status == 'running' %}
    <span class="label label-success"><span class="glyphicon glyphicon-refresh spinning"></span> Executing</span>
    {% elif job_info.job.status == 'pending' %}
    <span class="label label-default"><span class="glyphicon time"></span> Queued</span>
    {% elif job_info.job.status == 'revoked' %}
    <span class="label label-danger"><span class="glyphicon glyphicon-stop"></span> Halted</span>
    {% elif job_info.job.status == 'submitted' %}
    <span class="label label-default"><span class="glyphicon glyphicon-hourglass"></span> Waiting</span>
    {% endif %}

  </div>
</div>




{% if job_error %}
    <h1 class="text-center">{{ job_error }}</h1>
{% else %}
    {% include "wooey/modals/resubmit_modal.html" %}

    <div class="row">

        {% for output_group, output_files in job_info.file_groups.items %}
                {% for output_file_content in output_files %}
                    {%if output_group %}{% include 'wooey/preview/'|concat:output_group|concat:'.html' %}{% endif %}
                {% endfor %}
        {% endfor %}


        <!-- Output command and stderr, stdout in console-style view -->
        <div class="col-sm-12 col-md-12">
          <div class="thumbnail panel panel-{% if job_info.job.stderr %}danger{% else %}default{% endif %}">
                <div class="panel-heading"><span class="glyphicon glyphicon-console"></span> {% trans "Console" %} <a class="icon icon-collapse" data-toggle="collapse" data-target="#collapse-console" href="#collapse-console"></a></div>

                <div id="collapse-console" class="panel-collapse collapse in">
                <div class="panel-body console">
                  <pre class="console-body console-command">{{ job_info.job.command }}</pre>
                  {% if job_info.job.stdout %}
                  <pre class="console-body console-stdout">{{ job_info.job.stdout|linebreaks }}</pre>
                  {% endif  %}
                  {% if job_info.job.stderr %}
                  <pre class="console-body console-stderr">{{ job_info.job.stderr|linebreaks }}</pre>
                  {% endif %}

                </div>
                </div>
            </div>
        </div>


        <!-- List all files -->
        <div class="col-sm-12 col-md-12">
            <div class="thumbnail panel panel-default">
                <div class="panel-heading"> <span class="glyphicon glyphicon-file"></span> {% trans "All Files" %} <a class="icon icon-collapse" data-toggle="collapse" data-target="#collapse-files" href="#collapse-files"></a></div>

                <div id="collapse-files" class="panel-collapse collapse in">
                <div class="panel-body panel-nopad">
                    <table class="table table-striped">
                        <tr>
                            <th>Filename</th>
                            <th>Parameter</th>
                            <th></th>
                            <th></th>
                            <th style="text-align:center;">Size</th>
                        </tr>
                        {% for file in job_info.all_files %}
                            <tr>
                            <th>
                                {% if file.filetype == 'images' %}<span class="glyphicon glyphicon-picture"></span>
                                {% elif file.filetype == 'fasta' %}<span class="glyphicon glyphicon-list-alt"></span>
                                {% elif file.filetype == 'tabular' %}<span class="glyphicon glyphicon-list-alt"></span>
                                {% else %}<span class="glyphicon glyphicon-file"></span>{% endif %}

                                <a href="{{ file.url }}">{{ file.basename }}</a>
                            </th>
                            <td>{% if file.slug %}{{ file.slug }}{% endif %}</td>
                            <td></td>
                            <td></td>
                            <td>{% if file.size_bytes %}{{ file.size_bytes|filesizeformat|numericalign }}{% endif %}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                </div>
            </div>
        </div>


</div>

{% endif %}
{% endblock center_content %}

{% block inline_js %}
{{ block.super }}
<script  type="text/javascript">

    $(document).ready(function(){
        $('#wooey-job-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-job-url').attr('href', data.extra.job_url);
                            $('#modal-resubmit').modal();
                        }
                    }
                    else{
                        clearErrors($form.parent());
                        processErrors($form.parent(), data.errors);
                    }
                }
            });
            return true;
        });

    });
</script>
{% endblock %}
