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

    A lesson: its three parts (the explanation, tips and tricks, practice) as a switch, the active part, and the
    course's lessons. Mobile first: the switch sticks under the top bar, the lesson list follows the content.

    Example context (json):
    {
        "position": "Lesson 1 of 4", "title": "1-1 Development of IT", "courseurl": "#", "coursename": "Programming",
        "stepper": [{"num": 1, "key": "video", "label": "The explanation", "isvideo": true, "active": true, "count": 1, "url": "#"}],
        "step": {"label": "The explanation", "isvideo": true}, "hasitems": true,
        "items": [{"id": 1, "name": "Lesson video", "embedurl": "https://www.youtube-nocookie.com/embed/x", "inline": true}],
        "nav": [{"num": 1, "title": "Development of IT", "url": "#", "current": true}]
    }
}}
<div class="tkl">
    <header class="tkl-head">
        <a class="tkl-back" href="{{courseurl}}"><span class="tkl-arrow" aria-hidden="true"></span>{{#str}}alllessons, format_thinkera{{/str}}</a>
        <p class="tkl-pos">{{position}}</p>
        <h1 class="tkl-title">{{title}}</h1>
        <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}}
            {{#requestliveurl}}<a class="tk-btn tk-btn-ghost tkq-livebtn" href="{{requestliveurl}}">{{> format_thinkera/liveicon }}{{#str}}request_short, local_thinkera{{/str}}</a>{{/requestliveurl}}
            {{#myquestionsurl}}<a class="tkq-mine" href="{{myquestionsurl}}">{{#str}}questions_mine, local_thinkera{{/str}}</a>{{/myquestionsurl}}
            {{#questionsurl}}<a class="tk-btn tk-btn-ghost 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>
    </header>

    <nav class="tkl-steps" aria-label="{{#str}}steps, format_thinkera{{/str}}">
        {{#stepper}}
        <a href="{{url}}" class="tkl-step{{#active}} is-active{{/active}}{{#done}} is-done{{/done}}{{#empty}} is-empty{{/empty}}{{#locked}} is-locked{{/locked}}"
           {{#active}}aria-current="step"{{/active}}>
            <span class="tkl-step-icon">{{> format_thinkera/icon }}</span>
            <span class="tkl-step-label">{{label}}</span>
            {{#done}}<span class="tkl-step-check" aria-label="{{#str}}completed, format_thinkera{{/str}}">✓</span>{{/done}}
            {{^done}}{{#locked}}<span class="tkl-step-lock">{{> format_thinkera/lockicon }}</span>{{/locked}}{{/done}}
        </a>
        {{/stepper}}
    </nav>

    <div class="tkl-grid">
        <div class="tkl-main">
            {{^hasitems}}
            <div class="tkl-empty">
                <span class="tkl-empty-icon">{{> format_thinkera/icon }}</span>
                <p>{{#str}}emptystep, format_thinkera{{/str}}</p>
            </div>
            {{/hasitems}}

            {{#haslevels}}
            <nav class="tkl-levels" id="tkl-levels" aria-label="{{#str}}levels, format_thinkera{{/str}}">
                {{#levels}}
                <a href="{{url}}" class="tkl-level tkl-level-{{num}}{{#active}} is-active{{/active}}{{#done}} is-done{{/done}}"
                   {{#active}}aria-current="page"{{/active}}>
                    <span class="tkl-level-bars" aria-hidden="true"><i></i><i></i><i></i></span>
                    <span class="tkl-level-text"><strong>{{label}}</strong><small>{{count}}</small></span>
                    {{#done}}<span class="tkl-level-check" aria-label="{{#str}}completed, format_thinkera{{/str}}">✓</span>{{/done}}
                    {{^done}}{{#locked}}<span class="tkl-level-lock">{{> format_thinkera/lockicon }}</span>{{/locked}}{{/done}}
                </a>
                {{/levels}}
            </nav>
            {{/haslevels}}

            {{#items}}
            <article class="tkl-item{{#locked}} is-locked{{/locked}}{{#complete}} is-complete{{/complete}}" id="tk-item-{{id}}">
                {{#locked}}
                <div class="tkl-lock">
                    <span class="tkl-lock-icon">{{> format_thinkera/lockicon }}</span>
                    <h2 class="tkl-item-title">{{name}}</h2>
                    <div class="tkl-lock-text">{{{lockinfo}}}</div>
                    {{^paid}}<a class="tk-btn tk-btn-primary tk-btn-lg" href="{{unlockurl}}">{{#str}}unlock, format_thinkera{{/str}}</a>{{/paid}}
                </div>
                {{/locked}}

                {{^locked}}
                    {{#embedurl}}
                    <div class="tkl-player">
                        <iframe src="{{embedurl}}" title="{{name}}" loading="lazy" allowfullscreen
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin"></iframe>
                    </div>
                    {{/embedurl}}
                    {{#videourl}}
                    <div class="tkl-player">
                        <video controls playsinline preload="metadata"><source src="{{videourl}}" type="{{videomime}}"></video>
                    </div>
                    {{/videourl}}

                    {{#quiz}}
                    <div class="tkl-practice">
                        <div class="tkl-practice-top">
                            {{#hasbest}}
                            <span class="tkl-ring" style="--p: {{bestpercent}}">
                                <strong>{{bestpercent}}٪</strong><small>{{#str}}bestresult, format_thinkera{{/str}}</small>
                            </span>
                            {{/hasbest}}
                            {{^hasbest}}<span class="tkl-practice-icon" aria-hidden="true">{{> format_thinkera/icon }}</span>{{/hasbest}}
                            <div class="tkl-practice-text">
                                <h2 class="tkl-item-title">{{name}}</h2>
                                <p>{{#lead}}{{lead}}{{/lead}}{{^lead}}{{#str}}practicelead, format_thinkera{{/str}}{{/lead}}</p>
                                <ul class="tkl-facts">
                                    <li>{{#str}}questions_count, format_thinkera, {{questioncount}}{{/str}}</li>
                                    {{#attempts}}<li>{{attempts}}</li>{{/attempts}}
                                    {{#timelimit}}<li>{{#str}}timelimit, format_thinkera{{/str}}: {{timelimit}}</li>{{/timelimit}}
                                </ul>
                            </div>
                        </div>
                        <div class="tkl-practice-actions">
                            {{#continueurl}}
                            <a class="tk-btn tk-btn-primary tk-btn-lg" href="{{continueurl}}">{{#str}}quiz_continue, format_thinkera{{/str}}</a>
                            {{/continueurl}}
                            {{^continueurl}}{{#canattempt}}
                            <a class="tk-btn tk-btn-primary tk-btn-lg" href="{{starturl}}">{{button}}</a>
                            {{/canattempt}}{{/continueurl}}
                            {{#reviewurl}}
                            <a class="tk-btn tk-btn-ghost tk-btn-lg" href="{{reviewurl}}">{{#str}}quiz_review, format_thinkera{{/str}}</a>
                            {{/reviewurl}}
                        </div>
                    </div>
                    {{/quiz}}

                    {{#pdfurl}}
                    <div class="tkl-doc">
                        <div class="tkl-doc-head">
                            <span class="tkl-doc-icon" aria-hidden="true">PDF</span>
                            <div>
                                <h2 class="tkl-item-title">{{name}}</h2>
                                <p>{{#str}}tipslead, format_thinkera{{/str}}</p>
                            </div>
                        </div>
                        <iframe class="tkl-doc-frame" src="{{pdfurl}}" title="{{name}}" loading="lazy"></iframe>
                        <a class="tk-btn tk-btn-primary tk-btn-lg" href="{{pdfopenurl}}" target="_blank" rel="noopener">{{#str}}openpdf, format_thinkera{{/str}}</a>
                    </div>
                    {{/pdfurl}}

                    {{#body}}<div class="tkl-body">{{{body}}}</div>{{/body}}

                    {{#embedurl}}<h2 class="tkl-item-title tkl-under">{{name}}</h2>{{/embedurl}}
                    {{#videourl}}<h2 class="tkl-item-title tkl-under">{{name}}</h2>{{/videourl}}

                    {{#downloadurl}}
                    <div class="tkl-card-row">
                        <h2 class="tkl-item-title">{{name}}</h2>
                        <a class="tk-btn tk-btn-ghost" href="{{downloadurl}}">{{#str}}download, format_thinkera, {{filename}}{{/str}}</a>
                    </div>
                    {{/downloadurl}}
                    {{^inline}}{{^quiz}}{{^downloadurl}}
                    <div class="tkl-card-row">
                        <h2 class="tkl-item-title">{{name}}</h2>
                        <a class="tk-btn tk-btn-ghost" href="{{url}}" {{#external}}target="_blank" rel="noopener"{{/external}}>{{#str}}open, format_thinkera{{/str}}</a>
                    </div>
                    {{/downloadurl}}{{/quiz}}{{/inline}}

                    <div class="tkl-badges">
                        {{#showfree}}<span class="tk-badge tk-badge-free">{{#str}}free, format_thinkera{{/str}}</span>{{/showfree}}
                        {{#showpaid}}<span class="tk-badge tk-badge-paid">{{#str}}paid, format_thinkera{{/str}}</span>{{/showpaid}}
                        {{#complete}}<span class="tk-badge tk-badge-done">✓ {{#str}}completed, format_thinkera{{/str}}</span>{{/complete}}
                    </div>
                {{/locked}}
            </article>
            {{/items}}

            {{#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}}

            <div class="tkl-pager">
                {{#next}}<a class="tk-btn tk-btn-primary tk-btn-lg tkl-next" href="{{url}}">{{label}}<span class="tkl-arrow" aria-hidden="true"></span></a>{{/next}}
                {{#prevurl}}<a class="tk-btn tk-btn-quiet" href="{{prevurl}}">{{#str}}prevlesson, format_thinkera{{/str}}</a>{{/prevurl}}
            </div>
        </div>

        <nav class="tkl-side" aria-label="{{#str}}lessons, format_thinkera{{/str}}">
            <h2 class="tkl-side-title">{{coursename}}</h2>
            <ol class="tkl-side-list">
                {{#nav}}
                <li>
                    <a href="{{url}}" class="{{#current}}is-current{{/current}}{{#done}} is-done{{/done}}{{#locked}} is-locked{{/locked}}"
                       {{#current}}aria-current="page"{{/current}}>
                        <span class="tkl-side-num" aria-hidden="true">{{#done}}✓{{/done}}{{^done}}{{num}}{{/done}}</span>
                        <span class="tkl-side-name">{{title}}</span>
                        {{#locked}}<span class="tkl-side-lock">{{> format_thinkera/lockicon }}<span class="visually-hidden">{{#str}}locked, format_thinkera{{/str}}</span></span>{{/locked}}
                    </a>
                </li>
                {{/nav}}
            </ol>
        </nav>
    </div>
</div>