{% extends "base.html" %}
{% load static %}
{% load url %}
{% load profiles %}
{% load workstations %}
{% load guardian_tags %}
{% load bleach %}
{% load meta_attr %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'reader-studies:list' %}">Reader
            Studies</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ object }}
        </li>
    </ol>
{% endblock %}

{% block sidebar %}
    {% get_obj_perms request.user for object as "readerstudy_perms" %}
    <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_readerstudy" in readerstudy_perms %}
                <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-readers-tab" data-toggle="pill"
                   href="#readers" role="tab" aria-controls="v-pills-readers"
                   aria-selected="false"><i class="fas fa-users fa-fw"></i>&nbsp;Readers&nbsp;<span
                        class="badge badge-pill badge-secondary align-middle">{{ num_readers }}</span>
                </a>
                <a class="nav-link"
                   href="{% url 'reader-studies:users-progress' slug=object.slug %}"
                ><i class="fas fa-tasks fa-fw"></i>&nbsp;Users Progress
                </a>
                <a class="nav-link"
                   href="{% url 'reader-studies: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>
                <a class="nav-link" id="v-pills-cases-tab" data-toggle="pill"
                   href="#cases" role="tab" aria-controls="v-pills-cases"
                   aria-selected="false"><i class="fas fa-image fa-fw"></i>&nbsp;Cases&nbsp;
                   <span class="badge badge-pill badge-secondary align-middle">
                      {{ object.display_sets.count }}
                   </span>
                </a>
                <a class="nav-link" id="v-pills-questions-tab" data-toggle="pill"
                   href="#questions" role="tab"
                   aria-controls="v-pills-questions"
                   aria-selected="false"><i class="fas fa-question fa-fw"></i>&nbsp;Questions&nbsp;<span
                        class="badge badge-pill badge-secondary align-middle">{{ object.questions.all.count }}</span>
                </a>
                <a class="nav-link" id="v-pills-ground-truth-tab" data-toggle="pill"
                   href="#ground-truth" role="tab"
                   aria-controls="v-pills-ground-truth"
                   aria-selected="false"><i class="fas fa-check fa-fw"></i>&nbsp;Ground
                    Truth
                </a>
                <a class="nav-link"
                   href="{% url 'reader-studies:leaderboard' slug=object.slug %}"><i
                        class="fas fa-trophy fa-fw"></i>&nbsp;Leaderboard
                </a>
                <a class="nav-link"
                   href="{% url 'reader-studies:statistics' slug=object.slug %}"><i
                        class="fas fa-chart-bar fa-fw"></i>&nbsp;Statistics
                </a>
                <a class="nav-link" id="v-pills-export-tab" data-toggle="pill"
                   href="#export" role="tab" aria-controls="v-pills-export"
                   aria-selected="false"><i class="fas fa-download fa-fw"></i>&nbsp;Export
                </a>
                {% if perms.reader_studies.add_readerstudy %}
                    <a class="nav-link" id="v-pills-copy-tab" data-toggle="pill"
                       href="#copy" role="tab" aria-controls="v-pills-copy"
                       aria-selected="false"><i class="fas fa-copy fa-fw"></i>&nbsp;Copy
                    </a>
                {% endif %}
            {% endif %}

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

