{{!
    @template mod_modernvideoplayer/controls

    Playback controls overlay for the modern video player.

    Context variables required for this template:
    * showcontroltext - whether to show button labels alongside icons (bool)
    * hascaptions - whether caption tracks are available (bool)
    * haschapters - whether a chapter track is available (bool)

    Example context (json):
    {
        "showcontroltext": true,
        "hascaptions": false,
        "haschapters": false
    }
}}
<div class="modernvideoplayer-controls position-absolute start-0 end-0 bottom-0 p-3 p-md-4 {{^showcontroltext}}modernvideoplayer-controls--icononly{{/showcontroltext}}" data-region="controls-shell">
    <div class="modernvideoplayer-controls__surface">
        <div class="modernvideoplayer-status" aria-label="{{#str}}progresslabel, modernvideoplayer{{/str}}">
            <div class="modernvideoplayer-status__item">
                <div class="d-flex align-items-end justify-content-between gap-3 flex-wrap">
                    <div class="modernvideoplayer-status__headline" data-region="playback-time">0:00 / 0:00</div>
                    <div class="modernvideoplayer-status__meta" data-region="percent-complete">0%</div>
                    <div class="modernvideoplayer-status__badge d-none" data-region="completion-badge" role="status" aria-label="{{#str}}completed, modernvideoplayer{{/str}}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.485 1.929a1 1 0 0 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L6.5 9.243z"/></svg>
                        <span>{{#str}}completed, modernvideoplayer{{/str}}</span>
                    </div>
                </div>
                <div class="progress modernvideoplayer-status__track position-relative" aria-label="{{#str}}progresslabel, modernvideoplayer{{/str}}">
                    <div class="progress-bar modernvideoplayer-status__fill modernvideoplayer-status__fill--buffered position-absolute top-0 start-0 h-100" role="progressbar" data-region="buffered-progress" style="width: 0%" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
                    <div class="progress-bar modernvideoplayer-status__fill modernvideoplayer-status__fill--verified position-absolute top-0 start-0 h-100" role="progressbar" data-region="verified-progress" style="width: 0%" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
                    <button type="button" class="modernvideoplayer-status__thumb d-none" data-region="timeline-thumb" aria-hidden="true" tabindex="-1"></button>
                    <div class="modernvideoplayer-chapters__pins position-absolute top-0 start-0 w-100 h-100 pointer-events-none" data-region="chapters-pins" aria-hidden="true"></div>
                </div>
            </div>
        </div>
        <div class="modernvideoplayer-controls__bar d-flex align-items-center justify-content-between gap-3 flex-wrap mt-3">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3" data-action="toggle-play" aria-label="{{#str}}play, modernvideoplayer{{/str}}">
                    <span class="modernvideoplayer-controls__icon" data-region="play-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/></svg></span>
                    <span class="modernvideoplayer-controls__text" data-region="play-label">{{#str}}play, modernvideoplayer{{/str}}</span>
                </button>
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3" data-action="toggle-mute" aria-label="{{#str}}mute, modernvideoplayer{{/str}}">
                    <span class="modernvideoplayer-controls__icon" data-region="mute-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/><path d="M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/></svg></span>
                    <span class="modernvideoplayer-controls__text" data-region="mute-label">{{#str}}mute, modernvideoplayer{{/str}}</span>
                </button>
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3" data-action="restart-playback" aria-label="{{#str}}startfrombeginning, modernvideoplayer{{/str}}">
                    <span class="modernvideoplayer-controls__icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/></svg></span>
                    <span class="modernvideoplayer-controls__text">{{#str}}startfrombeginning, modernvideoplayer{{/str}}</span>
                </button>
            </div>
            <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3 d-none" data-action="toggle-captions" aria-label="{{#str}}togglecaptions, modernvideoplayer{{/str}}" aria-pressed="false">
                    <span class="modernvideoplayer-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M1.75 3A1.75 1.75 0 0 0 0 4.75v6.5C0 12.216.784 13 1.75 13h12.5A1.75 1.75 0 0 0 16 11.25v-6.5A1.75 1.75 0 0 0 14.25 3zM1 4.75A.75.75 0 0 1 1.75 4h12.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75z"/><path d="M3 8.75a2 2 0 0 1 3.71-1.042.5.5 0 0 0 .854-.518A3 3 0 1 0 7.53 9.87a.5.5 0 0 0-.833-.554A2 2 0 0 1 3 8.75m6 0a2 2 0 0 1 3.71-1.042.5.5 0 0 0 .854-.518A3 3 0 1 0 13.53 9.87a.5.5 0 0 0-.833-.554A2 2 0 0 1 9 8.75"/></svg></span>
                    <span class="modernvideoplayer-controls__text" data-region="captions-label">{{#str}}captionsoff, modernvideoplayer{{/str}}</span>
                </button>
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3 d-none" data-action="toggle-transcript" aria-label="{{#str}}toggletranscript, modernvideoplayer{{/str}}" aria-pressed="false">
                    <span class="modernvideoplayer-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/><path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/></svg></span>
                    <span class="modernvideoplayer-controls__text">{{#str}}transcript, modernvideoplayer{{/str}}</span>
                </button>
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3 d-none" data-action="toggle-chapters" aria-label="{{#str}}togglechapters, modernvideoplayer{{/str}}" aria-pressed="false">
                    <span class="modernvideoplayer-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M2.5 3.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5M3 6.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zM2.5 10a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5M3 12.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1z"/></svg></span>
                    <span class="modernvideoplayer-controls__text">{{#str}}chapterlist, modernvideoplayer{{/str}}</span>
                </button>
                <div class="modernvideoplayer-speedmenu position-relative d-inline-block">
                    <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3 d-none" data-action="toggle-speed" aria-label="{{#str}}playbackspeed, modernvideoplayer{{/str}}" aria-haspopup="true" aria-expanded="false">
                        <span class="modernvideoplayer-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8M3 8a5 5 0 1 1 10 0A5 5 0 0 1 3 8"/><path d="M8 5.5a.5.5 0 0 1 .5.5v2.3l1.4.81a.5.5 0 1 1-.5.87l-1.65-.95A.5.5 0 0 1 7.5 8.5V6a.5.5 0 0 1 .5-.5"/></svg></span>
                        <span class="modernvideoplayer-controls__text" data-region="speed-current">1x</span>
                    </button>
                    <div class="dropdown-menu modernvideoplayer-speedmenu__list d-none" data-region="speed-menu" role="menu"></div>
                </div>
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3" data-action="toggle-shortcuts-help" aria-label="{{#str}}shortcutshelp, modernvideoplayer{{/str}}" aria-pressed="false">
                    <span class="modernvideoplayer-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/></svg></span>
                    <span class="modernvideoplayer-controls__text">{{#str}}shortcutshelp, modernvideoplayer{{/str}}</span>
                </button>
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3 d-none" data-action="toggle-pip" aria-label="{{#str}}pip, modernvideoplayer{{/str}}" aria-pressed="false">
                    <span class="modernvideoplayer-controls__icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5zM1.5 3a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z"/><path d="M8 8.5A.5.5 0 0 1 8.5 8h5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z"/></svg></span>
                    <span class="modernvideoplayer-controls__text">{{#str}}pip, modernvideoplayer{{/str}}</span>
                </button>
                <button type="button" class="btn btn-sm modernvideoplayer-controls__button rounded-pill px-3" data-action="toggle-fullscreen" aria-label="{{#str}}fullscreen, modernvideoplayer{{/str}}">
                    <span class="modernvideoplayer-controls__icon" data-region="fullscreen-icon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/></svg></span>
                    <span class="modernvideoplayer-controls__text">{{#str}}fullscreen, modernvideoplayer{{/str}}</span>
                </button>
            </div>
        </div>
    </div>
</div>
