{{!
    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/app

    The Thinkera app frame: top bar, the page, and a tab bar on phones. No drawers, blocks or breadcrumbs.

    Example context (json):
    {
        "output": {"doctype": "<!DOCTYPE html>", "page_title": "Home", "main_content": "<p>Content</p>"},
        "bodyattributes": "", "sitename": "Thinkera", "homeurl": "#", "brandurl": "https://thinkera.academy", "logourl": "", "loggedin": true,
        "user": {"fullname": "Hana Ali", "firstname": "Hana", "email": "hana@example.com", "avatar": "", "profileurl": "#", "prefsurl": "#", "logouturl": "#"},
        "nav": [{"key": "home", "label": "Home", "url": "#", "active": true, "ishome": true}],
        "title": "Profile", "back": {"url": "#", "label": "Back"}, "year": "2026"
    }
}}
{{> theme_boost/head }}

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

    {{{ output.standard_top_of_body_html }}}

    <header class="tk-appbar">
        <div class="tk-appbar-inner">
            <a class="tk-appbar-brand" href="{{brandurl}}">
                <img src="{{logourl}}" alt="{{sitename}}" width="132" height="34">
            </a>
            {{#loggedin}}
            <nav class="tk-appbar-nav" aria-label="{{#str}}mainnav, theme_thinkera{{/str}}">
                <ul>
                    {{#nav}}
                    <li><a href="{{url}}" class="{{#active}}is-active{{/active}}" {{#active}}aria-current="page"{{/active}}>{{label}}</a></li>
                    {{/nav}}
                </ul>
            </nav>
            <div class="tk-appbar-tools">
                <div class="tk-appbar-plugins">{{{ navbarplugins }}}</div>
                <div class="dropdown tk-usermenu">
                    <button class="tk-avatar-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false"
                            aria-label="{{#str}}accountmenu, theme_thinkera{{/str}}">
                        {{#user.hasphoto}}<img src="{{user.avatar}}" alt="" width="40" height="40">{{/user.hasphoto}}{{^user.hasphoto}}<span class="tk-initial" aria-hidden="true">{{user.initial}}</span>{{/user.hasphoto}}
                    </button>
                    <div class="dropdown-menu dropdown-menu-end tk-usermenu-panel">
                        <div class="tk-usermenu-head">
                            {{#user.hasphoto}}<img src="{{user.avatar}}" alt="" width="48" height="48">{{/user.hasphoto}}{{^user.hasphoto}}<span class="tk-initial" aria-hidden="true">{{user.initial}}</span>{{/user.hasphoto}}
                            <div><strong>{{user.fullname}}</strong><span dir="ltr">{{user.email}}</span></div>
                        </div>
                        <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}}
                        <a class="dropdown-item tk-usermenu-out" href="{{user.logouturl}}">{{#str}}menu_logout, theme_thinkera{{/str}}</a>
                    </div>
                </div>
            </div>
            {{/loggedin}}
            {{^loggedin}}
            <div class="tk-appbar-tools">
                <a class="tk-btn tk-btn-quiet" href="{{catalogueurl}}">{{#str}}nav_courses, theme_thinkera{{/str}}</a>
                <a class="tk-btn tk-btn-ghost" href="{{loginurl}}">{{#str}}login, theme_thinkera{{/str}}</a>
                <a class="tk-btn tk-btn-primary" href="{{signupurl}}">{{#str}}signup, theme_thinkera{{/str}}</a>
            </div>
            {{/loggedin}}
        </div>
    </header>

    <div id="page" data-region="mainpage" class="tk-page">
        <div id="page-content" class="tk-page-content{{#isformat}} is-format{{/isformat}}">
            <div id="region-main" class="tk-region-main">
                {{^isformat}}
                    {{#back}}<a class="tk-back" href="{{url}}"><span aria-hidden="true" class="tk-back-arrow"></span>{{label}}</a>{{/back}}
                    {{#title}}<h1 class="tk-page-title">{{title}}</h1>{{/title}}
                {{/isformat}}
                {{{ output.course_content_header }}}
                {{#quiznav}}<div class="tk-quiznav">{{{ quiznav }}}</div>{{/quiznav}}
                {{#headercontent}}
                    <div class="tk-activity-header">{{> core/activity_header }}</div>
                {{/headercontent}}
                {{{ output.main_content }}}
                {{{ output.course_content_footer }}}
            </div>
        </div>

        <footer class="tk-footer">
            <img src="{{logourl}}" alt="" width="96" height="24">
            {{! Both ways of reaching the academy, side by side and centred. They used to be an either/or —
                WhatsApp when a number was set, the email only when it was not — so whichever was configured
                hid the other, and a student who would rather write than message never learned the address
                existed. }}
            {{#hascontact}}
            <p class="tk-footer-contact">{{#str}}contact_lead, theme_thinkera{{/str}}</p>
            <div class="tk-contact">
                {{#whatsapp}}
                <a class="tk-wa" href="{{href}}" target="_blank" rel="noopener">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 1.83c2.16 0 4.19.84 5.72 2.37a8.03 8.03 0 0 1 2.37 5.72c0 4.46-3.63 8.08-8.09 8.08a8.06 8.06 0 0 1-4.11-1.13l-.29-.17-3.05.8.81-2.98-.19-.31a8.02 8.02 0 0 1-1.23-4.29c0-4.46 3.63-8.09 8.06-8.09Zm-2.5 4.3c-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1s.9 2.44 1.03 2.6c.13.17 1.76 2.68 4.27 3.76.6.26 1.06.41 1.42.53.6.19 1.14.16 1.57.1.48-.07 1.48-.6 1.69-1.19.21-.58.21-1.08.15-1.19-.06-.1-.23-.17-.48-.29-.25-.13-1.48-.73-1.71-.81-.23-.09-.4-.13-.56.12-.17.25-.64.81-.79.98-.15.17-.29.19-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.51.11-.11.25-.29.38-.44.12-.15.16-.25.25-.42.08-.17.04-.31-.02-.44-.06-.13-.56-1.36-.77-1.86-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01Z"/></svg>
                    <span dir="ltr">{{label}}</span>
                </a>
                {{/whatsapp}}
                {{#support}}
                <a class="tk-wa tk-mail" href="{{href}}">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="5" width="19" height="14" rx="3"/><path d="m3.2 7.2 8.8 5.6 8.8-5.6"/></svg>
                    <span dir="ltr">{{label}}</span>
                </a>
                {{/support}}
            </div>
            {{/hascontact}}
            {{#guideurl}}<a class="tk-guide" href="{{guideurl}}" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5"/></svg>{{#str}}guide_link, theme_thinkera{{/str}}</a>{{/guideurl}}
            <small>© {{year}} {{#str}}footercredit, theme_thinkera{{/str}}</small>
        </footer>
    </div>

    {{#loggedin}}
    <nav class="tk-tabbar" aria-label="{{#str}}mainnav, theme_thinkera{{/str}}">
        {{#nav}}
        <a href="{{url}}" class="tk-tab{{#active}} is-active{{/active}}" {{#active}}aria-current="page"{{/active}}>
            <span class="tk-tab-icon" aria-hidden="true">
                {{#ishome}}<svg viewBox="0 0 24 24" width="24" height="24"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>{{/ishome}}
                {{#iscourses}}<svg viewBox="0 0 24 24" width="24" height="24"><rect x="3" y="3" width="7.5" height="7.5" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2" fill="none" stroke="currentColor" stroke-width="2"/></svg>{{/iscourses}}
                {{#ispayments}}<svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 3h12v18l-3-2-3 2-3-2-3 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M9 8h6M9 12h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>{{/ispayments}}
                {{#isaccount}}<svg viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M4 21c1.2-4 4.3-6 8-6s6.8 2 8 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>{{/isaccount}}
            </span>
            <span class="tk-tab-label">{{label}}</span>
        </a>
        {{/nav}}
    </nav>
    {{/loggedin}}

    {{{ 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');
});
{{/js}}
