{{!
    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 format_thinkera/course

    The course home as a path: where the student stands (a ring), the one thing to do next (the exact step), a
    session that is running now, and the lessons unit by unit, each lesson's three steps one tap away.
    The files step carries the lesson's own files, opened beside the chip with a click, without leaving the page.

    Example context (json):
    {
        "coursename": "Programming", "percent": 25, "progresslabel": "25% complete", "lessoncount": "Lessons: 4",
        "donelabel": "1 of 4 lessons done", "ringlength": 213.63, "ringoffset": 160.22,
        "continueurl": "#", "continuetitle": "1-2 How AI works", "continuestep": "Practice", "started": true,
        "continuesteps": [{"key": "video", "label": "Explanation", "isvideo": true, "done": true, "empty": false}],
        "haslessons": true, "askurl": "#",
        "units": [{"num": 1, "hashead": true, "label": "Unit 1", "countlabel": "1 of 4", "done": 1, "total": 4,
            "lessons": [{"num": 1, "numlabel": "Lesson 1", "title": "1-1 Development of IT", "url": "#", "done": true,
                "steps": [{"key": "video", "label": "Explanation", "isvideo": true, "done": true, "url": "#"},
                    {"key": "tips", "label": "Lesson files", "istips": true, "url": "#", "hasfiles": true,
                        "files": [{"id": 7, "name": "Lesson notes", "url": "#", "ispdf": true, "typemark": "PDF",
                            "typelabel": "PDF file"}]}]}]}]
    }
}}
<div class="tkc tkj">
    <header class="tkj-hero">
        <div class="tkj-hero-main">
            <p class="tkc-kicker">{{lessoncount}}</p>
            <h1 class="tkc-title">{{coursename}}</h1>
            {{#summary}}<div class="tkj-summary">{{{summary}}}</div>{{/summary}}
            {{#canmanage}}
            <div class="tkj-hero-tools">
                <a class="tk-btn tkj-btn-onblue" href="{{manageurl}}">{{#str}}manage, format_thinkera{{/str}}</a>
                {{#questionsurl}}<a class="tk-btn tkj-btn-onblue tkq-inbox" href="{{questionsurl}}">{{> format_thinkera/qicon }}{{#str}}questions_title, local_thinkera{{/str}}{{#questionswaiting}}<span class="tkq-badge" aria-label="{{#str}}questions_waiting_count, local_thinkera, {{questionswaiting}}{{/str}}">{{questionswaiting}}</span>{{/questionswaiting}}</a>{{/questionsurl}}
            </div>
            {{/canmanage}}
        </div>
        <div class="tkj-meter">
            <div class="tkj-ring" role="img" aria-label="{{progresslabel}}">
                <svg viewBox="0 0 80 80" width="112" height="112" aria-hidden="true" focusable="false">
                    <circle class="tkj-ring-track" cx="40" cy="40" r="34"/>
                    <circle class="tkj-ring-value" cx="40" cy="40" r="34" stroke-dasharray="{{ringlength}}" stroke-dashoffset="{{ringoffset}}"/>
                </svg>
                <span class="tkj-ring-num" aria-hidden="true"><span dir="ltr">{{percent}}<small>%</small></span></span>
            </div>
            <div class="tkj-meter-text">
                <p class="tkj-meter-label">{{donelabel}}</p>
                {{#progressurl}}<a class="tkj-meter-link" href="{{progressurl}}">{{#str}}prog_link, local_thinkera{{/str}} <span class="tkl-arrow" aria-hidden="true"></span></a>{{/progressurl}}
            </div>
        </div>
    </header>

    {{#liveopen}}
    <a class="tkj-live" href="{{roomurl}}">
        <span class="tkj-live-dot" aria-hidden="true"></span>
        <span class="tkj-live-text">
            <span class="tkj-live-kicker">{{#str}}livenow, format_thinkera{{/str}}</span>
            <strong class="tkj-live-name">{{name}}</strong>
        </span>
        <span class="tkj-live-go">{{#str}}live_join, local_thinkera{{/str}} <span class="tkl-arrow" aria-hidden="true"></span></span>
    </a>
    {{/liveopen}}

    {{#hasliveblock}}
    {{! the sessions panel: folded away behind its own icon so the lessons get the full width }}
    <details class="tkc-livedd">
        <summary class="tkc-livedd-btn">
            {{> format_thinkera/liveicon }}
            <span class="tkc-livedd-label">{{#str}}live_title, local_thinkera{{/str}}</span>
            {{#liveopen}}<span class="tkc-livedd-dot" aria-hidden="true"></span>{{/liveopen}}
            <span class="tkc-livedd-chev" aria-hidden="true"></span>
        </summary>
        <div class="tkc-livedd-panel">
            {{> format_thinkera/livepanel }}
        </div>
    </details>
    {{/hasliveblock}}

    <div class="tkj-layout">
        <div class="tkj-main">
            {{#continueurl}}
            <section class="tkj-resume{{#coursedone}} is-finished{{/coursedone}}" aria-labelledby="tkj-resume-title">
                <div class="tkj-resume-body">
                    <p class="tkj-resume-kicker">{{#coursedone}}{{#str}}coursedone, format_thinkera{{/str}}{{/coursedone}}{{^coursedone}}{{#str}}upnext, format_thinkera{{/str}}{{/coursedone}}</p>
                    <h2 class="tkj-resume-title" id="tkj-resume-title">{{continuetitle}}</h2>
                    {{#coursedone}}<p class="tkj-resume-lead">{{#str}}coursedone_lead, format_thinkera{{/str}}</p>{{/coursedone}}
                    {{^coursedone}}
                    <ol class="tkj-track">
                        {{#continuesteps}}{{^empty}}
                        <li class="tkj-track-step{{#done}} is-done{{/done}}{{#isnow}} is-now{{/isnow}}{{#locked}} is-locked{{/locked}}">
                            <span class="tkj-track-dot" aria-hidden="true">{{#done}}✓{{/done}}</span>
                            <span>{{label}}</span>{{#done}}<span class="visually-hidden"> ({{#str}}stepdone, format_thinkera{{/str}})</span>{{/done}}
                        </li>
                        {{/empty}}{{/continuesteps}}
                    </ol>
                    {{/coursedone}}
                </div>
                <div class="tkj-resume-actions">
                    <a class="tk-btn tk-btn-primary tk-btn-lg tkj-resume-go" href="{{continueurl}}">
                        {{#continuestep}}{{#started}}{{#str}}continuestep, format_thinkera, {{continuestep}}{{/str}}{{/started}}{{^started}}{{#str}}startstep, format_thinkera, {{continuestep}}{{/str}}{{/started}}{{/continuestep}}
                        {{^continuestep}}{{#started}}{{#str}}continue, format_thinkera{{/str}}{{/started}}{{^started}}{{#str}}start, format_thinkera{{/str}}{{/started}}{{/continuestep}}
                        <span class="tkl-arrow" aria-hidden="true"></span>
                    </a>
                    <div class="tkq-actions">
                        {{#askurl}}<a class="tk-btn tk-btn-ghost tkq-askbtn" href="{{askurl}}">{{> format_thinkera/qicon }}{{#str}}questions_ask, local_thinkera{{/str}}</a>{{/askurl}}
                        {{#myquestionsurl}}<a class="tkq-mine" href="{{myquestionsurl}}">{{#str}}questions_mine, local_thinkera{{/str}}</a>{{/myquestionsurl}}
                    </div>
                </div>
            </section>
            {{/continueurl}}

            {{#showunlock}}
            <aside class="tkl-unlock">
                <span class="tkl-lock-icon">{{> format_thinkera/lockicon }}</span>
                <p>{{#str}}unlockbanner, format_thinkera{{/str}}</p>
                <a class="tk-btn tk-btn-primary" href="{{unlockurl}}">{{#str}}unlock, format_thinkera{{/str}}</a>
            </aside>
            {{/showunlock}}

            <section class="tkj-path" aria-labelledby="tkj-path-title">
                <h2 class="tkc-h2" id="tkj-path-title">{{#str}}journey, format_thinkera{{/str}}</h2>
                {{#haslessons}}<p class="tkj-path-lead">{{#str}}journey_lead, format_thinkera{{/str}}</p>{{/haslessons}}
                {{^haslessons}}<p class="tkl-empty">{{#str}}nolessons, format_thinkera{{/str}}</p>{{/haslessons}}
                {{#units}}
                <div class="tkj-unit{{#isdone}} is-done{{/isdone}}{{#current}} is-current{{/current}}">
                    {{#hashead}}
                    <div class="tkj-unit-head">
                        <h3 class="tkj-unit-title">{{label}}</h3>
                        <span class="tkj-unit-count">{{countlabel}}</span>
                    </div>
                    {{/hashead}}
                    <ol class="tkc-lessons tkj-stops">
                        {{#lessons}}
                        {{#isexams}}
                        <li class="tkj-stop tkj-exams{{#locked}} is-locked{{/locked}}{{#done}} is-done{{/done}}">
                            <span class="tkj-node" aria-hidden="true"><svg class="tk-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path d="M9 4h6M9 3h6a1 1 0 0 1 1 1v1H8V4a1 1 0 0 1 1-1z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><rect x="5" y="4.5" width="14" height="16.5" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.5 11l1.5 1.5L13 9.5M8.5 16.5l1.5 1.5L13 15M15 11.5h1.5M15 17h1.5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
                            <div class="tkj-card">
                                <div class="tkj-meta">
                                    <span>{{#str}}examsstop, format_thinkera{{/str}}</span>
                                    {{#soon}}<span class="tk-badge tk-badge-soon">{{#str}}soon, format_thinkera{{/str}}</span>{{/soon}}
                                    {{#locked}}<span class="tk-badge tk-badge-lock">{{#str}}locked, format_thinkera{{/str}}</span>{{/locked}}
                                </div>
                                {{^soon}}<a class="tkj-title" href="{{url}}">{{title}}</a>
                                <p class="tkj-sum">{{examstotal}}</p>{{/soon}}
                                {{#soon}}<span class="tkj-title">{{title}}</span>{{/soon}}
                            </div>
                        </li>
                        {{/isexams}}
                        {{^isexams}}
                        <li class="tkj-stop{{#done}} is-done{{/done}}{{#locked}} is-locked{{/locked}}{{#iscontinue}} is-next{{/iscontinue}}{{#started}} is-started{{/started}}">
                            <span class="tkj-node" aria-hidden="true">{{#done}}<svg viewBox="0 0 24 24" width="18" height="18" focusable="false"><path d="M6 12.5l4 4 8-9" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>{{/done}}{{^done}}{{#locked}}{{> format_thinkera/lockicon }}{{/locked}}{{^locked}}{{num}}{{/locked}}{{/done}}</span>
                            <div class="tkj-card">
                                <div class="tkj-meta">
                                    <span>{{numlabel}}</span>
                                    {{#iscontinue}}<span class="tk-badge tk-badge-next">{{#str}}youarehere, format_thinkera{{/str}}</span>{{/iscontinue}}
                                    {{#done}}<span class="tk-badge tk-badge-done">{{#str}}stepdone, format_thinkera{{/str}}</span>{{/done}}
                                    {{#allfree}}<span class="tk-badge tk-badge-free">{{#str}}free, format_thinkera{{/str}}</span>{{/allfree}}
                                    {{#hasfree}}{{#haslocked}}<span class="tk-badge tk-badge-free">{{#str}}free, format_thinkera{{/str}}</span>{{/haslocked}}{{/hasfree}}
                                    {{#locked}}<span class="tk-badge tk-badge-lock">{{#str}}locked, format_thinkera{{/str}}</span>{{/locked}}
                                    {{#soon}}<span class="tk-badge tk-badge-soon">{{#str}}soon, format_thinkera{{/str}}</span>{{/soon}}
                                </div>
                                {{^soon}}<a class="tkj-title" href="{{url}}">{{title}}</a>{{/soon}}
                                {{#soon}}<span class="tkj-title">{{title}}</span>{{/soon}}
                                {{#iscontinue}}{{#summary}}<p class="tkj-sum">{{summary}}</p>{{/summary}}{{/iscontinue}}
                                {{#lockreason}}<p class="tkj-sum tkj-lockreason">{{{lockreason}}}</p>{{/lockreason}}
                                <ul class="tkj-steps">
                                    {{#steps}}{{^empty}}
                                    <li class="tkj-step-item">
                                        <a class="tkj-step{{#done}} is-done{{/done}}{{#locked}} is-locked{{/locked}}{{#hasfiles}} has-files{{/hasfiles}}" href="{{url}}">{{> format_thinkera/icon }}<span>{{label}}</span>{{#done}}<span class="tkj-step-check" aria-hidden="true">✓</span><span class="visually-hidden"> ({{#str}}stepdone, format_thinkera{{/str}})</span>{{/done}}</a>
                                        {{#hasfiles}}
                                        {{! the lesson's own files: a click or a tap on the arrow opens the list (the keyboard the same way), and the chip beside it stays a plain link to the step page }}
                                        <details class="tkj-filesdd">
                                            <summary class="tkj-filesdd-btn"><span class="visually-hidden">{{#str}}filesshow, format_thinkera{{/str}}</span><span class="tkj-filesdd-chev" aria-hidden="true"></span></summary>
                                            <ul class="tkj-files">
                                                {{#files}}
                                                <li>
                                                    <a class="tkj-file{{#locked}} is-locked{{/locked}}{{#complete}} is-done{{/complete}}" href="{{url}}">
                                                        <span class="tkj-file-type{{#ispdf}} is-pdf{{/ispdf}}{{#isvideo}} is-video{{/isvideo}}" aria-hidden="true">{{typemark}}</span>
                                                        <span class="tkj-file-name">{{name}}<span class="visually-hidden"> — {{typelabel}}</span></span>
                                                        {{#complete}}<span class="tkj-file-check" aria-hidden="true">✓</span><span class="visually-hidden"> ({{#str}}stepdone, format_thinkera{{/str}})</span>{{/complete}}
                                                        {{#locked}}<span class="tkj-file-lock">{{> format_thinkera/lockicon }}<span class="visually-hidden">{{#str}}locked, format_thinkera{{/str}}</span></span>{{/locked}}
                                                    </a>
                                                </li>
                                                {{/files}}
                                            </ul>
                                        </details>
                                        {{/hasfiles}}
                                    </li>
                                    {{/empty}}{{/steps}}
                                </ul>
                            </div>
                        </li>
                        {{/isexams}}
                        {{/lessons}}
                    </ol>
                </div>
                {{/units}}
            </section>

            {{#hasfromstudents}}
            <section class="tkq-faq" aria-labelledby="tkq-faq-title">
                <h2 class="tkc-h2" id="tkq-faq-title">{{#str}}fromstudents_title, local_thinkera{{/str}}</h2>
                <p class="tkq-faq-lead">{{#str}}fromstudents_lead, local_thinkera{{/str}}</p>
                {{#fromstudents}}
                <details class="tkq-faq-item">
                    <summary>
                        <span class="tkq-faq-q">{{question}}</span>
                        {{#lesson}}<span class="tkq-faq-lesson">{{lesson}}</span>{{/lesson}}
                    </summary>
                    <div class="tkq-faq-a">{{answer}}</div>
                </details>
                {{/fromstudents}}
            </section>
            {{/hasfromstudents}}
        </div>

        {{#isguest}}
        {{! Only for a visitor with no account. A student who is signed in never sees it. }}
        <section class="tkc-guest" aria-labelledby="tkc-guest-title">
            <h2 class="tkc-guest-title" id="tkc-guest-title">{{#str}}guest_cta_title, format_thinkera{{/str}}</h2>
            <p class="tkc-guest-text">{{#str}}guest_cta_text, format_thinkera{{/str}}</p>
            <a class="tkc-guest-btn" href="{{guestjoinurl}}">{{#str}}guest_cta_button, format_thinkera{{/str}}</a>
            <p class="tkc-guest-note">{{#str}}guest_cta_note, format_thinkera{{/str}}</p>
        </section>
        {{/isguest}}

    </div>
</div>