<template>
  <section class="posts">
    <PostsTimeline :hidden="posts.items == 0" />

    <div class="posts__items">

    <masonry :cols="{default: 2, 1020: 1}" :gutter="16" :columnClass="['masonrycolumn']">
      <div v-for="(post, index) in posts.items" :key="post.index">
        <PostsItem :post="post" class="posts__items-item" />      
        <Newsletter v-if="(index + 1) % 160 == 0 || (index + 1) == 80" />
      <!---
      <div v-for="(post, index) in posts.items" :key="post.index">
        <PostsItem :post="post" class="posts__items-item" />

        <Newsletter v-if="(index + 1) % 160 == 0 || (index + 1) == 80" />
      </div>
      --->

      </div>
     </masonry> 

      <div v-if="posts.items == 0" class="posts__items-empty">
        Nebyl nalezen žádný výsledek.
      </div>

      <div class="posts__more">
        <Button @click.native="handlePostsShowMore" v-if="limit < posts.total" arrow="down" size="large" center>Starší články</Button>
      </div>
      

    </div>
  </section>
</template>

<script>
import PostsItem from './PostsItem.vue';
import PostsTimeline from './PostsTimeline.vue';
import Newsletter from '@/components/newsletter/Newsletter.vue';

export default {
  components: {
    PostsItem,
    PostsTimeline,
    Newsletter,
  },
  computed: {
    posts() {
      return this.$store.getters.filteredPosts;
    },
    limit() {
      return this.$store.getters.filterLimit;
    }
  },
  head() {
    const baseUrl = process.env.BASE_URL || 'https://www.piratipracuji.cz';
    return {
      title: this.posts.items[0].title,
      meta: [
        { hid: 'og:title', property: 'og:title', content: this.posts.items[0].title },
        { hid: 'og:image', property: 'og:image', content: this.posts.items[0].thumbnail },
        { hid: 'og:url', property: 'og:url', content: baseUrl },
      ],
    };
  },
  methods: {
    handlePostsShowMore() {
      this.$store.commit('FILTER_INCREASE_LIMIT_SET');
    },
  }
};
</script>


<style lang="scss">
.masonrycolumn:first-of-type {
  z-index:2;
  background:#ffffff;
}
</style>

<style lang="scss" scoped>
.posts {
  display: flex;
  //background-color:#606060;

  &__items {
    flex: 1;
    width:100%;
    &-empty {
      text-align: center;
      padding-top: 5%;
    }
    &-more {
      display: flex;
      justify-content: center;
    }
  }
}
</style>