---
import packagejson from '../../package.json'
export interface Props {
  fadeout?: boolean
}
const { fadeout } = Astro.props
const display = fadeout ? "": "display: none"

const version = packagejson.version
const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/tag/${version}`
---

<div>
  <span>
    This site is a project by Firq.
    <br />
    <a href="https://firq.dev" target="_blank" rel="noopener noreferrer"
      >Feel free to check out my personal site.</a
    >
    <br />
    <span class="version"
      >Website version: <a
        href={release}
        target="_blank"
        rel="noopener noreferrer">{version}</a
      ></span
    >
  </span>
  <div class="fade" style={display}></div>
</div>

<style>
  div {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-flow: column;
    background-color: var(--c-darkergray);
    text-align: center;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
    padding: 2rem 0rem 0rem 0rem;
  }
  a {
    text-align: center;
    text-decoration: none;
    color: var(--c-darkpurple);
  }

  .fade {
    margin-top: 3rem;
    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
    height: 2.5rem;
    width: 100%;
  }

  .version {
    font-size: 0.65em;
  }
</style>