<template>
    <div>
        <input id="searchbox0" class="searchbox" type="text" v-model="searchbox_str" placeholder="Search String goes here, for example: >5m,c++"/>
        <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 from "vue";
import * as _ from "lodash";
import * as Dyt from "../dumbyt";

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

    // Manually attaching functions to watchers of data.
    watch: {
        // Searchbox updater.
        searchbox_str (s: string) {
            var v = _.debounce((s) => {
                Dyt.search_videos(s).then(e => this.Videos = e);
            })
            v(s);
        }
    },

    // Ugh, vue doesn't have async support for computed, wow ...
    mounted() { Dyt.search_videos("").then(e => this.Videos = e ); }
});
</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;
    }

    .searchbox {
        font-size: 1.2em;
        max-width: 70em;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
    }
</style>
