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

{% block title %}
    Users Progress - {{ block.super }}
{% endblock %}

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

{% block content %}
    <h2>Users Progress for {{ reader_study.title }}</h2>

    <p>
        The following users have answered at least one question in this reader study,
        all other users are yet to answer any of the questions.
    </p>

    <ul class="list-group list-group-flush">
        {% for user in users %}
            <li class="list-group-item mb-1">
                <div class="row">
                    <div class="d-flex col-6 col-md-3 p-1 align-items-center">
                        <div class="text-wrap">
                            {{ user.obj|user_profile_link }}
                        </div>
                    </div>
                    <div class="col-4 col-md-2 p-1">
                        <div class="progress h-100">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ user.progress.questions }}%"
                                 aria-valuenow="{{ user.progress.questions }}"
                                 aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="col-2 col-md-1 p-1">
                        <div class="h-100 d-flex align-items-center">
                            <div>
                                &nbsp;{{ user.progress.questions|floatformat }}%
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 p-1">
                        <div class="d-flex justify-content-md-end justify-content-start align-items-center">
                            <button class="btn btn-primary"
                                    {% workstation_session_control_data workstation=reader_study.workstation context_object=reader_study reader_study=reader_study user=user.obj %}
                            >
                                <i class="fa fa-eye"></i> View User's Answers
                            </button>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 p-1">
                        <div class="d-flex justify-content-md-center justify-content-start align-items-center">
                            <!-- Answer removal is handled by Modal, see below -->
                            <button type="button"
                                    class="btn btn-danger"
                                    data-toggle="modal"
                                    data-target="#warningModal"
                                    data-title="Delete Answers"
                                    data-warning="This will delete all answers for user '{{ user.obj }}'. This action cannot be undone."
                                    data-user="{{ user.obj }}"
                                    data-action="Delete Answers">
                                <i class="fa fa-trash-alt"></i>&nbsp;Delete User's Answers
                            </button>
                        </div>
                    </div>
                </div>
            </li>
        {% empty %}
            <li class="list-group-item">
                No-one has answered any questions in this reader study.
            </li>
        {% endfor %}
    </ul>

    <!-- Modal -->
    <div class="modal fade" id="warningModal" tabindex="-1" role="dialog"
         aria-labelledby="warningModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="warningModalLabel"></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="warning-text"></p>

                    <p><b>Are you sure that you want to continue?</b></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">Cancel
                    </button>
                    <button type="button" class="btn btn-danger"
                            id="proceed" data-baseurl="{{ reader_study.get_absolute_url }}" data-csrf="{{ csrf_token }}">
                        <i class="fa fa-trash"></i> <span class="modal-action"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

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