<template>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th>Tags</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr v-cloak v-for="channel in Channels" :key=channel.ID class="Grid_Small_Text">
                <td>{{channel.ID}}</td>
                <td>{{channel.Title}}</td>
                <td>{{channel.Description}}</td>
                <td>{{channel.User_Tags}}</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</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: {
        Channels: {
            type: Array,
        } as PropOptions<Dyt.Channel[]>,
    }
});
</script>

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