---
import { getCollection } from 'astro:content';
import { Icon } from "astro-icon/components";
import BaseLayout from '../../layouts/BaseLayout.astro';

const projects = await getCollection('portfolio');
projects.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
---
<BaseLayout title="Portfolio" theme="portfolio" description="Eine Auswahl aktueller Projekte und Experimente von c0ntroller.de.">
  <div class="glass-container" style="view-transition-name:main-glass;">
    <h1>Meine Arbeiten</h1>
    <p>Eine Auswahl aktueller Projekte und Experimente.</p>
  </div>
  
  <div class="grid">
    {projects.map(project => (
      <a href={`/portfolio/${project.id}`} class="glass-container link-card" style={`view-transition-name: project-header-${project.id};`}>
        <h2 style={`view-transition-name: project-headline-${project.id};`}>{project.data.title}</h2>
        <p>{project.data.summary}</p>
        {(project.data.tags || project.data.repository) &&
        (<div class="additional-meta">
          <div class="meta-tags">
            {project.data.tags && (
              <div class="tags">
                {project.data.tags?.map(tech => <span class="tag">{tech}</span>)}
              </div>
            )}
          </div>
          <div class="meta-repository">
            { project.data.repository && (
                <Icon name="simple-icons:git" style={`view-transition-name: project-git-${project.id};`} />
            )}
          </div>
        </div>)}
      </a>
    ))}
  </div>
</BaseLayout>
<style>
  .grid { 
    display: flex; 
    flex-direction: column; 
    gap: 2rem; 
    margin-top: 2rem; 
  }
  .link-card { 
    display: block; 
    text-decoration: none;
    transition: all 0.3s ease;
  }
  .link-card h2 {
    margin-top: 0;
  }
  .additional-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
    justify-content: space-between;
    margin-top: 1rem;
    align-items: center;
  }
  .tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-grow: 1;
    align-items: center;
  }
  .tag {
    font-size: 0.8rem;
    background: rgba(var(--accent-base), 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
  }
  .meta-repository {
    flex-shrink: 1;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    color: rgb(var(--accent-base));
  }
</style>