---
import { getAllPosts } from '../../libs/posts.ts'
import TagList from '../../components/post/post-tag-list.astro';

import Root from '../../layouts/Root.astro';
import Main from '../../layouts/Bundle.astro';

import Column from '../../components/post/post-card-column.astro';
import Row from '../../components/post/post-card-row.astro';

const posts = getAllPosts();
---

<Root 
  title="Blog"
  description=''
  path='/blog/'>
  <Main className="container content-space-t-3" id='blog'>
    <div>
      <div class="w-md-75 w-lg-50 text-center mx-md-auto">
        <h1 class="display-4 text-white">Blog</h1>
      </div>
    </div>
    <div id="listing">
      <div class="row justify-content-md-between align-items-md-center mb-7">
        <div class="col-md-5 mb-5 mb-md-0">
          <div
            class="d-md-flex align-items-md-center text-center text-md-start">
            <span class="d-block me-md-3 mb-2 mb-md-1 text-white">
              Tags:
            </span>
            <TagList />
          </div>
        </div>
      </div>
      { posts.slice(0, 1).map((post) => ( <Row post={post}/> ))}
      <div id="blogsCards" class="row mb-3">
      { posts.slice(1, 10).map((post) => ( <Column post={post}/> ))}
      </div>
    </div>
  </Main>
</Root>
