---
import { Image } from "astro:assets";
import BackNav from "../components/BackNav.astro";
import { findImageByPath } from "../lib/findImage";
import type { Post } from "../types/global";
import Main from "./Main.astro";
import { formatLocalizedDateString } from "../lib/formatDate";

interface Props {
  frontmatter: Post;
}

const { frontmatter } = Astro.props;

const titleImg = findImageByPath(frontmatter.image.path);
const localeDate = formatLocalizedDateString(frontmatter.date);
---

<Main>
  <article class="markdown-content">
    <Image
      id="titleImg"
      src={titleImg}
      alt={frontmatter.image.alt}
      class="rounded"
    />
    <h1 class="headline">{frontmatter.title}</h1>
    <div class="bottom-info">
      <span>Autor: {frontmatter.author}</span>
      <span>{localeDate}</span>
    </div>
    <slot />
    <BackNav />
    <p class="disclaimer">
      Disclaimer: Dieser Artikel ist ausschließlich privat und wird nicht durch
      Produktplatzierung, Affiliate-Links oder ähnliches Unterstützt. Links
      dienen allein dem Zweck der Information.
    </p>
  </article>

  <div id="image-backdrop" hidden>
    <img id="image-preview" class="rounded" src="" alt="" />
  </div>
</Main>

<script is:inline src="/scripts/image-modal.js"></script>

<style>
  article {
    max-width: 900px;
    padding: 0 clamp(8px, 32px, 64px);
  }

  .markdown-content {
    font-size: 1.5rem;
    line-height: 1.6;


    img {
      cursor: zoom-in;
    }
  }

  #titleImg {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
  }

  .bottom-info {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
  }

  .disclaimer {
    margin: 32px 0 64px 0;
    font-size: smaller;
  }

  #image-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 24px;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
  }

  #image-backdrop[hidden] {
    display: none;
  }

  #image-preview {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
  }

  @media only screen and (max-width: 800px) {
    .markdown-content {
      font-size: 1.25rem;
      line-height: 1.4;
    }
  }
</style>