<template>
    <div>
        <div class="grid-x large-up-6">
            <div v-for="video in Videos" :key="video.ID" class="cell">
                <div class="card ytcard">
                    <a :href="video.URL"><img :src="video.Thumbnail"></a>
                    <div class="card-section description">
                        <div class="descriptiontitle">{{ video.Title }}</div>
                        <div class="descriptionchannel">{{ video.Channel }}</div>
                    </div>
                </div>
            </div>
        </div >
    </div>
</template>

<script lang="ts">
import Vue, {PropOptions} from "vue";
import * as Dyt from "../dumbyt";

// Vue class for keeping state of the videos.
export default Vue.extend({
    props: {
        Videos: {
            type: Array,
        } as PropOptions<Dyt.Video[]>,
    }
});
</script>

<style scoped>
    .ytcard {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color:#ddd9d4;
        margin: 6px 2px 6px;
    }

    .description {
        padding: 7px 5px 7px;
    }

    .descriptiontitle {
        font-size: 14px;
        padding-bottom:10px;
    }

    .descriptionchannel {
        font-size: 10px;
        text-align: right;
    }
</style>
