<template>
	<app-container>
		<v-row>
			<v-col cols="12" sm="auto" class="d-flex">
				<h1 class="display-2">Blog</h1>

				<v-spacer />

				<v-btn
					v-if="$vuetify.breakpoint.xsOnly"
					dark fab small
					color="light-blue lighten-1"
					@click="toggleMobileSearch"
					class="elevation-2"
				>
					<v-icon>search</v-icon>
				</v-btn>
			</v-col>

			<v-spacer />

			<v-col cols="12" sm="auto">
				<v-text-field
					v-if="$vuetify.breakpoint.smAndUp"
					v-model="searchText"
					label="Search"
					outlined
					append-icon="search"
				/>
			</v-col>
		</v-row>

		<v-expand-transition>
			<v-row v-show="$vuetify.breakpoint.xsOnly && showMobileSearch">
				<v-col class="pt-0">
					<v-text-field v-model="searchText" placeholder="Search" ref="mobileSearchField" single-line outlined />
				</v-col>
			</v-row>
		</v-expand-transition>

		<v-row class="justify-center">
			<v-col v-for="(blogPost, i) in filteredPosts" :key="i" cols="12" sm="10" md="6" lg="5">
				<router-link :to="'/blog/post/' + blogPost.key">
					<v-card>
						<v-card-title>
							<v-row class="align-center">
								<v-col cols="auto" class="mr-3"><img v-if="blogPost.image" :src="blogPost.image" width="64" height="64"></v-col>
								<v-col class="title">{{ blogPost.title }}</v-col>
							</v-row>
						</v-card-title>

						<v-divider />

						<v-card-text>{{ blogPost.desc }}...</v-card-text>
					</v-card>
				</router-link>
			</v-col>
		</v-row>
	</app-container>
</template>

<script>
import blogPosts from '@/assets/blogPosts'

export default {
	data() {
		return {
			posts: blogPosts.map(bPost => {
				return {
					key: bPost.key,
					...bPost.module.attributes,
				}
			}),
			showMobileSearch: false,
			searchText: '',
		}
	},

	computed: {
		filteredPosts() {
			return this.posts.filter(post => {
				return this.searchText === '' || post.title.toLowerCase().includes(this.searchText.toLowerCase()) || post.desc.toLowerCase().includes(this.searchText.toLowerCase())
			})
		},
	},

	methods: {
		toggleMobileSearch() {
			this.showMobileSearch = !this.showMobileSearch
			this.$nextTick(() => this.$refs.mobileSearchField.focus())
		},
	},
}
</script>
