<!DOCTYPE HTML>
{% load static %}
{% load django_htmx %}
{% load crispy_forms_tags %}
{% load auth_extras %}
{% load help_tags %}
<html  data-bs-theme="dark">

    <head>
        <title>
            {% block title %}
                PENRA Courses
            {% endblock %}
        </title>
        <meta name="htmx-config" content='{"selfRequestsOnly": false}' />
    {% comment %} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> {% endcomment %}
        <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

        <link href="{% static 'css/widgets.css' %}" type="text/css" media="all" rel="stylesheet">
        <link rel="stylesheet" href="{% static 'css/dicomViewer.css' %}">
        <link rel="stylesheet" href="{% static 'css/toastr.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/bootstrap-icons.css' %}">

        <link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon/apple-touch-icon.png' %}">
        <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon/favicon-32x32.png' %}">
        <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon/favicon-16x16.png' %}">
        <link rel="manifest" href="{% static 'favicon/site.webmanifest' %}">
        <link rel="mask-icon" href="{% static 'favicon/safari-pinned-tab.svg' %}" color="#5bbad5">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">


        <link href="/static/css/widgets.css" type="text/css" media="all" rel="stylesheet">
        <link href="/static/admin/css/vendor/select2/select2.min.css" type="text/css" media="screen" rel="stylesheet">
        <link href="/static/admin/css/autocomplete.css" type="text/css" media="screen" rel="stylesheet">
        <link href="/static/autocomplete_light/select2.css" type="text/css" media="screen" rel="stylesheet">

        <script src="{% static 'js/crypto-js/core.min.js' %}"></script>
        <script src="{% static 'js/crypto-js/md5.min.js' %}"></script>

    {% comment %} <script src="https://unpkg.com/alpinejs" defer></script> {% endcomment %}
        <script src="{% static 'js/_hyperscript.min.js' %}"></script>
        <script src="{% static 'js/htmx.min.js' %}"></script>
        {% django_htmx_script %}
        <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
        <script src="{% static 'admin/js/core.js' %}"></script>
        <script src="{% static 'admin/js/SelectBox.js' %}"></script>
        <script src="{% static 'admin/js/SelectFilter2.js' %}"></script>
        <script src="{% static 'jsi18n.js' %}"></script>
        <script src="{% static 'admin/js/vendor/select2/select2.full.js' %}"></script>
        <script src="{% static 'autocomplete_light/autocomplete_light.min.js' %}"></script>
        <script src="{% static 'tesseract.min.js' %}"></script>
        <script src="{% static 'autocomplete_light/select2.min.js' %}"></script>
        <script src="{% static 'autocomplete_light/i18n/en.js' %}"></script>
        {% comment %} mathjax {% endcomment %}
        <script src="{% static 'js/tex-mml-chtml.js' %}"></script>
        <script src="{% static 'js/dexie.js' %}"></script>
        <script src="{% static 'js/html5sortable.min.js' %}"></script>
        {% comment %} <script src="{% static 'tesseract.min.js' %}"></script> {% endcomment %}
        <script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script>
        <script src="{% static 'js/toastr.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
        <script src="{% static 'js/sorttable.js' %}"></script>

        <script src="{% static 'js/cornerstone/hammer.js' %}"></script>
        <script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script>
        <script src="{% static 'js/cornerstone/dicomParser.min.js' %}"></script>
        <script src="{% static 'js/cornerstone/cornerstoneMath.min.js' %}"></script>
        <script src="{% static 'js/cornerstone/cornerstoneTools.min.js' %}"></script>
        <script src="{% static 'js/cornerstone/cornerstoneWebImageLoader.min.js' %}"></script>
        <script src="{% static 'js/cornerstone/cornerstoneWADOImageLoader.min.js' %}"></script>
        <script src="{% static 'js/cornerstone/cornerstone-base64-image-loader.umd.js' %}"></script>
        <script src="{% static 'js/anatomy.js' %}" defer="defer" type="module"></script>
        <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer" type="module"></script>

        {% block js %}
        {% endblock %}
        <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
        <link rel="stylesheet" href="{% static 'css/forms.css' %}">
        <style>

            .dropdown-menu {
                background-color: rgb(28, 25, 25)
            }
            .dropdown-item {
                color: lightblue;
            }
            /* Allow the correct-answer badge to wrap if the text is long */
            .correct-badge {
                white-space: normal !important;
                display: inline-block;
                word-break: break-word;
                max-width: 100%;
            }
            /* Reduce horizontal page margins on small screens for better use of space */
            @media (max-width: 1210px) {
                /* Narrow the default container padding */
                .container,
                .container-fluid {
                    padding-left: .5rem !important;
                    padding-right: .5rem !important;
                }

                /* Also tighten the main content wrapper specifically */
                div.content.container {
                    padding-left: .5rem !important;
                    padding-right: .5rem !important;
                    max-width: 100% !important;


                }
            }
            
