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

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

<Container fluid class="flex-fill my-3">
    <Row>
        <Col xs="auto">
        <h3>Toutes les vidéos</h3>
        </Col>
        <Col>
        <hr>
        </Col>
    </Row>
    <Row cols={{sm: 2, md: 3, lg: 4}}>
        {#each $videos.videos as video (video.id)}
            <Col>
            <VideoThumb {video} />
            </Col>
        {/each}
    </Row>
</Container>
