{% extends 'atlas/exams.html' %}



{% block content %}

    <div>

        {% if previous %}
            <a href="{% url 'atlas:collection_case_questions' collection.id previous.id %}">Previous question</a>
        {% endif %}
        Viewing question as part of collection: <a href="{% url 'atlas:collection_detail' collection.id %}">{{collection.name}}</a> [{{case_number|add:1}}/{{collection_length}}]
        {% if next %}
            <a href="{% url 'atlas:collection_case_questions' collection.id next.id %}">Next question</a>
        {% endif %}
    </div>


    <h2>Case: <a href="{% url 'atlas:case_detail' case_detail.case.pk %}">{{case_detail.case.title}}</a></h2>

    <p>This page allows you to add series from prior cases to a case in a collection. In order to be available here the cases must be linked on the system.</p>
    <p>It is necessary to give a description of how the cases are related that will be displayed to the user when viewing the case.</p>

    <h3>Available priors</h3>

    <ul>
        {% for case, added, relation, visibility in available_priors %}

            <li class='
                       {% if added %}
                           added
                       {% else %}
                           not-added
                       {% endif %}
                      ' data-case={{case.id}}>
                {{case.title}} / {{added}} / {{relation}} / <a href="{% url 'atlas:case_detail' case.id %}">View case</a>
                <br/>{{case.get_series_blocks|safe}}

                <br/>

                {% if not added %}
                    <form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
                          hx-target="#htmx-response-{{case.id}}"
                          _="on htmx:afterRequest log 'test' then remove me">
                        {% csrf_token %}
                        <input type="hidden" name="prior_case_id" value="{{case.id}}" />
                        <input type="text" name="relation" value="{{relation}}" placeholder="relation to case" />
                        <br />
                        <label for="prior_visibility_{{case.id}}">Visibility:</label>
                        <select name="prior_visibility" id="prior_visibility_{{case.id}}">
                            <option value="AL" 
                            {% if visibility == 'AL' %}
                               selected 
                            {% endif %}
                                >Always</option>
                            <option value="RE"
                            {% if visibility == 'RE' %}
                               selected 
                            {% endif %}

                            >Review</option>
                            <option value="NO"
                            {% if visibility == 'NO' %}
                               selected 
                            {% endif %}
                            >None</option>
                        </select>
                        <br />
                        <button class="btn primary">Add to case</button>
                    </form>
                {% else %}
                    <form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
                          hx-target="#htmx-response-{{case.id}}"
                          _="on htmx:afterRequest log 'test' then remove me">
                        Case available: {{relation}}
                        <input type="hidden" name="remove" value="{{case.id}}" />
                        <br />
                        <label for="prior_visibility_{{case.id}}">Visibility:</label>
                        <select name="prior_visibility" id="prior_visibility_{{case.id}}" disabled>
                            <option value="AL" 
                            {% if visibility == 'AL' %}
                               selected 
                            {% endif %}
                                >Always</option>
                            <option value="RE"
                            {% if visibility == 'RE' %}
                               selected 
                            {% endif %}

                            >Review</option>
                            <option value="NO"
                            {% if visibility == 'NO' %}
                               selected 
                            {% endif %}
                            >None</option>
                        </select>
                        <br />
                        <button class="btn primary">Remove from case</button>
                    </form>
                {% endif %}
                <span id="htmx-response-{{case.id}}"></span>

            </li>

        {% endfor %}
    </ul>



{% comment %}     <form method="POST">
        {% csrf_token %}
        {{ form }}
        <button type="submit" value="save" name="submit">Submit</button>
    </form> {% endcomment %}

{% comment %}     <h2>Blank form</h2>
    <form>
        {{ blank_form}}
    </form> {% endcomment %}



{% endblock %}

{% block css %}
    <style>
        .added {
            border: 1px solid green;
        }

        .not-added {
            border: 1px solid white;
        }
    </style>
{% endblock %}

{% block js %}


{% endblock %}