{{!
    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, the lesson files, 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.
    The files part lists every file of the lesson (from two files on) and shows the open one in the viewer.

    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": "#"}],
        "stepnow": {"key": "video", "label": "The explanation", "isvideo": true, "caption": "Step 1 of 4"},
        "haspractice": true,
        "practice": [{"key": "quiz", "label": "Quizzes", "note": "Questions, marks and attempts", "isquiz": true,
            "url": "#", "active": true}],
        "step": {"label": "The explanation", "isvideo": true}, "hasitems": true,
        "items": [{"id": 1, "name": "Lesson video", "embedurl": "https://www.youtube-nocookie.com/embed/x", "inline": true}],
        "hasfiles": true,
        "files": [{"id": 7, "name": "Lesson notes", "url": "#", "ispdf": true, "typemark": "PDF", "typelabel": "PDF file",
            "current": 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">
            {{! The asking lives on «أسئلتي», which already opens with the ask box; the lesson header links to
                it and carries the lesson, so the question still records where it was asked from. }}
            {{#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="tk-btn tk-btn-ghost tkq-minebtn" href="{{myquestionsurl}}">{{> format_thinkera/qicon }}{{#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>

    {{^isexams}}
    <nav class="tkl-stepbar" aria-label="{{#str}}steps, format_thinkera{{/str}}">
        {{! On a phone the steps are one button that names the step in front of the student and drops the rest
            below it; from 768 px up the button is hidden and the row below it is the one that shows. }}
        <details class="tkl-stepsel">
            <summary class="tkl-stepsel-btn" aria-label="{{#str}}steppick, format_thinkera{{/str}}">
                {{#stepnow}}
                <span class="tkl-step-icon">{{> format_thinkera/icon }}</span>
                <span class="tkl-stepsel-now">
                    <span class="tkl-stepsel-cap">{{caption}}</span>
                    <span class="tkl-stepsel-label">{{label}}</span>
                </span>
                {{#done}}<span class="tkl-stepsel-state" aria-label="{{#str}}completed, format_thinkera{{/str}}">✓</span>{{/done}}
                {{/stepnow}}
                {{! a drawn chevron, not a rotated border box: Moodle mirrors every border shorthand for
                    Arabic, and that turned the arrow on its side }}
                <svg class="tkl-stepsel-chev" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false"><path d="m6 9.5 6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </summary>
            <div class="tkl-stepsel-menu">
                {{#stepper}}
                <a href="{{url}}" class="tkl-stepsel-item{{#active}} is-active{{/active}}{{#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-stepsel-label">{{label}}</span>
                    {{#done}}<span class="tkl-stepsel-state" aria-label="{{#str}}completed, format_thinkera{{/str}}">✓</span>{{/done}}
                    {{^done}}{{#locked}}<span class="tkl-stepsel-state">{{> format_thinkera/lockicon }}</span>{{/locked}}{{/done}}
                </a>
                {{/stepper}}
            </div>
        </details>
        <div class="tkl-steps">
            {{#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}}
        </div>
    </nav>
    {{/isexams}}

    <div class="tkl-grid">
        <div class="tkl-main">
            {{^hasitems}}
            {{#seqlock}}
            <div class="tkl-lock">
                <span class="tkl-lock-icon">{{> format_thinkera/lockicon }}</span>
                <div class="tkl-lock-text">{{{text}}}</div>
                {{#url}}<a class="tk-btn tk-btn-primary tk-btn-lg" href="{{url}}">{{#str}}gotoprevious, format_thinkera{{/str}}</a>{{/url}}
            </div>
            {{/seqlock}}
            {{^seqlock}}
            <div class="tkl-empty">
                <span class="tkl-empty-icon">{{> format_thinkera/icon }}</span>
                <p>{{#str}}emptystep, format_thinkera{{/str}}</p>
            </div>
            {{/seqlock}}
            {{/hasitems}}

            {{! The explanation and the practice each come in two shapes. The one that *is* the lesson opens by
                itself, and the other is offered as a single link **under** the content — see learn.php's
                practice_tabs(). The levels below belong to the quizzes. }}

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

            {{! «ملفات الدرس»: every file of the lesson, the open one marked; the viewer below shows it }}
            {{#hasfiles}}
            <nav class="tkl-files" aria-label="{{#str}}step_tips, format_thinkera{{/str}}">
                <ul class="tkl-filelist">
                    {{#files}}
                    <li>
                        <a href="{{url}}" class="tkl-file{{#current}} is-current{{/current}}{{#locked}} is-locked{{/locked}}{{#complete}} is-done{{/complete}}"
                           {{#current}}aria-current="true"{{/current}}>
                            <span class="tkl-file-type{{#ispdf}} is-pdf{{/ispdf}}{{#isvideo}} is-video{{/isvideo}}" aria-hidden="true">{{typemark}}</span>
                            <span class="tkl-file-name">{{name}}<span class="visually-hidden"> — {{typelabel}}</span></span>
                            {{#current}}<span class="tkl-file-now">{{#str}}filenow, format_thinkera{{/str}}</span>{{/current}}
                            {{#complete}}<span class="tkl-file-check" aria-hidden="true">✓</span><span class="visually-hidden"> ({{#str}}completed, format_thinkera{{/str}})</span>{{/complete}}
                            {{#locked}}<span class="tkl-file-lock">{{> format_thinkera/lockicon }}<span class="visually-hidden">{{#str}}locked, format_thinkera{{/str}}</span></span>{{/locked}}
                        </a>
                    </li>
                    {{/files}}
                </ul>
            </nav>
            {{/hasfiles}}

            {{#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>
                    {{#sequrl}}<a class="tk-btn tk-btn-primary tk-btn-lg" href="{{sequrl}}">{{#str}}gotoprevious, format_thinkera{{/str}}</a>{{/sequrl}}
                    {{^sequrl}}{{^paid}}<a class="tk-btn tk-btn-primary tk-btn-lg" href="{{unlockurl}}">{{#str}}unlock, format_thinkera{{/str}}</a>{{/paid}}{{/sequrl}}
                </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}}
                    {{! the interactive explanation plays here; the student is not sent out to the module's page }}
                    {{#h5p}}
                    <h2 class="tkl-item-title tkl-over">{{name}}</h2>
                    <div class="tkl-h5p">{{{h5p}}}</div>
                    {{/h5p}}

                    {{#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>
                                {{#pending}}
                                <p class="tkl-pending"><b>{{pendingnote}}</b>{{#pendingscore}} <span>{{pendingscore}}</span>{{/pendingscore}}</p>
                                {{/pending}}
                            </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" data-region="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>
                        {{! Print asks the viewer itself; a browser that refuses simply opens the file in its own tab }}
                        <div class="tkl-doc-tools">
                            <a class="tk-btn tk-btn-primary" href="{{pdfdownloadurl}}">{{> format_thinkera/downloadicon }}{{#str}}downloadfile, format_thinkera{{/str}}</a>
                            <button type="button" class="tk-btn tk-btn-ghost" data-action="tkl-print" data-open="{{pdfopenurl}}">{{> format_thinkera/printicon }}{{#str}}printfile, format_thinkera{{/str}}</button>
                            <a class="tk-btn tk-btn-ghost" href="{{pdfopenurl}}" target="_blank" rel="noopener">{{#str}}openpdf, format_thinkera{{/str}}</a>
                        </div>
                        <iframe class="tkl-doc-frame" data-region="tkl-doc-frame" src="{{pdfurl}}" title="{{name}}" loading="lazy"></iframe>
                    </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}}

            {{! The way across to the lesson's other shape, offered after the content rather than before it.
                Only one of the two can be present: they belong to different steps. }}
            {{#haswatchswitch}}
            {{#watchswitch}}
            <a href="{{url}}" class="tkl-switch" id="tkl-switch">
                {{! a drawn mark, not a CSS triangle: the border trick never sits optically centred in its circle }}
                <svg class="tkl-switch-mark" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false">
                    <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"
                            {{#interactive}}stroke-dasharray="3 2.6"{{/interactive}}></circle>
                    <path d="M10 8.5 L16 12 L10 15.5 Z" fill="currentColor"></path>
                </svg>
                <span class="tkl-switch-text"><strong>{{label}}</strong><small>{{note}}</small></span>
                {{#done}}<span class="tkl-switch-check" aria-label="{{#str}}completed, format_thinkera{{/str}}">✓</span>{{/done}}
            </a>
            {{/watchswitch}}
            {{/haswatchswitch}}

            {{#haspracticeswitch}}
            {{#practiceswitch}}
            <a href="{{url}}" class="tkl-switch{{#done}} is-done{{/done}}" id="tkl-switch">
                <span class="tkl-switch-icon">{{> format_thinkera/icon }}</span>
                <span class="tkl-switch-text"><strong>{{label}}</strong><small>{{note}}</small></span>
                {{#done}}<span class="tkl-switch-check" aria-label="{{#str}}completed, format_thinkera{{/str}}">✓</span>{{/done}}
                {{^done}}{{#locked}}<span class="tkl-switch-lock">{{> format_thinkera/lockicon }}</span>{{/locked}}{{/done}}
            </a>
            {{/practiceswitch}}
            {{/haspracticeswitch}}

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

    </div>

    {{! the lesson list: behind its own icon, so the lesson itself keeps the full width }}
    <details class="tkc-livedd tkl-toc">
        <summary class="tkc-livedd-btn">
            {{> format_thinkera/listicon }}
            <span class="tkc-livedd-label">{{#str}}lessons, format_thinkera{{/str}}</span>
            <span class="tkc-livedd-chev" aria-hidden="true"></span>
        </summary>
        <nav class="tkc-livedd-panel 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">{{#isexams}}<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>{{/isexams}}{{^isexams}}{{#done}}✓{{/done}}{{^done}}{{num}}{{/done}}{{/isexams}}</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>
    </details>

{{#hasassist}}
{{! «اسأل الـ AI»: the course assistant, as a chat box that floats over the lesson rather than a panel that
    pushes it down. A student reads the lesson and asks about the line in front of them, so the box has to be
    reachable without leaving the place they were reading.

    What it says about itself is not decoration. It answers from this course's lessons only, and a student who
    takes it for a general chatbot asks it general things, is told «not in the lesson», and stops trusting the
    answers that are right — so the scope is on its face, in the header and in the first bubble. }}
<div class="tkai" data-region="tk-assist">
    <button type="button" class="tkai-fab" data-action="tk-assist-open"
            aria-expanded="false" aria-controls="tk-assist-panel">
        <span class="tkai-fab-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="22" height="22" focusable="false"><path d="M12 3l1.5 4.2a4 4 0 0 0 2.4 2.5L20 11l-4.1 1.3a4 4 0 0 0-2.4 2.5L12 19l-1.5-4.2a4 4 0 0 0-2.4-2.5L4 11l4.1-1.3a4 4 0 0 0 2.4-2.5z" fill="currentColor"/><circle cx="18.6" cy="5.4" r="1.5" fill="currentColor" opacity=".75"/><circle cx="5.6" cy="17.8" r="1.1" fill="currentColor" opacity=".55"/></svg>
        </span>
        <span class="tkai-fab-label">{{#str}}assist_open, local_thinkera{{/str}}</span>
        <span class="tkai-fab-x" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="20" height="20" focusable="false"><path d="M7 7l10 10M17 7L7 17" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
        </span>
    </button>

    <div class="tkai-panel" id="tk-assist-panel" role="dialog"
         aria-label="{{#str}}assist_title, local_thinkera{{/str}}" hidden>
        <header class="tkai-head">
            <span class="tkai-avatar" aria-hidden="true">
                <svg viewBox="0 0 24 24" width="22" height="22" focusable="false"><path d="M12 3l1.5 4.2a4 4 0 0 0 2.4 2.5L20 11l-4.1 1.3a4 4 0 0 0-2.4 2.5L12 19l-1.5-4.2a4 4 0 0 0-2.4-2.5L4 11l4.1-1.3a4 4 0 0 0 2.4-2.5z" fill="currentColor"/></svg>
            </span>
            <div class="tkai-headtext">
                <h2>{{#str}}assist_title, local_thinkera{{/str}}</h2>
                <p><span class="tkai-dot" aria-hidden="true"></span>{{#str}}assist_status, local_thinkera{{/str}}</p>
            </div>
            {{! bigger and smaller: a long answer with bullets in it is hard to read through a phone-sized
                window, and the size the student picks is remembered for the next lesson }}
            <button type="button" class="tkai-size" data-action="tk-assist-size"
                    data-expand="{{#str}}assist_expand, local_thinkera{{/str}}"
                    data-collapse="{{#str}}assist_collapse, local_thinkera{{/str}}"
                    aria-label="{{#str}}assist_expand, local_thinkera{{/str}}">
                <svg class="tkai-i-grow" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                <svg class="tkai-i-shrink" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" focusable="false"><path d="M20 4l-7 7m0-5v5h5M4 20l7-7m0 5v-5H6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
            <button type="button" class="tkai-x" data-action="tk-assist-close"
                    aria-label="{{#str}}assist_close, local_thinkera{{/str}}">
                <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M7 7l10 10M17 7L7 17" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
            </button>
        </header>

        <div class="tkai-log" data-region="tk-assist-log" role="log" aria-live="polite">
            <div class="tkai-turn is-assist">
                <div class="tkai-text">{{#str}}assist_scope, local_thinkera{{/str}}</div>
            </div>
            <p class="tkai-hint">{{#str}}assist_hint, local_thinkera{{/str}}</p>
        </div>

        <form class="tkai-ask">
            <label class="visually-hidden" for="tk-assist-input">{{#str}}assist_title, local_thinkera{{/str}}</label>
            <input type="text" id="tk-assist-input" data-region="tk-assist-input" autocomplete="off"
                   enterkeyhint="send" placeholder="{{#str}}assist_placeholder, local_thinkera{{/str}}">
            <button type="submit" class="tkai-send" aria-label="{{#str}}assist_send, local_thinkera{{/str}}">
                <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M20 12L4.5 5.5l2.2 6.5-2.2 6.5z" fill="currentColor"/><path d="M6.7 12H20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
            </button>
        </form>
    </div>
</div>
{{/hasassist}}
</div>