<script context="module">
 export async function load({ params }) {
     return {
         props: {
             video_id: params.vid,
         }
     };
 }
</script>

<script>
 import {
     Col,
     Row,
 } from 'sveltestrap';

 import { videos } from '../stores/videos.js';
 import VideoThumb from '../components/VideoThumb.svelte';

 export let video_id = 0;
</script>

{#if $videos.idx_videos[video_id]}
    <Row class="mt-3 mb-5">
        <Col>
        <div class="ratio ratio-16x9 mb-3">
            <video controls autoplay poster={$videos.idx_videos[video_id].thumb}>
                <source src={$videos.idx_videos[video_id].url} type="video/mp4">
            </video>
        </div>
        {#if $videos.idx_videos[video_id].title}
            <h1>
                {$videos.idx_videos[video_id].title}
            </h1>
        {/if}
        {#if $videos.idx_videos[video_id].description}
            <p>
                {@html $videos.idx_videos[video_id].description}
            </p>
        {/if}
        <div id="commento"></div>
        </Col>

        <Col md="3" lg="4">
        {#if $videos.idx_videos[video_id].next && $videos.idx_videos[$videos.idx_videos[video_id].next]}
            <Row>
                <Col xs="auto">
                <h4>Prochaine vidéo</h4>
                </Col>
                <Col>
                <hr>
                </Col>
            </Row>
            <VideoThumb video={$videos.idx_videos[$videos.idx_videos[video_id].next]} />
            <div class="mt-3"></div>
        {/if}
        <Row>
            <Col xs="auto">
            <h4>Autres vidéos</h4>
            </Col>
            <Col>
            <hr>
            </Col>
        </Row>
        {#each $videos.videos as video (video.id)}
            {#if video.id != $videos.idx_videos[video_id].next && video.id != video_id}
                <VideoThumb {video} />
            {/if}
        {/each}
        </Col>
    </Row>
{:else}
    Erreur 404
{/if}
