{% extends "base.html" %}
{% load naturaldelta %}
{% load remove_whitespace %}
{% load profiles %}
{% load pathlib %}
{% load workstations %}
{% load static %}
{% load url %}
{% load meta_attr %}

{% block title %}
    Algorithm Result - {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a
                href="{% url 'algorithms:list' %}">Algorithms</a>
        </li>
        <li class="breadcrumb-item"><a
                href="{{ object.algorithm_image.algorithm.get_absolute_url }}">{{ object.algorithm_image.algorithm.title }}
        </a></li>
        <li class="breadcrumb-item"><a
                href="{% url 'algorithms:job-list' slug=object.algorithm_image.algorithm.slug %}">Results</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ object.pk }}</li>
    </ol>
{% endblock %}

{% block sidebar %}
    <div class="col-12 col-md-4 col-lg-3 mb-3">
        <div class="nav nav-pills flex-column" id="v-pills-tab" role="tablist"
             aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-info-tab" data-toggle="pill"
               href="#v-pills-info" role="tab" aria-controls="v-pills-info"
               aria-selected="true"><i
                    class="fas fa-info fa-fw"></i>&nbsp;Information
            </a>

            {% if "change_job" in job_perms %}
                <a class="nav-link" id="v-pills-viewers-tab" data-toggle="pill"
                   href="#v-pills-viewers" role="tab" aria-controls="v-pulls-viewers"
                   aria-selected="false"><i class="fas fa-users fa-fw"></i>&nbsp;Viewers
                </a>
            {% endif %}

            {% if "view_logs" in job_perms %}
                <a class="nav-link" id="v-pills-logs-tab" data-toggle="pill"
                   href="#v-pills-logs" role="tab" aria-controls="v-pills-logs"
                   aria-selected="false"><i class="fas fa-terminal fa-fw"></i>&nbsp;Logs
                </a>
            {% endif %}

            {% if object.status == object.SUCCESS and perms.reader_studies.add_readerstudy %}
                <a class="nav-link"
                   href="{% url "algorithms:display-set-from-job-create" slug=object.algorithm_image.algorithm.slug pk=object.pk %}">
                    <i class="fas fa-edit fa-fw"></i>&nbsp;Edit in Reader Study
                </a>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-info" role="tabpanel"
             aria-labelledby="v-pills-info-tab">
            <h2>Algorithm Result</h2>

            {{ object.rendered_result_text }}
            <br>
            {% if json %}
                <table class="table table-borderless table-hover table-sm">
                    <thead class="thead-light">
                        <tr>
                            <th>Metric</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for object in json %}
                            <tr>
                                <td>{{ object.interface.title }}</td>
                                {% if object.interface.kind == 'STR' %}
                                    <td>{{ object.value|slice:"1:-1" }} </td>
                                {% else %}
                                    <td>{{ object.value }}</td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

            {% for chart in charts %}
                <h3 class="mt-3">{{ chart.interface.title }}</h3>
                <div class="w-100 vega-lite-chart">
                    {{ chart.value|json_script:chart.pk }}
                </div>
            {% endfor %}

            {% for thumbnail in thumbnails %}
                <h3 class="mt-3">{{ thumbnail.interface.title }}</h3>
                <div class="row">
                    <img class="m-3" height="400"
                         src="{{ thumbnail.file.url }}"
                         alt="{{ thumbnail.file.name }}" loading="lazy">
                </div>
            {% endfor %}

            {% for file in files %}
                <h3 class="mt-3">{{ file.interface.title }}</h3>
                <div><a class="btn btn-primary mb-3"
                   href="{{ file.file.url }}">
                        <i class="fa fa-download"></i>&nbsp;Download {{ file.interface.kind }}
                </a></div>
            {% endfor %}

            {% if object.status == object.SUCCESS %}
                <button class="btn btn-primary my-3"
                        {% workstation_session_control_data workstation=object.algorithm_image.algorithm.workstation context_object=object algorithm_job=object config=object.algorithm_image.algorithm.workstation_config %}
                >
                    <i class="fa fa-eye"></i> Open Result in Viewer
                </button>
            {% endif %}

            <h3>Result Reference Data</h3>
            <dl class="row">
                <dt class="col-sm-3">Result ID</dt>
                <dd class="col-sm-9">{{ object.pk }}</dd>

                <dt class="col-sm-3">Algorithm</dt>
                <dd class="col-sm-9"><a
                        href="{{ object.algorithm_image.algorithm.get_absolute_url }}">{{ object.algorithm_image.algorithm }}</a>
                </dd>

                <dt class="col-sm-3">Algorithm Version</dt>
                <dd class="col-sm-9">{{ object.algorithm_image.pk }}</dd>

                <dt class="col-sm-3">Creator</dt>
                <dd class="col-sm-9">{{ object.creator|user_profile_link }}</dd>

                <dt class="col-sm-3">Created</dt>
                <dd class="col-sm-9">{{ object.created }}</dd>

                <dt class="col-sm-3">Status</dt>
                <dd class="col-sm-9">
                    <span class="badge badge-{{ object.status_context }}">
                        {% if object.animate %}
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        {% endif %}
                        {{ object.get_status_display }}{% if object.status == object.SUCCESS and object.stderr %},
                            with warnings{% endif %}
                    </span>
                </dd>

                {% if object.error_message %}
                    <dt class="col-sm-3">Error Message</dt>
                    <dd class="col-sm-9">{{ object.error_message }}</dd>
                {% endif %}

                {% if object.duration %}
                    <dt class="col-sm-3">Duration</dt>
                    <dd class="col-sm-9">{{ object.duration|naturaldelta }}</dd>
                {% endif %}

                {% if object.comment %}
                    <dt class="col-sm-3">Comment</dt>
                    <dd class="col-sm-9">{{ object.comment }}</dd>
                {% endif %}

                <dt class="col-sm-3">Visibility</dt>
                <dd class="col-sm-9">
                    {% if object.public %}
                        <i class="fa fa-eye text-success"></i> Result and images are public
                    {% else %}
                        {% if object.viewers.user_set.all|length > 1 %}
                            {# TODO: Hack, we need to exclude the creator rather than checking the length is > 1 #}
                            <i class="fa fa-eye text-warning"></i>
                            Result and images are visible by {{ object.viewers.user_set.all|oxford_comma }}
                        {% else %}
                            <i class="fa fa-eye-slash text-danger"></i> Result and images are private
                        {% endif %}
                    {% endif %}
                </dd>

                <dt class="col-sm-3">Inputs</dt>
                <dd class="col-sm-9">
                    <ul class="list-unstyled mb-0">
                        {% for input in object.inputs.all %}
                            {% for file in input.image.files.all %}
                                <li>
                                    <a class="badge badge-primary"
                                       href="{{ file.file.url }}">
                                        <i class="fa fa-download"></i>
                                        Input {{ forloop.parentloop.counter }} {{ input.image.name|stem }}
                                        ({{ file.file|suffix }})
                                    </a>
                                </li>
                            {% endfor %}
                            {% if input.file %}
                                <li>
                                    <a class="badge badge-primary"
                                       href="{{ input.file.url }}" download="{{ input.file.name|name }}">
                                        <i class="fa fa-download"></i>
                                        Input {{ forloop.parentloop.counter }} {{ input.file.name|stem }}
                                        ({{ input.file|suffix }})
                                    </a>
                                </li>
                            {% endif %}
                            {% if input.value is not None %}
                                <li>
                                    {{ input.interface.slug }}: {{ input.value|truncatechars_html:1000 }}
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </dd>

                {% if object.status == object.SUCCESS %}
                    <dt class="col-sm-3">Outputs</dt>
                    <dd class="col-sm-9">
                        <ul class="list-unstyled mb-0">
                            {% for output in object.outputs.all %}
                                {% if output.value is not None %}
                                    <li>
                                        <a href="#resultInfoModal"
                                           data-toggle="modal"
                                           data-target="#resultInfoModal"
                                           data-title="Result Info"
                                           data-output="{{ output.value }}"
                                           data-pk="{{ object.pk }}"
                                           class="badge badge-primary">
                                            <i class="fa fa-download"></i>
                                            {{ output.interface.title }}
                                        </a>
                                    </li>
                                {% elif output.file %}
                                    <li>
                                        <a class="badge badge-primary"
                                           href="{{ output.file.url }}">
                                            <i class="fa fa-download"></i> {{ output.interface.title }}
                                        </a>
                                    </li>
                                {% elif output.image %}
                                    {% for file in output.image.files.all %}
                                        <li>
                                            <a class="badge badge-primary" href="{{ file.file.url }}">
                                                <i class="fa fa-download"></i>
                                                {{ output.interface.title }}{% if forloop.first and forloop.last %}{%else %} ({{forloop.counter }}){% endif %}
                                            </a>
                                        </li>
                                    {% endfor %}
                                {% endif %}
                            {% empty %}
                                <li>
                                    <i class="fa fa-eye-slash text-warning"></i> No output images were found
                                </li>
                            {% endfor %}
                        </ul>
                    </dd>
                {% endif %}
            </dl>

            {% if "change_job" in job_perms %}
                <a class="btn btn-primary"
                   href="{% url 'algorithms:job-update' slug=object.algorithm_image.algorithm.slug pk=object.pk %}">
                    <i class="fa fa-edit"></i> Edit this Result
                </a>
            {% endif %}
        </div>

        {% if "change_job" in job_perms %}
            <div class="tab-pane fade" id="v-pills-viewers" role="tabpanel"
                 aria-labelledby="v-pills-viewers-tab">
                <h2>Viewers</h2>

                <p>
                    Members of the {{ object.viewer_groups.all|oxford_comma }} groups are able to view this result.
                </p>

                {% if object.viewers in object.viewer_groups.all %}

                    <p>
                        The following users are members of this results viewers group:
                    </p>

                    <ul class="list-group list-group-flush mb-3">
                        {% for user in object.viewers.user_set.all %}
                            <li class="list-group-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>{{ user|user_profile_link }}</div>
                                    <div>
                                        {% if user != request.user %}
                                            <form action="{% url 'algorithms:job-viewers-update' slug=object.algorithm_image.algorithm.slug pk=object.pk %}"
                                                  method="POST">
                                                {% for field in viewers_form %}
                                                    {% csrf_token %}
                                                    {% if field.name == "user" %}
                                                        <input type="hidden" name="user" value="{{ user.id }}"/>
                                                    {% else %}
                                                        {{ field }}
                                                    {% endif %}
                                                {% endfor %}
                                                <button type="submit" class="btn btn-danger">Revoke access</button>
                                            </form>
                                        {% endif %}
                                    </div>
                                </div>
                            </li>
                        {% empty %}
                            <li class="list-group-item">There are no users in this results viewers group.</li>
                        {% endfor %}
                    </ul>

                    <a class="btn btn-primary"
                       href="{% url 'algorithms:job-viewers-update' slug=object.algorithm_image.algorithm.slug pk=object.pk %}">
                        <i class="fa fa-user-plus"></i> Add users
                    </a>

                {% endif %}
            </div>
        {% endif %}

        {% if "view_logs" in job_perms %}
            <div class="tab-pane fade" id="v-pills-logs" role="tabpanel"
                 aria-labelledby="v-pills-logs-tab">
                <h2>Logs</h2>

                {% if object.runtime_metrics %}
                    <h3>Runtime Metrics</h3>
                    <div class="w-100 vega-lite-chart">
                        {{ object.runtime_metrics_chart|json_script:"runtimeMetricsData" }}
                    </div>
                {% endif %}

                <h3>Stdout</h3>
                {# @formatter:off #}
                <pre class="console">{% if object.stdout %}{{ object.stdout }}{% else %}No logs found on stdout{% endif %}</pre>
                {# @formatter:on #}

                <h3>Stderr</h3>
                {# @formatter:off #}
                <pre class="console">{% if object.stderr %}{{ object.stderr }}{% else %}No logs found on stderr{% endif %}</pre>
                {# @formatter:on #}

            </div>
        {% endif %}
    </div>

    <div class="modal fade" id="resultInfoModal" tabindex="-1" role="dialog"
         aria-labelledby="resultInfoModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="modal-job-output"></p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    {{ block.super }}

    {% include 'workstations/partials/session-control.html' %}

    <script type="module" src="{% static 'algorithms/js/display_result_text.mjs' %}"></script>

    <script src="{% static 'vendored/vega/vega.min.js' %}"></script>
    <script src="{% static 'vendored/vega-lite/vega-lite.min.js' %}"></script>
    <script src="{% static 'vendored/vega-embed/vega-embed.min.js' %}"></script>
    <script type="module" src="{% static "js/charts/render_charts.mjs" %}"></script>

{% endblock %}