{% extends 'rcr/base.html' %}

{% block content %}

<h1>Radiology Gap Analysis</h1>

    <details>
        <summary>Filter</summary>
        <form method="get">
            {{ item_filter.form.as_p }}
            <input type="submit" />
        </form>
    </details>


<p>This page lists all of the radiology categories and the items that exist within them. The items are grouped by category. By default only items to keep are shown.</p>
<button _='on click toggle .visible on .id' class="btn btn-small"> Toggle IDs</button>
<button _='on click toggle .visible on .conditions' class="btn btn-small"> Toggle Conditions</button>
{% comment %} <br/>
Show outcomes

{% for outcome in outcomes %}
<span class="outcome-selection">
<label for="{{outcome.name}}">{{outcome.name}}</label><input type="checkbox" name="{{outcome.name}}" value="{{outcome}}" checked
_="on click if me.checked show .outcome-{{outcome.id}} else hide .outcome-{{outcome.id}} end">
</span>
{% endfor %} {% endcomment %}
    

<details>
    <summary>Categories</summary>
    <ul>
        {% for category, items in filtered_categories %}
        <li>
            <a href="#heading-{{category.name}}">{{category.name}}</a> ({{items.count}})
        </li>
        {% endfor %}
    </ul>
</details>


{% for category, items in filtered_categories %}

<h2 id="heading-{{category.name}}">{{category.name}}</h2>

<table>

    <tr>
        <th class="id">ID</th>
        <th>Item</th>
        <th>Content type</th>
        <th>Level</th>
        <th>Outcome</th>
        <th class="conditions">Radiology condition</th>
    </tr>

{% for item in  items %}
    <tr class="outcome-{{item.outcome.id}}">
        <td class="id">{{item.rcr_platform_id}}</td>
        <td><a href='{% url "rcr:radiology_detail_view" item.pk %}' class="item-link"><i class="bi bi-file-earmark"></i></a>{{item.name}}</td>
        <td>{{item.content_type}}</td>
        <td>{{item.get_level}}</td>
        <td>{{item.outcome}}</td>
        <td class="conditions">{{item.get_radiology_condition_line_breaks}}</td>
    </tr>
    
{% endfor %}
</table>

<p>
Item count: {{items.count}}
</p>

<hr>
    
{% endfor %}

{% comment %} {% for condition in conditions %}

<h2>{{condition.name}}</h2>

{{condition.items.all}}
    
{% endfor %} {% endcomment %}
    

{% endblock %}


{% block css %}

    <style type="text/css">
        .review::after {
            content: '(R)';
            color: orange;
        }
        .completed-radiology::after {
            content: '✓';
            color: green;
        }
        .completed-oncology::after {
            content: '✓';
            color: blue;
        }
        .completed-oncology.completed-radiology::after {
            content: '✓';
            color: purple;
        }
        .completed::after {
            content: '✓';
            color: green;
        }
        .Radiology::before {
            content: "R";
        }
        .Radiology {
            color: green;
        }
        .Oncology::before {
            content: "O";
        }
        .Oncology {
            color: blue;
        }
        .Cross-faculty::before {
            content: "C";
        }
        .Cross-faculty {
            color: purple;
        }
        td {
            padding-right: 10px;
        }
        * {
            box-sizing: unset;
        }
        .id, .conditions {
            display: none;
        }
        .visible {
            display: block;
        }
        .outcome-selection {
            display: inline-block;
            margin-right: 10px;
        }
        tr {
            border-bottom: 1px dashed rgba(204, 204, 204, 0.37);
        }
        .item-link {
            color: purple;
            }

    </style>
{% endblock css %}


{% block js %}
<script type="text/hyperscript">
    
</script>
{% endblock js %}