{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load url %}
{% load profiles %}
{% load bleach %}
{% load humanize %}
{% load remove_whitespace %}
{% load naturaldelta %}
{% load static %}
{% load string %}

{% block title %}
    {{ object.title }} - {{ block.super }}
{% endblock %}

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

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

            {% if "change_algorithm" in algorithm_perms %}
                <a class="nav-link" id="v-pills-containers-tab" data-toggle="pill"
                   href="#containers" role="tab"
                   aria-controls="v-pills-containers"
                   aria-selected="false">
                    {# @formatter:off #}
                    <i class="fab fa-docker fa-fw"></i>&nbsp;Containers{% if not object.active_image %}&nbsp;
                    <i class="fas fa-exclamation-triangle text-danger"></i>{% endif %}
                    {# @formatter:on #}
                </a>
                <a class="nav-link" id="v-pills-editors-tab" data-toggle="pill"
                   href="#editors" role="tab" aria-controls="v-pills-editors"
                   aria-selected="false"><i class="fas fa-user fa-fw"></i>&nbsp;Editors
                </a>
                <a class="nav-link" id="v-pills-users-tab" data-toggle="pill"
                   href="#users" role="tab" aria-controls="v-pills-users"
                   aria-selected="false"><i class="fas fa-users fa-fw"></i>&nbsp;Users
                </a>
                <a class="nav-link"
                   href="{% url 'algorithms:permission-request-list' slug=object.slug %}"
                ><i class="fas fa-question fa-fw"></i>&nbsp;Requests&nbsp;<span
                        class="badge badge-pill badge-secondary align-middle">{{ pending_permission_requests }}</span>
                </a>
            {% endif %}

            {% if "execute_algorithm" in algorithm_perms and object.active_image %}
                <a class="nav-link"
                   href="{% url 'algorithms:job-create' slug=object.slug %}">
                    <i class="fas fa-file-import fa-fw"></i>&nbsp;Try-out Algorithm
                </a>
            {% endif %}


            <a class="nav-link"
               href="{% url 'algorithms:job-list' slug=object.slug %}">
                <i class="fas fa-file-export fa-fw"></i>&nbsp;Results
            </a>

            {% if "execute_algorithm" not in algorithm_perms %}
                <a class="nav-link"
                   href="{% url 'algorithms:permission-request-create' slug=object.slug %}">
                    <i class="fa fa-question fa-fw"></i>&nbsp;Request Access
                </a>
            {% endif %}
        </ul>
    </div>
{% endblock %}

{% block content %}
    {% if 'change_algorithm' in algorithm_perms %}
        {% if object.display_editors == None or not object.contact_email %}
            <div class="alert alert-warning" role="alert">
                Please update your algorithm settings. Grand Challenge now requires a <u>contact email address</u> for all algorithms.<br>
                You will also need to indicate whether you want the algorithm editors to be displayed on the Information page.
            </div>
        {% endif %}

        {% if object.public and not object.summary or object.public and not object.mechanism %}
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle mr-1"></i>Please update your algorithm description and add at least a summary and description of your algorithm's mechanism
                <a href="{% url 'algorithms:description-update' slug=object.slug %}">here</a>.
            </div>
        {% endif %}

        {% if object.public and not object.public_test_case %}
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle mr-1"></i> Please upload a public test case for your latest algorithm image <a href="{% url 'algorithms:job-create' slug=object.slug %}">here</a>.
            </div>
        {% endif %}
    {% endif %}

    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show" id="information" role="tabpanel"
             aria-labelledby="v-pills-information-tab">

            <div class="row col-12 m-0 p-0">
                <h2 class="col-9 p-0">{{ object.title }}</h2>
                {% if 'change_algorithm' in algorithm_perms %}
                    <span class="col-3 p-0 text-right my-auto">
                        <a class="btn btn-primary btn-block"
                           href="{% url 'algorithms:update' slug=object.slug %}">
                            <i class="fa fa-cog"></i> Update Settings
                        </a>
                        <a class="btn btn-primary btn-block"
                           href="{% url 'algorithms:description-update' slug=object.slug %}">
                            <i class="fa fa-edit"></i> Update Description
                        </a>
                        {% if not object.public %}
                            <a class="btn btn-primary btn-block"
                               href="#publishAlgorithmModal"
                               data-toggle="modal"
                               data-target="#publishAlgorithmModal">
                                <i class="fa fa-star"></i> Publish Algorithm
                            </a>
                        {% endif %}
                    </span>
                {% endif %}
            </div>
            <hr>
            {% if object.logo %}
                <img class="w-50" loading="lazy" src="{{ object.logo.url }}" alt="Logo for {{ object.title }}">
            {% endif %}
            <h3 class="my-3">About</h3>
            {% if object.display_editors %}
                <div class="row mb-2">
                    <div class="col-3 font-weight-bold">Creator{{ object.editors_group.user_set.all|pluralize }}:</div>
                    <div class="col-9">
                        {% for user in object.editors_group.user_set.all %}
                            <p class="m-0">{{ user|user_profile_link }}</p>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            {% if object.contact_email %}
                <div class="row mb-2">
                    <div class="col-3 font-weight-bold">Contact email:</div>
                    <div class="col-9"><a href="mailto:{{ object.contact_email }}">{{ object.contact_email }}</a></div>
                </div>
            {% endif %}
            {% if object.active_image %}
                <div class="row mb-2">
                    <div class="col-3 font-weight-bold">Version:</div>
                    <div class="col-9">{{ object.active_image.pk }}</div>
                </div>
                <div class="row mb-2">
                    <div class="col-3 font-weight-bold">Last updated:</div>
                    <div class="col-9">{{ object.active_image.created }}</div>
                </div>
            {% endif %}
            {% if object.publications.all %}
                <div class="row mb-2">
                    <div class="col-3 font-weight-bold">Associated publication{{ object.publications.all|pluralize }}:
                    </div>
                    <div class="col-9">
                        {% for publication in object.publications.all %}
                            <div class="row px-3">
                                <div class="col-1 px-0 my-auto text-center align-middle"><a class="btn btn-outline-primary p-1 btn-sm btn-block" href="{{ publication.identifier.url }}" target="_blank"
                                   title="{{ publication.title }}">
                                    <i class="fa fa-link"></i>
                                </a></div>
                                <div class="col-11 mb-2">{{ publication.citation|clean }}</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            <div class="row mb-2">
                <div class="col-3 font-weight-bold">Inputs:</div>
                <div class="col-9">
                    <ul class="pl-3 pb-0 mb-0">
                        {% for input in object.inputs.all %}
                            <li>{{ input.title }}&nbsp;{% if input.description %}
                                <span class="text-muted"> ({{ input.description }})</span>{% endif %}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="row mb-2">
                <div class="col-3 font-weight-bold">Outputs:</div>
                <div class="col-9">
                    <ul class="pl-3 pb-0 mb-0">
                        {% for output in object.outputs.all %}
                            <li>{{ output.title }}&nbsp;{% if output.description %}
                                <span class="text-muted"> ({{ output.description }})</span>{% endif %}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <h3>Model Facts</h3>

            <h4 class="mt-5 mb-3">Summary</h4>
            {% if object.summary %}
                {{ object.summary|md2html }}
            {% elif object.detail_page_markdown %}
                {{ object.detail_page_markdown|md2html }}
            {% else %}
                <div class="alert alert-warning" role="alert">Left empty by the Algorithm Editors</div>
            {% endif %}

            <h4 class="mt-5 mb-3">Mechanism</h4>
            {% if object.mechanism %}
                {{ object.mechanism|md2html }}
            {% else %}
                <div class="alert alert-warning" role="alert">Left empty by the Algorithm Editors</div>
            {% endif %}

            <h4 class="mt-5 mb-3">Validation and Performance</h4>
            {% if object.validation_and_performance %}
                {{ object.validation_and_performance|md2html }}
            {% else %}
                <div class="alert alert-warning" role="alert">Left empty by the Algorithm Editors</div>
            {% endif %}

            <h4 class="mt-5 mb-3">Uses and Directions</h4>
            {% if object.uses_and_directions %}
                {{ object.uses_and_directions|md2html }}
            {% else %}
                <div class="alert alert-warning" role="alert">Left empty by the Algorithm Editors</div>
            {% endif %}

            <h4 class="mt-5 mb-3">Warnings</h4>
            {% if object.warnings %}
                {{ object.warnings|md2html }}
            {% else %}
                <div class="alert alert-warning" role="alert">Left empty by the Algorithm Editors</div>
            {% endif %}

            <h4 class="mt-5 mb-3">Common Error Messages</h4>
            {% if object.common_error_messages %}
                {{ object.common_error_messages|md2html }}
            {% else %}
                <div class="alert alert-warning" role="alert">Left empty by the Algorithm Editors</div>
            {% endif %}

            <p>
                Information on this algorithm has been provided by the Algorithm Editors,
                following the Model Facts labels guidelines from
                Sendak, M.P., Gao, M., Brajer, N. et al.
                Presenting machine learning model information to clinical end users with model facts labels.
                npj Digit. Med. 3, 41 (2020). <a href="https://doi.org/10.1038/s41746-020-0253-3">10.1038/s41746-020-0253-3</a>
            </p>

            {% if "change_algorithm" in algorithm_perms %}
                <hr>
                <h3>Admin Info</h3>
                <p>
                    {% if algorithm.public %}
                        This algorithm is <b>visible to the public</b>,
                        {% if algorithm.access_request_handling != 'ACCEPT_ALL' %}
                            however, users will need to request access, which you
                            will need to approve
                                {% if algorithm.access_request_handling == 'ACCEPT_VERIFIED_USERS' %}
                                    (unless they are verified)
                                {% endif %}
                            before they can run this algorithm.
                        {% else %}
                            and users' access requests will be granted automatically.
                        {% endif %}
                    {% else %}
                        Only users that you add to the users group will be
                        able to run this algorithm.
                    {% endif %}
                    This algorithm uses
                    <a href="{{ object.workstation.get_absolute_url }}">
                        {{ object.workstation.title }}</a>
                    {% if object.workstation_config %}
                        with configuration
                        <a href="{{ object.workstation_config.get_absolute_url }}">
                            {{ object.workstation_config.title }}</a>.
                    {% else %}
                        with its default configuration.
                    {% endif %}
                </p>
                {% if object.average_duration %}
                    <p>
                        On average, successful jobs for this algorithm have
                        taken {{ object.average_duration|naturaldelta }}.
                    </p>
                {% endif %}
                {% if object.editor_notes %}
                    <h4>Notes</h4>
                    {{ object.editor_notes|md2html }}
                {% endif %}
                {% if object.usage_statistics %}
                    <h4>Algorithm Usage</h4>
                    <div class="w-100 vega-lite-chart">
                        {{ object.usage_chart.chart|json_script:"usage" }}
                    </div>
                    <h5>Total Jobs</h5>
                    <dl class="inline">
                        {% for job_status, job_count in object.usage_chart.totals.items %}
                            <dt>{{ job_status }}</dt>
                            <dd>{{ job_count }}</dd>
                        {% endfor %}
                    </dl>
                    <h5>Top Users</h5>
                    <ol>
                        {% for user in object.user_statistics %}
                            <li>{{ user|user_profile_link }}: {{ user.job_count }} job{{ user.job_count|pluralize }}</li>
                        {% endfor %}
                    </ol>
                {% endif %}
                <p>
                    <a class="btn btn-primary"
                       href="{% url 'algorithms:update' slug=object.slug %}">
                        <i class="fa fa-cog"></i> Update Settings
                    </a>
                    <a class="btn btn-primary"
                       href="{% url 'algorithms:description-update' slug=object.slug %}">
                        <i class="fa fa-edit"></i> Update Description
                    </a>
                </p>
            {% endif %}
        </div>

        {% if "change_algorithm" in algorithm_perms %}
            <div class="tab-pane fade" id="editors" role="tabpanel"
                 aria-labelledby="v-pills-editors-tab">

                <h2>Editors</h2>
                <p>
                    The following users are able to edit, use this algorithm and
                    see all of the results:
                </p>

                {% url 'algorithms:editors-update' slug=object.slug as edit_url %}
                {% include "groups/partials/user_list.html" with edit_url=edit_url form=editor_remove_form users=object.editors_group.user_set.all %}

                <p>
                    <a class="btn btn-primary"
                       href="{% url 'algorithms:editors-update' slug=object.slug %}">
                        <i class="fa fa-plus"></i> Add Editors
                    </a>
                </p>
            </div>

            <div class="tab-pane fade" id="users" role="tabpanel"
                 aria-labelledby="v-pills-editors-tab">

                <h2>Users</h2>
                <p>The following users are able to use this algorithm:</p>

                {% url 'algorithms:users-update' slug=object.slug as edit_url %}
                {% include "groups/partials/user_list.html" with edit_url=edit_url form=form users=object.users_group.user_set.all %}

                <p>
                    <a class="btn btn-primary"
                       href="{% url 'algorithms:users-update' slug=object.slug %}">
                        <i class="fa fa-plus"></i> Add Users
                    </a>
                </p>
            </div>

            <div class="tab-pane fade" id="requests" role="tabpanel"
                 aria-labelledby="v-pills-requests-tab">

                <h2>Permission Requests</h2>

                <p>
                    <a href="">Click
                        here</a> to manage the permission requests for this algorithm.
                    {% if pending_permission_requests %}
                        <b>{{ pending_permission_requests }} pending
                            request{{ pending_permission_requests|pluralize }}.</b>
                    {% endif %}
                </p>

            </div>

            <div class="tab-pane fade" id="containers" role="tabpanel"
                 aria-labelledby="v-pills-containers">

                <h2>Container Images</h2>

                {% if not object.active_image %}
                    <p>
                        You need to link your algorithm to a GitHub repo and create a new tag,
                        or upload a valid algorithm container image.
                    </p>
                {% endif %}

                {% if object.repo_name %}
                    <p>
                        New container images will be automatically built when
                        <a href="https://github.com/{{ object.repo_name }}">https://github.com/{{ object.repo_name }}</a>
                        is tagged.
                        However, if you wish, you can still upload container images here.
                    </p>
                {% endif %}

                <p>
                    {% if object.repo_name %}
                        <a class="btn btn-primary"
                           href={% url "algorithms:repository-update" slug=object.slug %}>
                           <i class="fa fa-code-branch"></i> Update Linked Repo
                        </a>
                    {% else %}
                        <a class="btn btn-success"
                           href={% url "algorithms:repository-update" slug=object.slug %}>
                            <i class="fa fa-code-branch"></i> Link GitHub Repo
                        </a>
                    {% endif %}
                    <a class="btn btn-primary"
                       href="{% url 'algorithms:image-create' slug=object.slug %}">
                        <i class="fa fa-upload"></i> Upload a Container
                    </a>
                </p>

                <p>To re-activate a previously uploaded container image, click on the info button next to it and then on "Make active image for algorithm". </p>

                <ul class="list-unstyled">
                    {% for image in object.algorithm_container_images.all %}
                        <li>
                            <a class="btn btn-primary btn-sm"
                               href="{{ image.get_absolute_url }}">
                                <i class="fas fa-info-circle"></i>
                            </a>

                            {% if image.build %}
                                <a class="btn btn-sm btn-{{ image.build.status_context }}"
                                    href="{{ image.get_absolute_url }}">
                                    {% if image.build.animate %}
                                        <span class="spinner-border spinner-border-sm" role="status"
                                              aria-hidden="true"></span>
                                    {% endif %}
                                    Build {{ image.build.get_status_display }}
                                </a>
                                Container image from
                                <a href="{{ image.build.webhook_message.tag_url }}">{{ image.build.webhook_message.repo_name }}:{{ image.build.webhook_message.tag }}</a>
                            {% else %}
                                Container image uploaded by {{ image.creator }} {{ image.created|naturaltime }} {% if image.comment %}({{ image.comment }}) {% endif %}
                            {% endif %}

                            <span class="badge badge-{{ image.import_status_context }}">
                                {% if image.animate %}
                                    <span class="spinner-border spinner-border-sm" role="status"
                                          aria-hidden="true"></span>
                                {% endif %}
                                Import {{ image.get_import_status_display }}
                            </span>

                            {% if image.can_execute and image == object.active_image %}
                                <span class="badge badge-success">
                                    Active
                                </span>
                            {% else %}
                                <span class="badge badge-danger">
                                    Inactive
                                </span>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    </div>

    {#  modal  #}
    <div class="modal" id="publishAlgorithmModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Make this algorithm public</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>Making an algorithm public means that it will be publicly listed on the <a href="{% url 'algorithms:list' %}">algorithm overview page</a>. Everyone will be able to see your algorithm description and the public results linked to your algorithm.</p>
                    <p>However, users will <b>still need to request access to your algorithm</b> to try it out themselves, unless you have your access request handling set to "accept all users".</p>
                    <p>To publish your algorithm you need:</p>
                    <ul class="list-unstyled">
                        <li>{% if object.public_test_case %}<i class="fas fa-check-circle text-success mr-1"></i>{% else %}<i class="fas fa-exclamation-circle text-danger mr-1"></i>{% endif %}at least 1 public test case with a successful result based on the latest version of the algorithm</li>
                        <li>{% if object.summary %}<i class="fas fa-check-circle text-success mr-1"></i>{% else %}<i class="fas fa-exclamation-circle text-danger mr-1"></i>{% endif %}a summary of your algorithm</li>
                        <li>{% if object.mechanism %}<i class="fas fa-check-circle text-success mr-1"></i>{% else %}<i class="fas fa-exclamation-circle text-danger mr-1"></i>{% endif %}a description of the mechanism behind your algorithm</li>
                        <li>{% if object.contact_email %}<i class="fas fa-check-circle text-success mr-1"></i>{% else %}<i class="fas fa-exclamation-circle text-danger mr-1"></i>{% endif %}a contact email address (add in settings)</li>
                        <li>{% if object.display_editors %}<i class="fas fa-check-circle text-success mr-1"></i>{% else %}<i class="fas fa-exclamation-circle text-danger mr-1"></i>{% endif %}a publicly visible list of the editors of the algorithm (enable in settings)</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <div class="col-12 d-flex justify-content-center">
                        <a type="button" class="btn btn-sm btn-secondary mr-1" href="{% url 'algorithms:update' slug=object.slug %}">Update Settings</a>
                        <a type="button" class="btn btn-sm btn-secondary mr-1" href="{% url 'algorithms:description-update' slug=object.slug %}">Update Description</a>
                        <a type="button" class="btn btn-sm btn-secondary" href="{% url 'algorithms:job-create' slug=object.slug %}">Add Test Case</a>
                    </div>
                    <div class="col-12 d-flex justify-content-center">
                        <a type="button" class="btn btn-sm btn-primary {% if not object.mechanism or not object.summary or not object.public_test_case or not object.contact_email or not object.display_editors %}disabled{% endif %}" hx-post="{% url 'algorithms:publish' slug=object.slug %}" hx-vals='{"public": true}'>Publish algorithm</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    {{ block.super }}
    <script src="{% static "js/refresh_sidebar.js" %}"></script>
    {{ csrf_token|to_string|json_script:"csrfToken" }}
    <script type="module" src="{% static 'js/htmx_config_csrf.mjs' %}"></script>

    {% if object.usage_statistics and "change_algorithm" in algorithm_perms %}
        <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>
    {% endif %}
{% endblock %}