/* Improve navbar tap targets and mobile dropdown behaviour */
@media (max-width: 991.98px) {
    /* Make navbar links larger and easier to tap */
    .navbar-nav .nav-link {
        padding: .75rem 1rem;
        font-size: 1.05rem;
        min-height: 44px; /* recommended minimum touch target */
        display: block;
        margin: .25rem 0;
        border-radius: .375rem;
        background-color: var(--bs-primary);
        color: #fff !important;
        text-align: center;
        box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
    }

    /* Make links look like outline buttons for secondary links */
    .navbar-nav .nav-link.btn-outline {
        background-color: transparent;
        color: var(--bs-primary) !important;
        border: 1px solid rgba(255,255,255,0.08);
    }

    /* Make dropdown items full-width and larger */
    .navbar-nav .dropdown-menu .dropdown-item {
        padding: .75rem 1rem;
        font-size: 1.05rem;
        background: transparent;
        color: inherit;
        border-radius: .25rem;
        margin: .125rem 0;
    }

    /* When the navbar is collapsed, render dropdown menus as static stacked blocks
         so nested items are easy to tap (prevents absolute-position overlap issues). */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin-top: .25rem;
    }

    /* Ensure dropdown toggles are full-width when collapsed */
    .navbar-collapse .dropdown > .nav-link {
        width: 100%;
        text-align: left;
        display: block;
    }


            html, body {
                /* Slightly increase root font-size so rem-based components scale */
                font-size: 182%;
                line-height: 1.45;
            }

            /* Slightly larger headings for clear hierarchy */
            h1 { font-size: 1.8rem; }
            h2 { font-size: 1.4rem; }
            h3 { font-size: 1.15rem; }

            /* Improve spacing for paragraphs and lists */
            p, li { font-size: 1rem; }

            /* Make form controls and buttons a bit larger for touch */
            .form-control, .btn { font-size: 1rem; padding: .6rem .75rem; }

}

        </style>
        {% block css %}
        {% endblock %}
    </head>


    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
        <nav class="navbar navbar-expand-lg bg-body-tertiary py-0">
            <div class="container-fluid">
                <a class="navbar-brand pt-0" href="/">Home</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"><i class="bi bi-text-indent-right"></i></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto ">
                        {% if request.user.is_authenticated %}
                            <li id="atlas-link" class="nav-item">
                                <a class="nav-link active" href="{% url 'atlas:index' %}">Atlas</a>
                            </li>
                            <li class="nav-item dropdown pt-0">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    FRCR
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item" href="{% url 'rapids:index' %}">Rapids</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{% url 'shorts:index' %}">Shorts</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{% url 'longs:index' %}">Longs</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{% url 'anatomy:index' %}">Anatomy</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{% url 'physics:index' %}">Physics</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{% url 'sbas:index' %}">SBAs</a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="{% url 'generic:examcollection_list' %}">Exam Collection</a>
                                    </li>
                                </ul>
                            </li>
                            {% if request.user|has_group:"cid_user_manager" %}
                                <li id="candidate-link" class="nav-item">
                                    <a class="nav-link active" href="{% url 'people' %}">People</a>
                                </li>
                            {% endif %}
                            <li id="profile-link" class=" nav-item">
                                <a class="nav-link active" href="{% url 'profile' %}">Profile</a>
                            </li>
                        {% endif %}

                        {% if request.user.is_staff %}
                            <li class="nav-item">
                                <a class="nav-link active" href="{% url 'admin:index' %}">Admin</a>
                            </li>
                        {% endif %}
                        {% if request.user.is_authenticated %}
                            <li id="logout-link" class="nav-item">
                                <form  id="logout-form" method="post" action="{% url 'logout' %}">
                                    {% csrf_token %}
                                    <button class="nav-link btn btn-link" type="submit">Log out</button>
                                </form>
                                {% comment %} <a href="{% url 'logout' %}">Logout</a> {% endcomment %}
                            </li>
                        {% endif %}
                    </ul>
{% comment %}       <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form> {% endcomment %}
                </div>
            </div>
        </nav>
        <div class="content container">
            {% block navigation %}
            {% endblock %}
            <div class="row clear-both">
                <div class="col-md-12">
                    <div id="htmx-error"></div>

            <span
            id="cimar-login-needed"
            hx-get='{% url "cimar_status" %}'
            hx-trigger="cimar-login-needed from:body"
            >
        </span>
                    {% block content %}
                    {% endblock %}
                </div>
            </div>
        </div>

        <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
            <div class="col-md-4 d-flex align-items-center">
                <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
                    <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
                </a>
                <span class="text-muted">PenraCourses</span>
            </div>

            <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
                <li class="ms-3"><a class="text-muted" href="{% url 'privacy' %}">Privacy</a></li>
                <li class="ms-3"><a class="text-muted" href="{% url 'cookie_consent_cookie_group_list' %}">Cookies</a></li>
                <li class="ms-3"><a class="text-muted" href="{% url 'about' %}">About</a></li>
            </ul>
        </footer>
        <!-- Close review modal after HTMX reviewSaved trigger -->
        <script>
            document.body.addEventListener('reviewSaved', function () {
                try {
                    var modalEl = document.getElementById('reviewModal');
                    if (!modalEl) return;
                    var modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) {
                        modal.hide();
                    } else {
                        // If no instance exists, create one and hide it
                        var m = new bootstrap.Modal(modalEl);
                        m.hide();
                    }
                } catch (err) {
                    console.error('Error hiding review modal', err);
                }
            });

        </script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Wire up all row-selection control blocks to the nearest .js-row-selectable table.
    function findTableForControl(elem) {
        // Walk up ancestors and look for a table that either has the
        // `js-row-selectable` class or contains a checkbox named 'selection'.
        //var ancestor = elem.closest('div, section, main, article, form, body');
        //while (ancestor) {
        //    // Prefer explicit selectable class
        //    var tbl = ancestor.querySelector && ancestor.querySelector('table.js-row-selectable');
        //    if (tbl) return tbl;
        //    // Otherwise look for any table in this ancestor that contains a
        //    // checkbox input named 'selection' (or any checkbox as a fallback).
        //    var tables = ancestor.querySelectorAll && ancestor.querySelectorAll('table');
        //    if (tables && tables.length) {
        //        for (var i = 0; i < tables.length; i++) {
        //            var t = tables[i];
        //            if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) return t;
        //        }
        //    }
        //    ancestor = ancestor.parentElement;
        //}
        // fallback to any table on the page that looks like it has selection
        var any = document.querySelector('table.js-row-selectable') //|| Array.from(document.querySelectorAll('table')).find(function(t){ return t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]')); });
        return any || null;
    }

    // Helper to build id with optional token
    function suffixed(idBase, token) {
        return token ? idBase + '-' + token : idBase;
    }

    // Ensure every selectable table has a row-selection control block. If the
    // page author didn't render the controls, create them automatically and
    // insert them before the table so the behavior is available out-of-the-box.
    function ensureControlsForTable(table) {
        if (!table) return;
        // detect an existing nearby toggle button
        var existing = table.previousElementSibling && table.previousElementSibling.querySelector && table.previousElementSibling.querySelector('[id^="toggle-row-selection"]');
        if (existing) return; // already present

        // generate a short token for unique IDs
        var token = (Date.now().toString(16) + Math.floor(Math.random()*0xffff).toString(16));

        var wrapper = document.createElement('div');
        wrapper.className = 'row-selection-controls-wrapper';
        wrapper.innerHTML = '<div class="d-flex justify-content-between align-items-center mb-2">'
            + '  <div>'
            + '    <button class="btn btn-outline-secondary btn-sm" id="toggle-row-selection-' + token + '" type="button">Enable row selection</button>'
            + '    <div id="selection-controls-' + token + '" class="btn-group ms-2" role="group" style="display:none;">'
            + '      <button class="btn btn-sm btn-outline-primary" id="select-all-' + token + '">Select all</button>'
            + '      <button class="btn btn-sm btn-outline-secondary" id="clear-selection-' + token + '">Clear</button>'
            + '    </div>'
            + '  </div>'
            + '  <div>'
            + '    <small class="text-muted">Selected: <span id="selected-count-' + token + '">0</span></small>'
            + '  </div>'
            + '</div>';

        // Insert the controls immediately before the table (or its responsive wrapper)
        var container = table.closest('.table-responsive') || table;
        container.parentNode.insertBefore(wrapper, container);
    }

    // Create controls for any table that looks selectable but lacks a control block
    Array.from(document.querySelectorAll('table')).forEach(function(t){
        if (t.querySelector && (t.querySelector('input[name="selection"]') || t.querySelector('input[type="checkbox"]'))) {
            ensureControlsForTable(t);
        }
    });

    // For every toggle button (supports both unsuffixed and suffixed IDs)
    document.querySelectorAll('button[id^="toggle-row-selection"]').forEach(function(toggleBtn) {
        // derive token (empty for unsuffixed)
        var token = '';
        if (toggleBtn.id !== 'toggle-row-selection') token = toggleBtn.id.replace('toggle-row-selection-', '');

        var controlsEl = document.getElementById(suffixed('selection-controls', token));
        var selectAllBtn = document.getElementById(suffixed('select-all', token));
        var clearBtn = document.getElementById(suffixed('clear-selection', token));
        var selectedCountSpan = document.getElementById(suffixed('selected-count', token));

        var table = findTableForControl(toggleBtn);
        if (!table) return; // nothing to do

        var selectionEnabled = false;

        function findRowCheckboxes() {
            if (!table) return [];
            // prefer named selection inputs but fall back to any checkbox
            var checks = Array.from(table.querySelectorAll('input[type="checkbox"][name="selection"]'));
            if (!checks.length) checks = Array.from(table.querySelectorAll('input[type="checkbox"]'));
            return checks;
        }

        function updateSelectedCount() {
            if (!selectedCountSpan) return;
            var checks = findRowCheckboxes();
            var count = checks.filter(function(c){ return c.checked; }).length;
            selectedCountSpan.textContent = count;
            checks.forEach(function(cb){ var tr = cb.closest('tr'); if (tr) tr.classList.toggle('table-active', cb.checked); });
        }

        function setCheckboxesDisabled(disabled) {
            findRowCheckboxes().forEach(function(cb){ cb.disabled = disabled; });
        }

        function hideSelectionColumn() {
            if (!table) return;
            table.querySelectorAll('th, td').forEach(function(cell){ if (cell.querySelector && cell.querySelector('input[type="checkbox"][name="selection"]')) cell.style.display = 'none'; });
        }

        function showSelectionColumn() {
            if (!table) return;
            table.querySelectorAll('th, td').forEach(function(cell){ if (cell.querySelector && cell.querySelector('input[type="checkbox"][name="selection"]')) cell.style.display = ''; });
        }

        // initialise state
        setCheckboxesDisabled(true);
        hideSelectionColumn();

        // row click toggling (attach to table to avoid global handlers)
        table.addEventListener('click', function(e){
            if (!selectionEnabled) return;
            var tag = (e.target.tagName || '').toLowerCase();
            if (['input','a','button','select','textarea','label'].indexOf(tag) !== -1) return;
            var tr = e.target.closest('tr');
            if (!tr || !table.contains(tr)) return;
            var cb = tr.querySelector('input[type="checkbox"][name="selection"]') || tr.querySelector('input[type="checkbox"]');
            if (cb && !cb.disabled) { cb.checked = !cb.checked; tr.classList.toggle('table-active', cb.checked); updateSelectedCount(); }
        }, true);

        // listen for changes within the table to keep counts in sync
        table.addEventListener('change', function(e){ if (e.target && e.target.matches && e.target.matches('input[type="checkbox"]')) updateSelectedCount(); }, true);

        // wire controls
        if (toggleBtn) {
            toggleBtn.addEventListener('click', function() {
                selectionEnabled = !selectionEnabled;
                if (selectionEnabled) {
                    toggleBtn.textContent = 'Disable row selection';
                    if (controlsEl) controlsEl.style.display = '';
                    setCheckboxesDisabled(false);
                    showSelectionColumn();
                } else {
                    toggleBtn.textContent = 'Enable row selection';
                    if (controlsEl) controlsEl.style.display = 'none';
                    setCheckboxesDisabled(true);
                    hideSelectionColumn();
                    findRowCheckboxes().forEach(function(cb){ cb.checked = false; });
                    updateSelectedCount();
                }
            });
        }

        if (selectAllBtn) {
            selectAllBtn.addEventListener('click', function(){ findRowCheckboxes().forEach(function(cb){ if (!cb.disabled) cb.checked = true; }); updateSelectedCount(); });
        }

        if (clearBtn) {
            clearBtn.addEventListener('click', function(){ findRowCheckboxes().forEach(function(cb){ if (!cb.disabled) cb.checked = false; }); updateSelectedCount(); });
        }

        // initial count
        updateSelectedCount();
    });
});
</script>
    </body>



</html>