{% block content %}
    {% get_obj_perms request.user for object as "readerstudy_perms" %}

    <div class="tab-content" id="v-pills-tabContent">

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

            <h2>{{ object.title }}</h2>

            {{ object.help_text_markdown|md2html }}

            {% if user_score.score__sum is not None and progress.hangings == 100.0 %}
                <div class="alert alert-info" role="alert">
                    You have completed this reader study. You have
                    scored {{ user_score.score__sum|floatformat }} points
                    out of a possible {{ answerable_questions|floatformat }} points,
                    giving you an average score
                    of {{ user_score.score__avg|floatformat:4 }}.
                </div>
            {% endif %}

            {% if "read_readerstudy" in readerstudy_perms %}
                <p>
                    <button class="btn btn-primary"
                        {% workstation_session_control_data workstation=object.workstation context_object=object reader_study=object %}
                    >
                        <i class="fas fa-eye"></i> Launch this Reader Study
                    </button>
                </p>
            {% endif %}

            {% if "change_readerstudy" in readerstudy_perms %}
                <hr>
                <h3>Admin Info</h3>
                <p>
                    This reader study
                    {% if object.public %}
                        <b>is visible to the public,</b>
                            {% if object.access_request_handling != 'ACCEPT_ALL' %}
                            however, users will need to request access, which you
                            will need to approve
                                {% if object.access_request_handling == 'ACCEPT_VERIFIED_USERS' %}
                                    (unless they are verified)
                                {% endif %}
                            before they can participate in this reader study.
                        {% else %}
                            and users' access requests will be granted automatically.
                        {% endif %}
                        It
                    {% endif %}
                    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 %}


                    There {{ object.display_sets.count|pluralize:'is, are' }} {{ object.display_sets.count }} case{{ object.display_sets.count|pluralize }}.

                    {% if object.shuffle_hanging_list %}
                        Each reader will read the cases in a unique order.
                    {% else %}
                        Each reader will read the cases in the same order.
                    {% endif %}
                </p>
                <p>
                    <a class="btn btn-primary"
                       href="{% url 'reader-studies:update' slug=object.slug %}">
                        <i class="fas fa-cog"></i> Update Settings
                    </a>
                </p>
            {% endif %}

        </div>



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

                <h2>Editors</h2>
                <p class="mt-3">
                    <a class="btn btn-primary"
                       href="{% url 'reader-studies:editors-update' slug=object.slug %}">
                        <i class="fas fa-plus"></i> Add Editors
                    </a>
                </p>

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

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

                <h2>Cases</h2>

                <p>
                    There {{ object.display_sets.count|pluralize:'is, are' }} {{ object.display_sets.count }}
                    case{{ object.display_sets.count|pluralize }} in this
                    reader study.
                </p>

                <p class="mt-3">
                    <a class="btn btn-primary"
                       href="{% url 'reader-studies:display-sets-create' slug=object.slug %}">
                        <i class="fas fa-plus"></i> Add Cases (batch)
                    </a>
                     <a class="btn btn-outline-primary"
                       href="{% url 'reader-studies:display-set-create' slug=object.slug %}"
                        ><i class="fas fa-plus"></i> Add Case (single)
                    </a>
                    <a class="btn btn-primary ml-1"
                       href="{% url 'reader-studies:display_sets' slug=object.slug %}">
                        <i class="fas fa-eye mr-1"></i> View / Delete Cases
                    </a>

                </p>
            </div>

            <div class="tab-pane fade"
                 id="questions"
                 role="tabpanel"
                 aria-labelledby="v-pills-questions-tab">
                <h2>Questions</h2>

                <ul class="list-group list-group-flush">
                    {% for question in object.questions.all %}
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col justify-content-start">
                                    <div>
                                        {{ question }}
                                    </div>
                                </div>
                                <div class="col-md-auto justify-content-end">
                                    <a class="btn btn-primary btn-sm"
                                       href="{% url 'reader-studies:question-update' slug=object.slug pk=question.pk %}">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    {% if question.is_fully_editable %}
                                        <a class="btn btn-danger btn-sm"
                                           href="{% url 'reader-studies:question-delete' slug=object.slug pk=question.pk %}">
                                            <i class="fa fa-trash-alt"></i>
                                        </a>
                                    {% else %}
                                        <button type="button" class="btn btn-danger btn-sm"
                                                title="This question cannot be deleted. It already has answers associated with it."
                                                disabled>
                                            <i class="fa fa-trash-alt"></i>
                                        </button>
                                    {% endif %}
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>

                <p class="mt-3">
                    <a class="btn btn-primary"
                       href="{% url 'reader-studies:add-question' slug=object.slug %}">
                        <i class="fas fa-plus"></i> Add a Question
                    </a>
                </p>
            </div>

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

                <h2> Readers </h2>
                <p class="mt-3">
                    <a class="btn btn-primary"
                       href="{% url 'reader-studies:readers-update' slug=object.slug %}">
                        <i class="fas fa-plus"></i> Add Readers
                    </a>
                </p>

                {% url 'reader-studies:readers-update' slug=object.slug as readers_update_url %}
                {% include "groups/partials/user_list.html" with role_name="readers" edit_url=readers_update_url form=editor_remove_form users=readers %}
            </div>

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

                <h2>Ground Truth</h2>

                <p>
                    If you wish to assess the performance of the readers you
                    can upload the CSV file containing the ground truth for
                    this reader study here.
                </p>
                <p>
                    The first row of the CSV file must contain the headings
                    <code>case</code>, followed by the question text for
                    each of the questions in the reader study (excluding those
                    of type <code>heading</code>).
                </p>
                <p>
                    The consecutive lines contain the id per case.
                    Then include the answer for the question
                    corresponding to the question text defined in the header for that
                    column. All answers must be enclosed in single quotes. Strings
                    must be enclosed in both single and double quotes, i.e.
                    <code>'"answer"'</code>. For choice type questions, the
                    options text(s) must be provided as a string. For optional
                    questions, use <code>null</code> if you do not widh to
                    provide ground truth for that question.
                </p>
                <p>
                    An example of the first two lines of the csv for this reader study is:
                    <code>
                        {{ example_ground_truth|linebreaks }}
                    </code>
                </p>
                <div class="d-flex justify-content-between">
                    <div>
                        <a class="btn btn-primary"
                           href="{% url 'reader-studies:add-ground-truth' slug=object.slug %}">
                            <i class="fas fa-upload"></i> Upload Ground Truth
                        </a>
                        <a class="btn btn-secondary"
                           href="{% url 'reader-studies:example-ground-truth' slug=object.slug %}">
                            <i class="fas fa-download"></i> Download Example CSV
                        </a>
                    </div>
                    <button class="btn btn-danger" hx-post="{% url 'reader-studies:ground-truth-remove' slug=object.slug %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}" }'>
                        <i class="fas fa-trash-alt"></i> Delete ground truth
                    </button>
                </div>

            </div>

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

                <h2>Export</h2>

                <p>
                    You can access this reader study and integrate its data into
                    other applications via the live
                    <a href="{% url 'api:reader-study-detail' pk=object.pk %}">REST API</a>,
                    alternatively, you can download the current data in CSV format:
                </p>

                <p>
                    <a class="btn btn-primary"
                       href="{% url 'api:reader-study-detail' pk=object.pk %}?format=csv"
                       download="reader_study_{{ object.slug }}_{{ now }}.csv">
                        <i class="fas fa-file-csv"></i> Reader Study
                    </a>
                </p>

                <p>
                    <a class="btn btn-primary"
                       href="{% url 'api:reader-studies-question-list' %}?format=csv&reader_study={{ object.pk }}&limit={{ limit }}"
                       download="reader_study_{{ object.slug }}_questions_{{ now }}.csv">
                        <i class="fas fa-file-csv"></i> Questions
                    </a>
                </p>

                {% for offset in image_offsets %}
                    <p>
                        <a class="btn btn-primary"
                           href="{% url 'api:image-list' %}?format=csv&reader_study={{ object.pk }}&offset={{ offset }}&limit={{ limit }}"
                           download="reader_study_{{ object.slug }}_images_{{ offset|add:1 }}_{{ offset|add:limit }}_{{ now }}.csv">
                            <i class="fas fa-file-csv"></i> Images ({{ offset|add:1 }} to {{ offset|add:limit }})
                        </a>
                    </p>
                {% endfor %}

                {% for offset in answer_offsets %}
                    <p>
                        <a class="btn btn-primary"
                           href="{% url 'api:reader-studies-answer-list' %}?format=csv&question__reader_study={{ object.pk }}&offset={{ offset }}&limit={{ limit }}"
                           download="reader_study_{{ object.slug }}_answers_{{ offset|add:1 }}_{{ offset|add:limit }}_{{ now }}.csv">
                            <i class="fas fa-file-csv"></i> Answers ({{ offset|add:1 }} to {{ offset|add:limit }})
                        </a>
                    </p>
                {% endfor %}

                {% for offset in display_set_offsets %}
                    <p>
                        <a class="btn btn-primary"
                           href="{% url 'api:reader-studies-display-set-list' %}?format=csv&reader_study={{ object.pk }}&offset={{ offset }}&limit={{ limit }}"
                           download="reader_study_{{ object.slug }}_display_sets_{{ offset|add:1 }}_{{ offset|add:limit }}_{{ now }}.csv">
                            <i class="fas fa-file-csv"></i> Display sets ({{ offset|add:1 }} to {{ offset|add:limit }})
                        </a>
                    </p>
                {% endfor %}

            </div>

            {% if perms.reader_studies.add_readerstudy %}
                <div class="tab-pane fade"
                     id="copy"
                     role="tabpanel"
                     aria-labelledby="v-pills-copy-tab">

                    <h2>Copy</h2>

                    <p>
                        You can copy this reader study, optionally including all images,
                        questions, case texts and the hanging list.
                    </p>
                    <p class="mt-3">
                        <a class="btn btn-primary"
                           href="{% url 'reader-studies:copy' slug=object.slug %}">
                            <i class="fas fa-copy"></i> Copy this reader study
                        </a>
                    </p>
                </div>
            {% endif %}
        {% endif %}
    </div>

{% endblock %}

{% block script %}
    {{ block.super }}
    <script src="{% static "js/refresh_sidebar.js" %}"></script>
    {% include 'workstations/partials/session-control.html' %}
{% endblock %}