{% extends 'qcg/details_base.html' %}
{% load qcg_utils staticfiles %}

{% block extra_js %}
    {% include 'filex/source.js.html' %}
    {{ block.super }}

    <script>
        var filex = filex || {};

        $(function () {
            'use strict';

            $('.working-dir').on('click', function() {
                filex.load($(this).data('url'));
            });

            $('#gridftp').one('show.bs.modal', function() {
                $(this).find('.modal-body').css('height', window.innerHeight - 120 + 'px');
            });
        });
    </script>
{% endblock extra_js %}

{% block container %}
    <ol class="breadcrumb">
        <li><a href="{% url 'jobs' %}">Zadania</a></li>
        <li><a href="{{ job.get_absolute_url }}">{{ job.job_id }}</a></li>
        <li class="active">{{ task.task_id }}</li>
    </ol>

    <div class="pull-right">
        {% if not task.terminated %}
            <form action="{% url 'task_cancel' job.job_id task.task_id %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-default">Anuluj zadanie</button>
            </form>
        {% elif not task.purged %}
            <form action="{% url 'task_clean' job.job_id task.task_id %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-default">Usuń katalog roboczy</button>
            </form>
        {% endif %}
    </div>

    <h1 class="page-header">{% block title %}Task {{ task.task_id }}{% endblock %}</h1>

    <div role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" style="margin-bottom: 20px">
            <li role="presentation" class="active"><a href="#details" data-toggle="tab">Właściwości</a></li>
            <li role="presentation"><a href="#desc" data-toggle="tab">Opis</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="details">
                <h3>Atrybuty</h3>

                <p>
                    {% display_attribute 'Status' task.get_status_display %}
                    {% display_attribute 'Opis statusu' task.status_description %}
                    {% display_attribute 'Typ' task.get_type_display %}
                    {% display_attribute 'Notatka' task.note %}
                    {% display_attribute 'Projekt' task.project %}
                    {% display_attribute 'Czas życia proxy' task.proxy_lifetime|timeuntil %}
                    {% display_attribute 'Data zlecenia' task.submission_time %}
                    {% display_attribute 'Data rozpoczęcia' task.start_time %}
                    {% display_attribute 'Data zakończenia' task.finish_time %}
                    {% display_attribute 'Usunięty katalog roboczy?' task.purged %}
                </p>

                <h3>Alokacje</h3>

                {% if task.allocations.exists %}
                    <ul class="list-group">
                        {% for alloc in task.allocations.all %}
                            <li class="list-group-item">
                                {% display_attribute 'Status' alloc.get_status_display %}
                                {% display_attribute 'Komentarz' alloc.comment %}
                                {% display_attribute 'Host' alloc.host_name %}
                                {% display_attribute 'Opis statusu' alloc.status_description %}
                                {% display_attribute 'Liczba procesów' alloc.processes_count %}
                                {% display_attribute 'Liczba rdzeni' alloc.slots_count %}
                                {% display_attribute 'Identyfikator grupy procesów' alloc.processes_group_id %}
                                {% display_attribute 'Data zlecenia' task.submission_time %}
                                {% display_attribute 'Przewidywana data rozpoczęcia' alloc.estimated_start_time %}
                                {% display_attribute 'Data zakończenia' task.finish_time %}
                                {% display_attribute 'Lokalna data zlecenia' task.local_submission_time %}
                                {% display_attribute 'Lokalna data rozpoczęcia' task.local_start_time %}
                                {% display_attribute 'Lokalna data zakończenia' task.local_finish_time %}
                                {% display_attribute 'Efektywność' alloc.efficiency %}
                                {% display_attribute 'Użycie pamięci' alloc.memory_usage %}
                                {% display_attribute 'Katalog roboczy' alloc.working_directory %}
                                {% display_attribute 'Usunięty katalog roboczy?' task.purged %}

                                {% if alloc.working_directory and not task.purged %}
                                    <button class="btn btn-default working-dir"
                                            data-toggle="modal" data-target="#gridftp" data-url="{{ alloc.working_directory|cut:'gsiftp://'  }}">
                                        Przeglądaj katalog roboczy
                                    </button>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <div class="alert alert-info">Brak elementów</div>
                {% endif %}

            </div>

            <div role="tabpanel" class="tab-pane" id="desc">
                {% include 'qcg/job_description.html' %}
            </div>
        </div>
    </div>

    <div id="gridftp" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modal-label">Katalog roboczy</h4>
                </div>
                <div class="modal-body">
                    {% include 'filex/source.html' %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}