{% extends 'oef/base.html' %}
{% block content %}
    <h2>Subspecialties</h2>

    This page shows the questions that are currently displayed in maxims.  The questions are grouped by subspecialty. Examinations that use the same questions are grouped together.

    <details>
        <summary>Sections</summary>
        <ul>
            {% for subspecialty, formats in format_map %}
            <li>
                <a href="#heading-{{subspecialty}}">{{subspecialty}}</a>
            </li>
            {% endfor %}
        </ul>
    </details>
    
    {% for subspecialty, formats in format_map %}
    <h4 id="heading-{{subspecialty}}">{{subspecialty}}</h4>
    
    <ul>
    {% for format in formats %}
    <li>
    <h5>Name: {{format}}</h5>
                    {% if format.specialties.all.count > 1 %}
                    <span class="subs">Also in (subspecialty): {% for sub in format.specialties.all %}
                        {% if sub != subspecialty %}
                    {{sub}},
                    {% endif %}
                        
                    {% endfor %}
                    </span>{% endif %}
                    <br/>
    <form>
                    <input type="hidden" name="question" value="{{ format.format }}">
                    <button
                        hx-post="{% url 'oef:entries_by_question' %}"
                        hx-target="next .result"
                        _="on click toggle @disabled until htmx:afterOnLoad then remove me"
                    class="btn btn-small view-exams">View exams</button>
    </form>
                    <span class="result"></span>
                    
                        
    <br/>
    <pre>{{format.format}}</pre>
    </li>


        
    {% endfor %}
    </ul>
        
    <hr>
        
    {% endfor %}
        



{% endblock content %}


{% block css %}
    <style>
        li.question {
            border: 1px solid white;
        }
        .format-name {
            color: blue;
            float: right;
        }
        .specialties {
            color: green;
        }
        .view-exams {
            float: right;
        }
        .result {
            float: right;
            border: 1px white dashed;
        }
        h5, h4{
            content: "";
            clear: both;
            display: table;
        }
        .subs {
            color: darkgreen;
            size: 0.8em;
            float: right;
            opacity: 0.5;

        }
        .subs:hover {
            opacity: 1;
        }
    </style>

{% endblock css %}