---
import Layout from '../layouts/base.astro'
import Header from '../components/header.astro'
import Item from '../components/item.astro'

const { SITE_URL } = Astro.locals
const { channel, before = true, after = true } = Astro.props
const posts = channel.posts ?? []

const beforeCursor = posts[posts.length - 1]?.id
const afterCursor = posts[0]?.id
// const cursor = +Astro.params.cursor
---

<Layout channel={channel} id="main-container">
  <slot name="header">
    <Header channel={channel} />
  </slot>
  <div class="items">
    {posts.map((post) => <Item post={post} />)}
  </div>

  <div class="pages-container">
    {
      before && beforeCursor > 20 ? (
        <a
          href={`${SITE_URL}before/${beforeCursor}`}
          title="Before"
          class="page"
        >
          Before
        </a>
      ) : (
        <span class="page-placeholder">&nbsp;</span>
      )
    }

    <div class="pages-info"></div>
    {
      after && afterCursor ? (
        <a href={`${SITE_URL}after/${afterCursor}`} title="After" class="page">
          After
        </a>
      ) : (
        <span class="page-placeholder">&nbsp;</span>
      )
    }
  </div>
</Layout>