{{!
    @template mod_modernvideoplayer/player

    Main player surface for a mod_modernvideoplayer activity.

    Context variables required for this template:
    * cmid - course module id (int)
    * name - activity name (string)
    * intro - rendered intro HTML (string)
    * videourl, posterurl - media URLs (string)
    * focusmode, showtitle, titleleft, titlecenter, titleright - layout flags (bool)
    * backurl, backlabel - close button target (string)
    * hascaptions, captions, defaultcaptionlang - captions metadata (bool|array|string)
    * haschapters, chapterurl, chapterlabel - chapter track metadata (bool|string|string)

    Example context (json):
    {
        "cmid": 42,
        "name": "Lecture 1",
        "intro": "",
        "videourl": "https://example.test/lecture1.mp4",
        "posterurl": "",
        "focusmode": false,
        "showtitle": true,
        "titleleft": true,
        "titlecenter": false,
        "titleright": false,
        "backurl": "#",
        "backlabel": "Back",
        "hascaptions": false,
        "captions": [],
        "defaultcaptionlang": "en",
        "haschapters": false,
        "chapterurl": "",
        "chapterlabel": ""
    }
}}
<div class="modernvideoplayer" data-region="modern-video-player" data-cmid="{{cmid}}">
    {{#focusmode}}
        <div class="modernvideoplayer__shell">
            <div class="modernvideoplayer__topbar">
                {{#showtitle}}
                    <h1 class="modernvideoplayer__title {{#titleleft}}modernvideoplayer__title--left{{/titleleft}}{{#titlecenter}}modernvideoplayer__title--center{{/titlecenter}}{{#titleright}}modernvideoplayer__title--right{{/titleright}}">{{name}}</h1>
                {{/showtitle}}
                <a class="modernvideoplayer__close btn-close" href="{{backurl}}" aria-label="{{backlabel}}"></a>
            </div>
            <div class="modernvideoplayer__content">
    {{/focusmode}}
    {{{intro}}}
    {{#reporturl}}
        <div class="mb-3">
            <a class="btn btn-secondary" href="{{reporturl}}">{{#str}}report, modernvideoplayer{{/str}}</a>
        </div>
    {{/reporturl}}
    <div class="{{#focusmode}}modernvideoplayer__stage{{/focusmode}}{{^focusmode}}card shadow-sm{{/focusmode}}">
        <div class="{{#focusmode}}modernvideoplayer__player{{/focusmode}}{{^focusmode}}card-body{{/focusmode}}">
            <div class="position-relative overflow-hidden {{#focusmode}}modernvideoplayer__stage{{/focusmode}}{{^focusmode}}rounded{{/focusmode}}" data-region="player-stage">
            <video
                class="{{#focusmode}}modernvideoplayer__video{{/focusmode}}{{^focusmode}}w-100{{/focusmode}}"
                preload="metadata"
                data-region="video"
                aria-label="{{#str}}playerlabel, modernvideoplayer{{/str}}"
                {{#posterurl}}poster="{{posterurl}}"{{/posterurl}}
                {{#allowfullscreen}}playsinline{{/allowfullscreen}}>
                {{#hasvideo}}
                    <source src="{{videourl}}">
                {{/hasvideo}}
                {{#captions}}
                    <track kind="subtitles" src="{{src}}" srclang="{{srclang}}" label="{{label}}"{{#default}} default{{/default}}>
                {{/captions}}
                {{#haschapters}}
                    <track kind="chapters" src="{{chapterurl}}" srclang="{{defaultcaptionlang}}" label="{{chapterlabel}}" default>
                {{/haschapters}}
            </video>
                <div
                    class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center p-3"
                    data-region="resume-overlay"
                    style="background: linear-gradient(135deg, rgba(7, 15, 28, 0.84), rgba(10, 25, 47, 0.68)); backdrop-filter: blur(8px);">
                    <div class="text-center text-white p-4 rounded-4 shadow-lg" style="max-width: 28rem; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);">
                        <div class="text-uppercase small fw-semibold mb-2" data-region="resume-eyebrow" style="letter-spacing: .12em; color: rgba(191, 219, 254, 0.9);">{{#str}}resumeplayback, modernvideoplayer{{/str}}</div>
                        <h3 class="h4 mb-2" data-region="resume-heading">{{#str}}resumepromptheading, modernvideoplayer{{/str}}</h3>
                        <p class="mb-4 text-white-50" data-region="resume-subtitle">{{#str}}resumepromptbody, modernvideoplayer{{/str}}</p>
                        <div class="d-flex flex-column flex-sm-row justify-content-center gap-2">
                            <button type="button" class="btn btn-outline-light px-4" data-action="resume-playback">{{#str}}resumeplayback, modernvideoplayer{{/str}}</button>
                            <button type="button" class="btn btn-outline-light px-4" data-action="restart-playback">{{#str}}startfrombeginning, modernvideoplayer{{/str}}</button>
                            {{#shownextactivityoverlay}}
                            <button type="button" class="btn btn-primary px-4 d-none" data-action="resume-next-activity">
                                {{#str}}nextactivitycontinue, modernvideoplayer{{/str}}
                            </button>
                            {{/shownextactivityoverlay}}
                        </div>
                    </div>
                </div>
                {{#shownextactivityoverlay}}
                <div
                    class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center p-3"
                    data-region="next-activity-overlay"
                    style="background: linear-gradient(135deg, rgba(7, 15, 28, 0.84), rgba(10, 25, 47, 0.68)); backdrop-filter: blur(8px);">
                    <div class="text-center text-white p-4 rounded-4 shadow-lg" style="max-width: 28rem; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);">
                        <div class="text-uppercase small fw-semibold mb-2" style="letter-spacing: .12em; color: rgba(191, 219, 254, 0.9);">{{#str}}nextactivity, modernvideoplayer{{/str}}</div>
                        <h3 class="h4 mb-2" data-region="next-activity-name">{{nextactivityname}}</h3>
                        <p class="mb-4 text-white-50">{{#str}}nextactivitybody, modernvideoplayer{{/str}}</p>
                        <div class="d-flex flex-column flex-sm-row justify-content-center gap-2" data-region="next-activity-actions">
                            <a class="btn btn-primary px-4" href="{{nextactivityurl}}" data-action="next-activity-go">
                                {{#str}}nextactivitycontinue, modernvideoplayer{{/str}}
                            </a>
                            <button type="button" class="btn btn-outline-light px-4" data-action="next-activity-replay">{{#str}}nextactivityreplay, modernvideoplayer{{/str}}</button>
                        </div>
                    </div>
                </div>
                {{/shownextactivityoverlay}}
                {{>mod_modernvideoplayer/controls}}
            </div>
        </div>
    </div>
    {{#hascaptions}}
        <div class="modernvideoplayer-transcript card mt-3 d-none" data-region="transcript-panel" aria-label="{{#str}}transcript, modernvideoplayer{{/str}}">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h2 class="h6 mb-0">{{#str}}transcript, modernvideoplayer{{/str}}</h2>
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary d-none" data-action="download-transcript">{{#str}}transcriptdownload, modernvideoplayer{{/str}}</button>
                    <button type="button" class="btn-close" data-action="close-transcript" aria-label="{{#str}}toggletranscript, modernvideoplayer{{/str}}"></button>
                </div>
            </div>
            <div class="card-body modernvideoplayer-transcript__body" data-region="transcript-body" tabindex="0">
                <p class="text-muted mb-0" data-region="transcript-empty">{{#str}}transcriptloading, modernvideoplayer{{/str}}</p>
                <ol class="list-unstyled mb-0 d-none" data-region="transcript-list"></ol>
            </div>
        </div>
    {{/hascaptions}}
    {{#haschapters}}
        <div class="modernvideoplayer-chapters card mt-3 d-none" data-region="chapters-panel" aria-label="{{#str}}chapterlist, modernvideoplayer{{/str}}">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h2 class="h6 mb-0">{{#str}}chapterlist, modernvideoplayer{{/str}}</h2>
                <button type="button" class="btn-close" data-action="close-chapters" aria-label="{{#str}}togglechapters, modernvideoplayer{{/str}}"></button>
            </div>
            <div class="card-body modernvideoplayer-chapters__body" data-region="chapters-body" tabindex="0">
                <p class="text-muted mb-0" data-region="chapters-empty">{{#str}}chaptersunavailable, modernvideoplayer{{/str}}</p>
                <ol class="list-unstyled mb-0 d-none" data-region="chapters-list"></ol>
            </div>
        </div>
    {{/haschapters}}
    <div class="modernvideoplayer-shortcuts-help modal-backdrop-modernvideoplayer d-none" data-region="shortcuts-help" role="dialog" aria-modal="true" aria-labelledby="modernvideoplayer-shortcuts-help-title">
        <div class="modernvideoplayer-shortcuts-help__dialog card shadow-lg">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h2 class="h6 mb-0" id="modernvideoplayer-shortcuts-help-title">{{#str}}shortcutshelptitle, modernvideoplayer{{/str}}</h2>
                <button type="button" class="btn-close" data-action="close-shortcuts-help" aria-label="{{#str}}shortcutshelpclose, modernvideoplayer{{/str}}"></button>
            </div>
            <div class="card-body">
                <dl class="row mb-0 modernvideoplayer-shortcuts-help__list">
                    <dt class="col-4 col-sm-3"><kbd>Space</kbd> / <kbd>K</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_playpause, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>J</kbd> / <kbd>←</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_rewind, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>L</kbd> / <kbd>→</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_forward, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>↑</kbd> / <kbd>↓</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_volume, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>M</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_mute, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>F</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_fullscreen, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>C</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_captions, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>0</kbd>…<kbd>9</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_seekpercent, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>&lt;</kbd> / <kbd>&gt;</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_speed, modernvideoplayer{{/str}}</dd>
                    <dt class="col-4 col-sm-3"><kbd>?</kbd></dt>
                    <dd class="col-8 col-sm-9">{{#str}}shortcut_help, modernvideoplayer{{/str}}</dd>
                </dl>
            </div>
        </div>
    </div>
    {{#focusmode}}
            </div>
        </div>
    {{/focusmode}}
</div>
