---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Breadcrumbs from '../../components/Breadcrumbs.astro';

export async function getStaticPaths() {
  const items = import.meta.glob('/src/content/models/*.md');
  return Object.keys(items).map((path) => {
    const slug = path.replace('/src/content/models/', '').replace('.md', '');
    return { params: { slug } };
  });
}

const { slug } = Astro.params;
const items = import.meta.glob('/src/content/models/*.md', { eager: true });
const item = items[`/src/content/models/${slug}.md`];
const fm = item?.frontmatter || {};
const Content = item?.default;
---
<BaseLayout title={fm.title || slug} description={fm.description} date={fm.date || ''} slug={`models/${slug}`} ogType="article">
  <article>
    <Breadcrumbs />
    <div style="margin-bottom:16px;">
      <span class="badge" style="background:var(--accent2);">${fm.type || ''}</span>
      {fm.license && <span class="badge" style="background:var(--muted);">${fm.license}</span>}
    </div>
    <h1>{fm.title || slug}</h1>
    {fm.description && <p style="font-size:18px;color:var(--muted);">{fm.description}</p>}
    {Content && <Content />}
  </article>
</BaseLayout>