@let position = formatTime(timeline().value());
@let positionTitle = timeline().segmentTitle();
<span class="player-controls__time player-controls__time--current">{{
    position
}}</span>
@if (seekable()) {
    <div
        #bar
        class="player-controls__timeline-bar"
        [class.player-controls__timeline-bar--disabled]="!canSeek()"
        (pointermove)="label().move($event)"
        (pointerleave)="label().clear()"
    >
        <div class="player-controls__timeline-track" aria-hidden="true">
            @for (segment of timeline().segments(); track $index) {
                <div
                    class="player-controls__timeline-segment"
                    [class.player-controls__timeline-segment--titled]="
                        segment.title !== null
                    "
                    [style.left.%]="segment.startPercent"
                    [style.width]="segment.width"
                    [attr.data-segment-title]="segment.title"
                >
                    <div
                        class="player-controls__timeline-fill"
                        [style.width.%]="timeline().fillPercent(segment)"
                    ></div>
                </div>
                @if (segment.separatorLeft; as separatorLeft) {
                    <div
                        class="player-controls__timeline-separator"
                        [style.left]="separatorLeft"
                    ></div>
                }
            }
        </div>
        @if (canSeek()) {
            <div
                class="player-controls__timeline-knob"
                [style.left.%]="timeline().progress()"
                aria-hidden="true"
            ></div>
        }
        @if (label().markerPercent() !== null) {
            <div
                class="player-controls__timeline-marker"
                [style.left.%]="label().markerPercent()"
                aria-hidden="true"
            ></div>
        }
        @if (label().text(); as text) {
            <div
                #labelElement
                class="player-controls__timeline-label"
                [style.--anchor-x.%]="label().percent()"
                data-test-id="player-controls-timeline-label"
                aria-hidden="true"
            >
                @if (text.title) {
                    <span
                        class="player-controls__timeline-label-title"
                        data-test-id="player-controls-timeline-label-title"
                        >{{ text.title }}</span
                    >
                }
                <span
                    class="player-controls__timeline-label-time"
                    data-test-id="player-controls-timeline-label-time"
                    >{{ text.time }}</span
                >
            </div>
        }
        <input
            class="player-controls__slider player-controls__slider--timeline"
            [style.--slider-progress.%]="timeline().progress()"
            type="range"
            min="0"
            [max]="timeline().duration()"
            [value]="timeline().value()"
            [disabled]="!canSeek()"
            [attr.aria-label]="
                'EMBEDDED_MPV.PLAYER.PLAYBACK_POSITION' | translate
            "
            [attr.aria-valuetext]="
                positionTitle
                    ? ('EMBEDDED_MPV.PLAYER.TIMELINE_SEGMENT_POSITION'
                      | translate: { title: positionTitle, time: position })
                    : position
            "
            (focus)="label().focus($event)"
            (blur)="label().blur()"
            (keydown)="label().keydown($event)"
            (input)="scrubInput.emit($event)"
            (change)="scrubCommit.emit($event)"
        />
    </div>
} @else {
    <div class="player-controls__timeline-spacer"></div>
}
@if (canSeek() && remaining(); as remaining) {
    <span
        class="player-controls__time player-controls__time--end"
        data-test-id="player-controls-remaining-time"
        >{{ remaining }}</span
    >
} @else if (isLive()) {
    <span
        class="player-controls__live-badge"
        role="img"
        [attr.aria-label]="'EMBEDDED_MPV.PLAYER.LIVE_STREAM' | translate"
    >
        <span class="player-controls__live-dot" aria-hidden="true"></span>
        {{ 'EMBEDDED_MPV.PLAYER.LIVE_BADGE' | translate }}
    </span>
} @else {
    <span
        class="player-controls__time player-controls__time--end"
        role="img"
        [attr.aria-label]="'EMBEDDED_MPV.PLAYER.DURATION_UNKNOWN' | translate"
        >{{ unknownTime }}</span
    >
}
@if (recordingStatus(); as status) {
    <div
        class="player-controls__recording-status"
        [class.player-controls__recording-status--active]="recording()"
        [attr.aria-live]="recording() ? 'off' : 'polite'"
    >
        <mat-icon>{{
            recording() ? 'fiber_manual_record' : 'check_circle'
        }}</mat-icon>
        <span>{{ status }}</span>
    </div>
}