Vue.component("blog-list",{props:{showPaging:{type:Boolean,"default":!0},itemLimit:{type:Number,"default":10},searchQuery:String,defaultKeywords:String,categories:Array,tagQuery:String,author:String,orderBy:String,showImages:{type:Boolean,"default":!0}},data(){return{}},computed:{posts(){return this.$store.state.results.search},totalResults(){return this.$store.state.results.totalCount},skipResults(){return this.$store.state.query.skip},loading(){return this.$store.state.loading},error(){return this.$store.state.error}},methods:{loadPosts(){this.$store.dispatch("init",{context:{url:"/api/blog/search"},query:{userKeywords:this.searchQuery,defaultKeywords:this.defaultKeywords,itemLimit:this.itemLimit,orderBy:[this.orderBy],otherSearchOptions:{categories:this.categories,tagQuery:this.tagQuery,author:this.author}}})},getFormattedDateString(post){let date=new Date(post.date);return new Intl.DateTimeFormat("en-US",{timeZone:"UTC"}).format(date)},getCategorySearchLink(category){return"/blog?category="+encodeURIComponent(category)},changePage(skipResults){this.$store.dispatch("skipResults",skipResults)}},mounted(){this.loadPosts()},template:`
<div>
    <div v-if="!loading && !error && posts.length">
        <div v-for="(post, index) in posts" class="card border-0 bg-transparent">
            <div class="row no-gutters justify-content-center align-items-center">
                <div v-if="showImages" class="col-12 col-md-4 mb-3 mb-md-0 pr-md-4">
                    <a :href="post.url"><img :src="post.featureImageUrl" :alt="post.title" class="img-fluid" /></a>
                </div>
                <div class="col-12" :class="{'col-md-8': showImages}">
                    <div class="card-body p-0">
                        <h3 class="card-title mb-2"><a :href="post.url">{{ post.title }}</a></h3>
                        <p class="card-text mb-1 font-weight-bold">
                            <span v-if="post.author"><a :href="post.author.url">{{ post.author.firstName }} {{ post.author.lastName }}</a> on </span>
                            <span>{{ getFormattedDateString(post) }}</span>
                        </p>
                        <p class="card-text caption mb-1" style="font-style:normal">
                            <strong>Categories:</strong>
                            <span v-for="(category, index) in post.categories">
                                <a :href="getCategorySearchLink(category)">{{ category }}</a><span v-if="index !== post.categories.length - 1">, </span>
                            </span>
                        </p>
                        <p class="card-text">{{ post.description }}</p>
                    </div>
                </div>
            </div>
            <hr v-if="index < posts.length - 1" class="my-5" />
        </div>
	    <search-paging v-if="showPaging" class="my-5"
				    :total-rows="totalResults"
				    :start-row="skipResults"
				    :row-limit="itemLimit"
				    :page-limit="5"
				    @change-page="changePage($event)"></search-paging>
    </div>
    <loading v-else-if="loading" />
    <div v-else-if="error" class="text-center">Sorry, there was a problem getting results. Please try again later.</div>
    <div v-else-if="!posts.length" class="text-center">No results found.</div>
</div>`});$(".blog-list.content-block").each(function(){new Vue({el:this,store:makeSearchComponentStore()})});
let blogSearchEl=document.getElementById("blog-search");if(blogSearchEl){let blogSearchVue=new Vue({el:blogSearchEl,router:Daktronics.Components.GetVueRouter(),store:makeSearchComponentStore(),data:{allCategoriesLabel:"All Blog Categories",category:null},computed:{searchQuery(){return this.$store.state.query.userKeywords},categories(){let categories=[];return this.category&&categories.push(this.category),categories},categoryButtonLabel(){let label=this.allCategoriesLabel;return this.category&&(label=this.category),label}},methods:{applyCategoryFilter(category){this.category=category;this.$store.dispatch("setOtherSearchOptions",{categories:this.categories});this.updateQueryString()},updateUserSearchQuery(keywords){this.$store.dispatch("newKeywordQuery",keywords).then(()=>{$("#blog-search input[type=text]").get(0).blur()})},restartSearch(){this.$store.dispatch("reset")},categoryIsSelected(category){return this.category===category},updateQueryString(){let newQueryString=Object.assign({},this.$route.query);this.category?newQueryString.category=this.category:delete newQueryString.category;this.$router.replace({query:newQueryString})}},created(){this.$store.commit("setRouter",this.$router);const query=this.$route.query;query.category&&(this.category=query.category)}})};