@extends('base')
@section('body')
<header>
    <a href="/">Episodenübersicht</a>
</header>
<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>Topics</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="Zu 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">
                    Topics (Tabinhalt)
                </h2>
                <ol>
                    @foreach($topics as $topic)
                        <li>
                            {{ implode(', ', $topic) }}
                        </li>
                    @endforeach
                </ol>

            </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>Hauptfarben</h2>
                    <p>
                        Hauptfarbe pro Frame.
                    </p>
                </div>
                <div class="track-viz">
                    {!! $dom_color !!}
                </div>
            </div>
            <div class="track">
                <div class="track-ctrl">
                    <h2>Anzahl Worte</h2>
                    <p>Total Worte: {{ array_slice($subdata['word_count'], -1)[0] }}<br>Worte pro Minute: {{ number_format($wpm) }}</p>
                    <label>
                        Segmente: <input type="number" min="1" max="20" value="1" id="topic-track-worte-ctrl">
                    </label>
                </div>
                <div class="track-viz" id="words-count-track" data-time="{{ implode(',', $subdata['time']) }}" data-words="{{ implode(',', $subdata['word_count']) }}" ></div>
            </div>
            <div class="track">
                <div class="track-ctrl">
                    <h2>Sentiment</h2>
                    <ul id="sentiments-list">
                        <li><span class="pos">1</span> = Positiv ({{ round($senti_subdata['verteilung_perc']['positive']) }}%)</li>
                        <li><span class="neut">0</span> = Neutral ({{ round($senti_subdata['verteilung_perc']['neutral']) }}%)</li >
                        <li><span class="neg">-1</span> = Negativ ({{ round($senti_subdata['verteilung_perc']['negative']) }}%)</li></p>
                </div>
                <div class="track-viz" id="sentiment-track" data-time="{{ implode(',', $senti_subdata['time']) }}" data-sentiments="{{ $senti_subdata['data'] }}" data-weights="{{ $senti_subdata['weights'] }}"></div>
            </div>
        </div>
    </div>
</main>
@endsection