---
import Layout from '../layouts/Layout.astro';
import { getCollection } from 'astro:content';

const posts = await getCollection('posts');
posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
---

<Layout title="Blog Posts" description="List all files and folders in the directory.">
  <h1 class="title">~/blog</h1>
  
  <div class="content">
    <p class="typewriter">Posts from the terminal.</p>
    
    <div style="margin-top: 2rem;">
      <span class="command">ls -la posts/</span>
      <div style="margin-top: 1rem; margin-left: 1rem;">
        {posts.map((post) => (
          <p>
            <span style="color: #d8d8d8">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
            <a href={`/post/${post.slug}`}>{post.data.title}</a>
          </p>
        ))}
        
        {posts.length === 0 && (
          <>
            <p>
              <span style="color: var(--terminal-yellow);">No posts here yet</span>
            </p>
          </>
        )}
      </div>
    </div>
    
    <div style="margin-top: 2rem;">
      <p>
        <span class="command">cat rss.txt</span>
        <br />
        <a href="/rss.xml" style="margin-left: 1rem;">Subscribe to RSS feed</a>
      </p>
    </div>
  </div>
</Layout>