---
import Layout from '../layouts/Layout.astro'
import BaseSection from '../layouts/baseSection.astro'
import TACard from '../components/taCard.astro'
import { plsLoadTAEntry } from '../utils/tools'
import { Image } from 'astro:assets'
import lizsad from '../assets/lizsad.png'
import SmallTitle from '../components/smallTitle.astro'

export interface Props {
  collection: 'teslafest' | 'taInfoData'
  collectionKey: string
  baseurl: string
}

const { collection, collectionKey, baseurl } = Astro.props
const taEntry = await plsLoadTAEntry(collectionKey, collection)
const pagetitle = `${taEntry.info.title} - FGO TA`
const displaystate = taEntry.quests[0].data.length > 0 ? 'none' : 'flex'
const hidetitle = taEntry.quests.length <= 1
---

<Layout
  title={pagetitle}
  currentpage="database-entry"
  descriptionOverride={taEntry.info.shortdescription}
>
  <SmallTitle
    maintext={taEntry.info.title}
    subtext={taEntry.info.shortdescription}
    fadeout={true}
    baseurl={baseurl}
    returnbutton={true}
  />
  {
    taEntry.quests.map((item) => (
      <BaseSection title={item.questTitle} description={item.description} hidetitle={hidetitle}>
        {item.data
          .sort((a, b) => b.date.valueOf() - a.date.valueOf())
          .map((item) => (
            <TACard {...item} />
          ))}
      </BaseSection>
    ))
  }
  <div style=`display: ${displaystate}` class="overridewrapper">
    <Image
      class="overrideimage"
      src={lizsad}
      alt="Sad override if there are no runs"
      loading="eager"
    />
  </div>
  <div class="placeholder"></div>
</Layout>

<style>
  .overridewrapper {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: 100%;
  }
  .overrideimage {
    overflow: auto;
    height: auto;
    width: auto;
    max-width: max-content;
    max-height: 16rem;
    padding: 0px 1rem;
    border-radius: 4rem;
  }
  .placeholder {
    visibility: hidden;
    width: 100%;
    height: 2.5rem;
  }

  a {
    position: sticky;
    top: 4rem;
    z-index: 1;
    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>
