{% extends "datatables/list_base.html" %}
{% load static %}
{% load url %}

{% 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 }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Cases</li>
    </ol>
{% endblock %}

{% block content %}
    <h1>{{ reader_study.title }} Cases</h1>
    <p>
        <a class="btn btn-primary"
           href="{% url 'reader-studies:display-sets-create' slug=reader_study.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=reader_study.slug %}"
        ><i class="fas fa-plus"></i> Add Case (single)
        </a>
    </p>

    {{ block.super }}


    <div id="readerStudySlug" class="d-none" data-slug="{{ reader_study.slug }}"></div>

    <div class="modal fade" id="removeCaseModal" tabindex="-1" role="dialog"
         aria-labelledby="removeCaseModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="removeCaseModalLabel">Remove
                        case</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>Removing a case cannot be undone.</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="removeCase">
                        <i class="fa fa-trash"></i> Remove
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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

    {% include 'grandchallenge/partials/drf_csrf.html' %}

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

    <script src="{% static 'reader_studies/js/autocomplete_htmx.js' %}" type="text/javascript"></script>

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

    {{ form_media }}

    <link rel="stylesheet" href="{% static 'css/select2-bootstrap4-theme/select2-bootstrap4.css' %}">
{% endblock %}