{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template theme_thinkera/teach

    The instructor's workspace: a sidebar (the workspace, the courses, the current course's tools, the user), a slim
    top bar (the course being worked on, the editing switch, notifications), and the page.

    Example context (json):
    {
        "output": {"doctype": "<!DOCTYPE html>", "page_title": "Dashboard", "main_content": "<p>Content</p>"},
        "bodyattributes": "", "sitename": "Thinkera", "logourl": "", "homeurl": "#", "role": "Instructor",
        "workspace": [{"key": "home", "label": "Home", "url": "#", "active": true, "ishome": true}],
        "courses": [{"id": 2, "name": "Programming", "initial": "P", "url": "#", "active": true,
                     "tools": [{"key": "overview", "label": "Overview", "url": "#", "active": true}]}],
        "hascourses": true, "user": {"fullname": "Reda", "initial": "R", "logouturl": "#"},
        "coursename": "Programming", "courseurl": "#", "year": "2026"
    }
}}
{{> theme_boost/head }}

<body {{{ bodyattributes }}}>
{{> core/local/toast/wrapper}}
<div id="page-wrapper" class="tkt-shell">

    {{{ output.standard_top_of_body_html }}}

    <aside class="tkt-side" id="tkt-side" aria-label="{{#str}}teach_sidebar, theme_thinkera{{/str}}">
        <div class="tkt-side-top">
            <a class="tkt-brand" href="{{homeurl}}">
                <img src="{{logourl}}" alt="{{sitename}}" width="128" height="34">
                <span class="tkt-brand-tag">{{role}}</span>
            </a>
            <button type="button" class="tkt-side-close" data-action="tkt-close" aria-label="{{#str}}teach_closemenu, theme_thinkera{{/str}}">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18"/></svg>
            </button>
        </div>

        <nav class="tkt-nav" aria-label="{{#str}}teach_workspace, theme_thinkera{{/str}}">
            <ul>
                {{#workspace}}
                <li>
                    <a href="{{url}}" class="tkt-nav-link{{#active}} is-active{{/active}}" {{#active}}aria-current="page"{{/active}}>
                        <span class="tkt-nav-icon" aria-hidden="true">
                            {{#ishome}}<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7.5" height="9" rx="2"/><rect x="13.5" y="3" width="7.5" height="5.5" rx="2"/><rect x="13.5" y="11.5" width="7.5" height="9.5" rx="2"/><rect x="3" y="15" width="7.5" height="6" rx="2"/></svg>{{/ishome}}
                            {{#isquestions}}<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12Z"/><path d="M9.8 9.6a2.3 2.3 0 0 1 4.4.8c0 1.5-2.2 2-2.2 3.2"/><path d="M12 16.6h.01"/></svg>{{/isquestions}}
                            {{#islive}}<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="6" width="13" height="12" rx="2.5"/><path d="m15.5 10.5 6-3.5v10l-6-3.5"/></svg>{{/islive}}
                            {{#isrequests}}<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v12H8l-4 4z"/><path d="M8.5 9h7M8.5 12.5h4"/></svg>{{/isrequests}}
                        </span>
                        <span class="tkt-nav-label">{{label}}</span>
                        {{#badge}}<span class="tkt-badge{{#badgelive}} is-live{{/badgelive}}">{{badge}}</span>{{/badge}}
                    </a>
                </li>
                {{/workspace}}
            </ul>
        </nav>

        {{#hascourses}}
        <nav class="tkt-courses-nav" aria-labelledby="tkt-courses-h">
            <h2 class="tkt-side-h" id="tkt-courses-h">{{#str}}teach_mycourses, theme_thinkera{{/str}}</h2>
            <ul>
                {{#courses}}
                <li class="tkt-cnav{{#active}} is-open{{/active}}">
                    <a href="{{url}}" class="tkt-cnav-link{{#active}} is-active{{/active}}">
                        <span class="tkt-cnav-initial" aria-hidden="true">{{initial}}</span>
                        <span class="tkt-cnav-name">{{name}}</span>
                    </a>
                    {{#active}}
                    <ul class="tkt-tools">
                        {{#tools}}
                        <li><a href="{{url}}" class="tkt-tool{{#active}} is-active{{/active}}" {{#active}}aria-current="page"{{/active}}>
                            <span>{{label}}</span>{{#badge}}<span class="tkt-badge">{{badge}}</span>{{/badge}}
                        </a></li>
                        {{/tools}}
                    </ul>
                    {{/active}}
                </li>
                {{/courses}}
            </ul>
        </nav>
        {{/hascourses}}

        <div class="tkt-me dropup">
            <button type="button" class="tkt-me-btn" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{#str}}teach_accountmenu, theme_thinkera{{/str}}">
                {{#user.hasphoto}}<img src="{{user.avatar}}" alt="" width="36" height="36">{{/user.hasphoto}}{{^user.hasphoto}}<span class="tkt-me-initial" aria-hidden="true">{{user.initial}}</span>{{/user.hasphoto}}
                <span class="tkt-me-text"><strong>{{user.fullname}}</strong><span>{{role}}</span></span>
                <svg class="tkt-me-caret" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="m7 14 5-5 5 5"/></svg>
            </button>
            <div class="dropdown-menu tkt-me-menu">
                <a class="dropdown-item" href="{{user.profileurl}}">{{#str}}menu_profile, theme_thinkera{{/str}}</a>
                <a class="dropdown-item" href="{{user.prefsurl}}">{{#str}}menu_prefs, theme_thinkera{{/str}}</a>
                {{#user.passwordurl}}<a class="dropdown-item" href="{{user.passwordurl}}">{{#str}}menu_password, theme_thinkera{{/str}}</a>{{/user.passwordurl}}
                {{#user.studenturl}}<a class="dropdown-item" href="{{user.studenturl}}">{{#str}}teach_asstudent, theme_thinkera{{/str}}</a>{{/user.studenturl}}
                <div class="dropdown-divider"></div>
                <a class="dropdown-item tkt-me-out" href="{{user.logouturl}}">{{#str}}menu_logout, theme_thinkera{{/str}}</a>
            </div>
        </div>
    </aside>
    <div class="tkt-scrim" data-action="tkt-close" aria-hidden="true"></div>

    <div class="tkt-main" id="page" data-region="mainpage">
        <header class="tkt-top">
            <button type="button" class="tkt-menu-btn" data-action="tkt-open" aria-controls="tkt-side" aria-expanded="false"
                    aria-label="{{#str}}teach_openmenu, theme_thinkera{{/str}}">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 7h16M4 12h16M4 17h10"/></svg>
            </button>
            {{#coursename}}
            <a class="tkt-crumb" href="{{courseurl}}">
                <span class="tkt-crumb-label">{{#str}}teach_incourse, theme_thinkera{{/str}}</span>
                <span class="tkt-crumb-name">{{coursename}}</span>
            </a>
            {{/coursename}}
            {{^coursename}}<a class="tkt-top-brand" href="{{homeurl}}"><img src="{{toplogourl}}" alt="{{sitename}}" width="104" height="28"></a>{{/coursename}}
            <div class="tkt-top-tools">
                {{#editswitch}}<div class="tkt-editswitch">{{{ editswitch }}}</div>{{/editswitch}}
                <div class="tkt-plugins">{{{ navbarplugins }}}</div>
            </div>
        </header>

        <div id="topofscroll" class="tkt-canvas">
            <div class="tkt-pagehead">{{{ output.full_header }}}</div>
            {{#secondarymoremenu}}
                <div class="secondary-navigation tkt-tabs d-print-none">
                    {{> core/moremenu}}
                </div>
            {{/secondarymoremenu}}
            <div id="page-content" class="tkt-content">
                <div id="region-main-box">
                    {{#hasregionmainsettingsmenu}}
                    <div id="region-main-settings-menu" class="d-print-none"><div>{{{ regionmainsettingsmenu }}}</div></div>
                    {{/hasregionmainsettingsmenu}}
                    <div id="region-main" class="tkt-region-main">
                        {{#hasregionmainsettingsmenu}}<div class="region_main_settings_menu_proxy"></div>{{/hasregionmainsettingsmenu}}
                        {{{ output.course_content_header }}}
                        {{#headercontent}}{{> core/activity_header }}{{/headercontent}}
                        {{#overflow}}
                        <div class="container-fluid tertiary-navigation">
                            <div class="navitem">{{> core/tertiary_navigation_selector}}</div>
                        </div>
                        {{/overflow}}
                        {{{ output.main_content }}}
                        {{{ output.activity_navigation }}}
                        {{{ output.course_content_footer }}}
                    </div>
                    {{#hasblocks}}
                    <aside class="tkt-blocks d-print-none" aria-label="{{#str}}blocks{{/str}}">
                        {{{ addblockbutton }}}
                        {{{ sidepreblocks }}}
                    </aside>
                    {{/hasblocks}}
                </div>
            </div>
            <footer class="tkt-foot">{{#guideurl}}<a class="tkt-guide" href="{{guideurl}}" target="_blank" rel="noopener">{{#str}}guide_link, theme_thinkera{{/str}}</a><span aria-hidden="true"> · </span>{{/guideurl}}© {{year}} {{#str}}footercredit, theme_thinkera{{/str}}</footer>
        </div>
    </div>

    {{{ output.standard_after_main_region_html }}}
    {{> theme_thinkera/quicklinks }}
    <div class="tk-endofbody">{{{ output.standard_end_of_body_html }}}</div>
</div>

</body>
</html>
{{#js}}
M.util.js_pending('theme_boost/loader');
require(['theme_boost/loader'], function() {
    M.util.js_complete('theme_boost/loader');
});
(function() {
    var body = document.body;
    var opener = document.querySelector('[data-action="tkt-open"]');
    var side = document.getElementById('tkt-side');
    var open = function() {
        body.classList.add('tkt-menu-open');
        opener.setAttribute('aria-expanded', 'true');
        var first = side.querySelector('a, button');
        if (first) {
            first.focus();
        }
    };
    var close = function() {
        if (!body.classList.contains('tkt-menu-open')) {
            return;
        }
        body.classList.remove('tkt-menu-open');
        opener.setAttribute('aria-expanded', 'false');
        opener.focus();
    };
    opener.addEventListener('click', open);
    document.querySelectorAll('[data-action="tkt-close"]').forEach(function(el) {
        el.addEventListener('click', close);
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            close();
        }
    });
})();
{{/js}}
