<template>
  <Layout>
    <header
    :class=HeroBgClass>
      <div class="inner">
        <div class="site-header-content">
          <h1 class="site-title">
            <img v-if="$static.metadata.ghost.logo != ''" class="site-logo"
            :src="$static.metadata.ghost.logo"
            :alt="$static.metadata.siteTitle||$static.metadata.ghost.title" />
            <p v-if="$static.metadata.ghost.logo === ''">
              {{ $static.metadata.title }}
            </p>
          </h1>
          <h2 class="site-description">
            {{ $static.metadata.siteDescription||$static.metadata.ghost.description}}
          </h2>
        </div>
        <Navbar :logo=false />
      </div>
    </header>

    <!-- The main content area -->
    <main id="site-main" class="site-main outer">
      <div class="inner">
        <div class="post-feed">
          <Card v-for="{ node }, count in $page.posts.edges" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
        </div>
        <Pager :info="$page.posts.pageInfo" linkClass="button" style="height: 5rem; text-align:center;" />
      </div>
    </main>
  </Layout>
</template>

<style lang="css">

.button {
  color: white;
  background: #81645B;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0.5rem;
}

</style>

<script>
  import Navbar from '../components/Navbar'
  import Card from '../components/Card';
  import { Pager } from 'gridsome'

  export default {
    metaInfo: {
      bodyAttrs: {
        class: 'home-template'
      }
    },
    components: {
      Navbar,
      Card,
      Pager,
    },
    computed: {
      HeroBgImage(metadata) {
        if (metadata.cover_image) {
          return {
            backgroundImage: 'url(' + $static.metadata.cover_image + ')'
          }
        }
      },
      HeroBgClass() {
        return 'site-header outer no-cover'
      }
    }   
  }
</script>

<page-query>
query Posts($page: Int) {
  posts: allGhostPost(
      sortBy: "published_at",
      order: DESC,
      perPage: 6,
      page: $page,
  ) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        title
        description: excerpt
        date: published_at (format: "D. MMMM YYYY")
        path
        slug
        id
        coverImage: feature_image
        content: html
        authors {
          name
          url
          slug
          image: profile_image
        }
        tags {
          name
          slug
        }
      }
    }
  }
}
</page-query>

<static-query>
  query Admin {
    metadata {
      siteName
      siteDescription
      siteUrl
      ghost {
        title
        url
        logo
        description
        navigation {
          url
          label
        }
      }
    }
  }
</static-query>
