@extends('base')
@section('body')
<main>
    <div id="video" data-urn="{{ $mediacomposition['chapterUrn'] }}">
        <video-js id="my-player" class="pillarbox-js" controls></video-js>
    </div>
    <div id="tabs">
        <div class="tablist">
            <h1 class="visually-hidden">
                Analysen (Tab-Liste)
            </h1>
            <p class="visually-hidden">
                Hilfe zur Tablistensteuerung: Über die Tablistensteuerung kann die Sichtbarkeit der jeweiligen
                Tabinhalte umgeschaltet werden, welche sich unterhalb der Tablistensteuerung befinden.
            </p>
            <fieldset class="controls">
                <legend class="visually-hidden">Tablistensteuerung</legend>
                <div class="control">
                    <input checked class="visually-hidden" id="tablist_panel_episode" name="tablist" type="radio" />
                    <label for="tablist_panel_episode"><span class="visually-hidden">Zeige Tabinhalt
                        </span>Episode</label>
                </div>
                <div class="control">
                    <input class="visually-hidden" id="tablist_panel_transcript" name="tablist" type="radio" />
                    <label for="tablist_panel_transcript"><span class="visually-hidden">Zeige Tabinhalt
                        </span>Transkript</label>
                </div>
                <div class="control">
                    <input class="visually-hidden" id="tablist_panel_terms" name="tablist" type="radio"
                         /><label for="tablist_panel_terms"><span
                            class="visually-hidden">Zeige Tabinhalt
                        </span>Dokumentbegriffe</label>
                </div>
            </fieldset>
            <div class="panel" id="tablist_panel_episode_panel">
                <h2 class="visually-hidden">
                    Episode (Inhalt)
                </h2>
                <dl>
                    <dt>Titel</dt>
                    <dd>{{ $title }}</dd>
                    <dt>Lead</dt>
                    <dd>{{ $mediacomposition['episode']['lead'] }}</dd>
                    <dt>Publikationsdatum</dt>
                    <dd>{{ date('d.m.Y H:i', strtotime($mediacomposition['episode']['publishedDate'])) }}</dd>
                </dl>
            </div>
            <div class="panel" id="tablist_panel_transcript_panel" hidden>
                <h2 class="visually-hidden">
                    Transkript (Inhalt)
                </h2>
                <div class="inner">
                <ol id="transcript">
                    @foreach($subtitles['cues'] as $cue)
                    <li>
                        <div>
                            <a title="Zur Zeitpunkt {{ $cue['start']}} springen." data-start="{{ $cue['start']}}">{{ gmdate('H:i:s', $cue['start'])}}</a>
                        </div>
                        <div>
                            {!! $cue['text'] !!}
                        </div>
                    </li>
                    @endforeach
                </ol>
                </div>
            </div>
            <div class="panel" id="tablist_panel_terms_panel" hidden>
                <h2 class="visually-hidden">
                    Begriffe (Tabinhalt)
                </h2>

            </div>
        </div>

    </div>
    <div id="timeline">
        <div id="timeline-bar">
            <div id="timeline-bar-ctrl"></div>
            @for($i = 0; $i <= 10; $i++)
                <span>{{ gmdate('H:i:s', $i * $durationSteps) }}</span>
            @endfor
        </div>
        <div id="tracks">
            <div class="track">
                <div class="track-ctrl">
                    <h2>Anzahl Worte</h2>
                    <p></p>
                </div>
                <div class="track-viz"></div>
            </div>
            <div class="track">
                <div class="track-ctrl">
                    <h2>Sentiment</h2>
                    <p></p>
                </div>
                <div class="track-viz"></div>
            </div>
            <div class="track">
                <div class="track-ctrl">
                    <h2>Anzahl Worte</h2>
                    <p></p>
                </div>
                <div class="track-viz"></div>
            </div>
            <div class="track">
                <div class="track-ctrl">
                    <h2>Anzahl Worte</h2>
                    <p></p>
                </div>
                <div class="track-viz"></div>
            </div>
        </div>
    </div>
</main>
@endsection