<template lang="pug">
    .container
        .search-bar
            .search-icon
                MagnifyIcon(title="")
            .search-field
                input(type="text" placeholder="Tv series' name")
        .shows
            Spinner(v-if="isFetching" size="big")
            .show(v-else v-for="show in shows")
                router-link(:to=" {name: 'Show', params: { id: show.tvdbId }}")
                    .show-cover
                        img(:src="defaultCover")
                .show-title
                    div {{ show.seriesName }}

</template>

<script>
    import MagnifyIcon from 'vue-material-design-icons/magnify.vue';
    import Spinner from '../../components/Spinner'

    export default {
        name: 'Search',
        data() {
            return {
                isFetching: true,
                defaultCover: '/static/shows/default.png',
                shows: null
            }
        },
        components: {
            MagnifyIcon,
            Spinner
        },
        async created() {
            const url = 'http://'+this.$domain+'/api/Search/Created';
            const request = await fetch(url, {
                method: 'GET',
                credentials: 'include'
            });
            const response = await request.json();
            this.shows = response.data;
            this.isFetching = false;
        }
    }
</script>

<style scoped>

    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        overflow: auto;
    }

    .search-bar {
        margin-top: 3rem;
        display: flex;
        flex-flow: row;
    }

    .search-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3.5rem;
        height: 3.6rem;
        background-color: var(--dec-10);
    }

    input[type="text"] {
        border: none;
        outline: none;
        height: 2rem;
        width: 70rem;
        background-color: var(--bg-8);
        padding: .8rem;
        color: var(--bg-0);
        font-size: 0.9rem;
    }

    .shows {
        width: 90%;
        margin-top: 5rem;
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .show {
        width: 20%;
        height: 20rem;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .show > * {
        cursor: pointer;
    }

    .show-cover > img {
        width: 200px;
        height: 280px;
        z-index: -999;
        opacity: 0.8;
    }

    .show-title {
        z-index: 1;
        font-size: 10px;
        width: 200px;
        overflow: hidden;
        height: 2rem;
        margin-top: -1.4rem;
        background-color: var(--bg-9);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
    }

</style>