---
import Layout from '../layouts/Layout.astro'
import BaseSection from '../layouts/baseSection.astro'
import TACard from '../components/taCard.astro'
import type { FileData } from '../types/ta'
import type { GlobAny } from '../types/generic'

export interface Props {
  datafile: string
}

const { datafile } = Astro.props
const fulldata = import.meta.glob<GlobAny>(`../content/data/*.json`)
const filecontent: FileData = (
  await fulldata[`../content/data/${datafile}.json`]()
)['default']

const pagetitle = `${filecontent.info.title} - FGO TA`
filecontent.data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
---

<Layout
  title={pagetitle}
  currentpage="database-entry"
  descriptionOverride={filecontent.info.shortdescription}
>
  <a href="/database">&lt&lt Back to database</a>
  <BaseSection title={filecontent.info.title} description={filecontent.info.description}>
    {filecontent.data.map((item) => <TACard {...item} />)}
  </BaseSection>
  <div class="placeholder"></div>
</Layout>

<style>
  .placeholder {
    visibility: hidden;
    width: 100%;
    height: 2.5rem;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    color: white;
    background-color: var(--c-gray);
    padding: 0.5rem 0px;
    text-decoration: none;
  }
</style>