<template>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Channel</th>
                <th>Seconds</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody>
            <tr v-cloak v-for="video in Videos" :key=video.ID class="Grid_Small_Text">
                <td>{{video.ID}}</td>
                <td>{{video.Title}}</td>
                <td>{{video.Channel}}</td>
                <td>{{video.Seconds}}</td>
                <td>{{video.Tags}}</td>
            </tr>
        </tbody>
    </table>
</template>

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

// Vue class for keeping state of the videos.
export default Vue.extend({
    data() {
        return {
            Videos: Array<Dyt.Video>()
        }
    },

    mounted (){
        Dyt.search_videos("").then(v => this.Videos = v);
    },
});
</script>

<style>
    .Grid_Small_Text {
        font-size: 0.7em;
    }
</style>

