{{!
    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: the course, its progress, where to continue, and one card per lesson.

    Example context (json):
    {
        "coursename": "Programming", "percent": 25, "progresslabel": "25% complete", "lessoncount": "Lessons: 4",
        "continueurl": "#", "continuetitle": "Lesson 2", "started": true, "haslessons": true, "askurl": "#", "hasfromstudents": true, "fromstudents": [{"question": "Why?", "answer": "Because.", "lesson": "1-1"}],
        "lessons": [{"num": 1, "numlabel": "Lesson 1", "title": "Development of IT", "url": "#", "done": true,
            "steps": [{"key": "video", "label": "The explanation", "isvideo": true, "count": 1, "done": true}]}]
    }
}}
<div class="tkc">
    <header class="tkc-hero">
        <p class="tkc-kicker">{{lessoncount}}</p>
        <h1 class="tkc-title">{{coursename}}</h1>
        {{#summary}}<div class="tkc-summary">{{{summary}}}</div>{{/summary}}
        <div class="tkc-progress">
            <span class="tkc-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{percent}}"
                  aria-label="{{progresslabel}}"><span style="width: {{percent}}%"></span></span>
            <span class="tkc-progress-label">{{progresslabel}}</span>
            {{#progressurl}}<a class="tkc-progress-link" href="{{progressurl}}">{{#str}}prog_link, local_thinkera{{/str}}</a>{{/progressurl}}
        </div>
        {{#continueurl}}
        <a class="tkc-cta" href="{{continueurl}}">
            <span class="tkc-cta-kicker">{{#str}}upnext, format_thinkera{{/str}}</span>
            <strong class="tkc-cta-title">{{continuetitle}}</strong>
            <span class="tkc-cta-go">
                {{#started}}{{#str}}continue, format_thinkera{{/str}}{{/started}}{{^started}}{{#str}}start, format_thinkera{{/str}}{{/started}}
                <span class="tkl-arrow" aria-hidden="true"></span>
            </span>
        </a>
        {{/continueurl}}
        {{#canmanage}}<a class="tk-btn tk-btn-ghost tkc-manage" href="{{manageurl}}">{{#str}}manage, format_thinkera{{/str}}</a>{{/canmanage}}
        <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}}
            {{#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>

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

    {{#hasliveblock}}
    <section class="tkc-live" aria-labelledby="tkc-live-title">
        <div class="tkc-live-head">
            <h2 class="tkc-h2" id="tkc-live-title">{{#str}}live_title, local_thinkera{{/str}}</h2>
            <a href="{{liveurl}}">{{#str}}teach_all, local_thinkera{{/str}}</a>
        </div>
        {{#haslivesessions}}<ul class="tkv-list">{{#livesessions}}{{> local_thinkera/live_card }}{{/livesessions}}</ul>{{/haslivesessions}}
        {{^haslivesessions}}<p class="tkc-live-none">{{#livenewurl}}{{#str}}live_none_teacher, local_thinkera{{/str}}{{/livenewurl}}{{^livenewurl}}{{#str}}live_none_student, local_thinkera{{/str}}{{/livenewurl}}</p>{{/haslivesessions}}
        {{#hasliverecordings}}
        <h3 class="tkc-rec-title">{{#str}}live_course_recordings, local_thinkera{{/str}}</h3>
        <ul class="tkc-recs">
            {{#liverecordings}}
            <li class="tkc-rec">
                <span class="tkc-rec-date" aria-hidden="true"><b>{{day}}</b>{{month}}</span>
                <span class="tkc-rec-body">
                    <a class="tkc-rec-name" href="{{sessionurl}}">{{name}}</a>
                    <span class="tkc-rec-meta">{{when}}{{#minutes}} · {{#str}}live_minutes, local_thinkera, {{minutes}}{{/str}}{{/minutes}}{{#parts}} · {{#str}}live_rec_parts, local_thinkera, {{parts}}{{/str}}{{/parts}}{{#private}} · {{#str}}live_private_you, local_thinkera{{/str}}{{/private}}</span>
                </span>
                <a class="tk-btn tk-btn-ghost tkc-rec-play" href="{{watchurl}}"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9.5"/><path d="m10 8.5 5.5 3.5-5.5 3.5z" fill="currentColor"/></svg>{{#str}}live_watch, local_thinkera{{/str}}</a>
            </li>
            {{/liverecordings}}
        </ul>
        {{/hasliverecordings}}
        <div class="tkc-live-actions">
            {{#liverequesturl}}<a class="tk-btn tk-btn-ghost" href="{{liverequesturl}}">{{#str}}request_ask, local_thinkera{{/str}}</a>{{/liverequesturl}}
            {{#livenewurl}}<a class="tk-btn tk-btn-ghost" href="{{livenewurl}}">{{#str}}live_new, local_thinkera{{/str}}</a>{{/livenewurl}}
        </div>
    </section>
    {{/hasliveblock}}

    <h2 class="tkc-h2">{{#str}}lessons, format_thinkera{{/str}}</h2>
    {{^haslessons}}<p class="tkl-empty">{{#str}}nolessons, format_thinkera{{/str}}</p>{{/haslessons}}
    <ol class="tkc-lessons">
        {{#lessons}}
        <li>
            <a class="tkc-lesson{{#done}} is-done{{/done}}{{#locked}} is-locked{{/locked}}{{#iscontinue}} is-next{{/iscontinue}}" href="{{url}}">
                <span class="tkc-num" aria-hidden="true">{{#done}}✓{{/done}}{{^done}}{{num}}{{/done}}</span>
                <span class="tkc-lesson-body">
                    <span class="tkc-meta">
                        <span>{{numlabel}}</span>
                        {{#iscontinue}}<span class="tk-badge tk-badge-next">{{#str}}upnext, format_thinkera{{/str}}</span>{{/iscontinue}}
                        {{#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}}
                    </span>
                    <span class="tkc-lesson-title">{{title}}</span>
                    {{#summary}}<span class="tkc-lesson-summary">{{summary}}</span>{{/summary}}
                    <span class="tkc-pips">
                        {{#steps}}{{^empty}}
                        <span class="tkc-pip{{#done}} is-done{{/done}}{{#locked}} is-locked{{/locked}}">{{> format_thinkera/icon }}<span>{{label}}</span></span>
                        {{/empty}}{{/steps}}
                    </span>
                    {{#tracked}}<span class="tkc-bar tkc-bar-sm" aria-hidden="true"><span style="width: {{progress}}%"></span></span>{{/tracked}}
                </span>
            </a>
        </li>
        {{/lessons}}
    </ol>

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