<template>
	<ul class="w-full grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 lg:gap-8">
		<movie-list-item v-for="(movie, index) in storedMovies" :movie="movie" @click="$emit('onClickMovie', movie, index)"/>
	</ul>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MovieListItem from "./MovieListItem.vue";
import MovieListComponentMixin from "./mixins/MovieListComponentMixin";

export default defineComponent({
	components: {
		MovieListItem
	},
	methods: {
		onModalClosed() {
			let parentPath = this.$route.path.split('/').slice(0, -1).join('/');
            this.$router.push({ path: parentPath, query: this.$route.query });
		}
	},
	mixins: [MovieListComponentMixin]
});
</script>
