{% extends 'bridge/base.html' %}
{% comment "License" %}
% Copyright (c) 2019 ISP RAS (http://www.ispras.ru)
% Ivannikov Institute for System Programming of the Russian Academy of Sciences
%
% Licensed under the Apache License, Version 2.0 (the "License");
% you may not use this file except in compliance with the License.
% You may obtain a copy of the License at
%
%    http://www.apache.org/licenses/LICENSE-2.0
%
% Unless required by applicable law or agreed to in writing, software
% distributed under the License is distributed on an "AS IS" BASIS,
% WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
% See the License for the specific language governing permissions and
% limitations under the License.
{% endcomment %}

{% load i18n %}

{% load tz %}
{% load static %}
{% load compress %}
{% load tableheader %}

{% block title %}{{ report.component }}{% endblock %}

{% block head_block %}
    {% compress css file report %}
        <link href="{% static 'reports/css/reports.css' %}" rel="stylesheet">
    {% endcompress %}
    {% compress js file report %}
        <script type="application/javascript">
            mxBasePath = "{% static 'bridge/mxgraph' %}";
        </script>
        <script src="{% static 'bridge/mxgraph/js/mxClient.js' %}"></script>
        <script src="{% static 'reports/js/report-graph.js' %}"></script>
        <script src="{% static 'reports/js/reportComponent.js' %}"></script>
    {% endcompress %}
{% endblock %}

{% block body_block %}

<div class="ui grid">
    <div class="six wide column">
        <table class="ui selectable compact inverted violet table attached">
            <tbody>
                <tr id="component_name_tr" data-variation="very wide">
                    <th colspan="2" class="center aligned header">
                        <h3 class="header" style="margin-top: 5px;margin-bottom: 5px;">{{ report.component }}</h3>
                    </th>
                </tr>
            {% if report.decision.operator %}
                <tr>
                    <th class="right aligned">{% trans 'Author' %}</th>
                    <td><a class="violet-link" href="{% url 'users:show-profile' report.decision.operator.id %}">{{ report.decision.operator.get_full_name }}</a></td>
                </tr>
            {% endif %}
                <tr>
                    <th class="right aligned">{% trans 'Decision' %}</th>
                    <td><a class="violet-link" href="{% url 'jobs:decision' report.decision.pk %}">{{ report.decision.name }}</a></td>
                </tr>
                {% if status.name %}
                    <tr>
                        <th class="right aligned">{% trans 'Status' %}</th>
                        <td>
                        {% if status.href %}
                            <a class="violet-link" href="{{ status.href }}">{{ status.name }}</a>
                        {% else %}
                            <span{% if status.color %} style="color: {{ status.color }}"{% endif %}>{{ status.name }}</span>
                        {% endif %}
                        </td>
                    </tr>
                {% endif %}
                <tr id="computer_description_tr" data-variation="very wide">
                    <th class="right aligned">{% trans 'Computer' %}</th>
                    <td>{{ report.computer.display }}</td>
                </tr>
            </tbody>
        </table>

        <br>
        <div class="ui buttons">
            {% if report.log %}
                <button class="ui violet button file-content-activator" data-url="{% url 'reports:log-content' report.pk %}" data-download="{% url 'reports:log' report.pk %}">{% trans 'Log' %}</button>
            {% endif %}
            {% if report.verifier_files %}
                <a href="{% url 'reports:download_files' report.pk %}" class="ui violet button">{% trans 'Download verifier input files' %}</a>
            {% endif %}
        </div>

        {% if SelfAttrsData.values|length %}
            <h4 class="header ui violet">{% trans 'Attributes' %}</h4>
            <div style="overflow-x: auto">
                <table class="ui violet celled table">
                    <thead>{% tableheader SelfAttrsData.columns 0 %}</thead>
                    <tbody>
                    <tr>
                        {% for v, attr_id in SelfAttrsData.values %}
                            <td class="collapsing">
                                {% if attr_id %}
                                    <a class="file-content-activator" href="#" data-url="{% url 'reports:attr-data-content' attr_id %}" data-download="{% url 'reports:attr-data' attr_id %}">{{ v }}</a>
                                {% else %}
                                    <span>{{ v }}</span>
                                {% endif %}
                            </td>
                        {%  endfor %}
                    </tr>
                    </tbody>
                </table>
            </div>
        {% endif %}

        <div id="timeinfo_popup" class="ui popup">
            <div class="header">{{ report.component }}</div>
            <div class="content" style="white-space:nowrap;">
                {% if status.duration != None %}
                    {% if status.duration %}
                        <span class="purple-subtitle">{% trans 'Start date' %}: </span> {{ report.start_date|date:"d.m.y H:i:s" }}
                        <br>
                        <span class="purple-subtitle">{% trans 'Finish date' %}: </span> {{ report.finish_date|date:"d.m.y H:i:s" }}
                        <br>
                        <span class="purple-subtitle">{% trans 'Duration' %}: </span> {{ status.duration }}
                        <br>
                    {% else %}
                        <span class="purple-subtitle">{% trans 'Creation date' %}: </span> {{ report.start_date|date:"d.m.y H:i:s" }}<br>
                    {% endif %}
                {% else %}
                    <span class="purple-subtitle">{% trans 'Start date' %}: </span> {{ report.start_date|date:"d.m.y H:i:s" }}
                    <br>
                {% endif %}
                {% if resources %}
                    <span class="purple-subtitle">{% trans 'Wall time' %}: </span> {{ resources.wall_time }}<br>
                    <span class="purple-subtitle">{% trans 'CPU time' %}: </span> {{ resources.cpu_time }}<br>
                    <span class="purple-subtitle">{% trans 'Maximum memory size' %}: </span> {{ resources.memory }}<br>
                {% endif %}
            </div>
        </div>
        <div id="computer_info_popup" class="ui popup">
            <div class="header">{{ report.computer.display }}</div>
            <div class="content" style="white-space:nowrap;">
                {% for prop in report.computer.data %}
                    <p><span class="purple-subtitle">{{ prop.0 }}: </span>{{ prop.1 }}</p>
                {% endfor %}
            </div>
        </div>

        {% if data.data %}
            <h4 class="header ui violet">{% trans 'Data' %}</h4>
            <div class="ui brown segment">
                <div style="overflow-x: auto;">
                    {% include 'reports/ReportData.html' with data=data.data type=data.type stats=data.stats %}
                </div>
            </div>
        {% endif %}
        {% if Coverage %}
            {% include 'jobs/viewDecision/coverage.html' with Coverage=Coverage %}
        {% elif VerificationCoverage and VerificationCoverage.statistics|length %}
            <div class="ui violet segment">
                <div class="ui top left attached violet label">{% trans 'Code coverage' %}</div>
                {% include 'jobs/viewDecision/coverageTable.html' with statistics=VerificationCoverage.statistics %}
            </div>
        {% endif %}


        {% if images|length %}
            <h3>{% trans 'Report images' %}</h3>
            <table class="ui compact selectable violet table">
                <thead>
                    <tr>
                        <th>{% trans 'Name' %}</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    {% for image in images|sort_list %}
                        <tr>
                            <td>{{ image.title }}</td>
                            <td class="right aligned">
                                <a href="{% url 'reports:download-report-png' image.pk %}" data-tooltip="{% trans 'Download picture' %}"><i class="ui download icon"></i></a>
                                <a href="#" class="load-graph-icon" data-url="{% url 'reports:api-get-report-image' image.pk %}" data-tooltip="{% trans 'Load graph' %}"><i class="ui sitemap icon"></i></a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div class="ui divider"></div>
            <div id="graph_content_div" style="display: none;">
                <h4>
                    <span id="graph_title"></span>
                    <a id="open_fullscreen_graph_btn" href="#" data-tooltip="{% trans 'Fullscreen' %}"><i class="expand arrows alternate icon"></i></a>
                </h4>
                <div id="graph_container" style="overflow:auto; max-height: 85vh; width: 100%; margin: 10px;"></div>
            </div>
        {% endif %}
    </div>

    <div class="ten wide column">
        {% if parents|length %}
            {% include 'reports/parents_breadcrumb.html' with parents=parents %}
        {% endif %}

        <div class="ui teal segment">
            <h3 class="header ui violet italic">{% trans 'Children' %}</h3>
            {% include TableData.view.template with view=TableData.view %}
            {% if TableData.values|length %}
                <div>
                    {% if TableData.page.has_previous %}
                        <i class="ui arrow left blue link icon page-link-icon" data-page-number="{{ TableData.page.previous_page_number }}"></i>
                    {% endif %}
                    <span>{% blocktrans with n1=TableData.page.number n2=TableData.paginator.num_pages %}Page {{ n1 }} of {{ n2 }}{% endblocktrans %}</span>
                    {% if TableData.page.has_next %}
                        <i class="ui arrow right blue link icon page-link-icon" data-page-number="{{ TableData.page.next_page_number }}"></i>
                    {% endif %}
                </div>
                <div style="overflow: auto;max-height: 40vh;">
                    <table class="ui celled compact teal table selectable alternate-color">
                        <thead>{% tableheader TableData.columns TableData.titles %}</thead>
                        <tbody>
                            {% for row in TableData.values %}
                                <tr>
                                    {% for cell_data in row %}
                                        <td class="collapsing">
                                        {% if cell_data.href %}
                                            <a href="{{ cell_data.href }}">{{ cell_data.value }}</a>
                                        {% else %}
                                            <span>{{ cell_data.value }}</span>
                                        {% endif %}
                                        </td>
                                    {% endfor %}
                                </tr>
                            {%  endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <h3 class="italic" style="text-align:center;color: #7b7f8c;">{% trans 'There is no children, please wait for them or change the view' %}</h3>
            {% endif %}
        </div>
        <div class="ui orange segment">
            <h3 class="header ui violet italic">{% trans 'Statistics on component and its children' %}</h3>
            {% include reportdata.view.template with view=reportdata.view %}
            <br>
            {% include 'jobs/DecisionResults.html' %}
        </div>
    </div>
</div>

{% endblock %}