---
import Footer from "../../../components/Footer.astro"
import Layout from "../../../layouts/Layout.astro"
import {File} from "@lucide/astro"
import customPath from "../../../utils/path.ts"
import {Picture} from "astro:assets"
import {readFile} from "node:fs/promises"
import {getPlaiceholder} from "plaiceholder"

import traumweh_1 from "../../../assets/media/hamburg/2026/traumweh_1.png"
import max_1 from "../../../assets/media/hamburg/2026/max_1.jpg"
import max_2 from "../../../assets/media/hamburg/2026/max_2.jpg"
import eingang from "../../../assets/media/hamburg/2026/eingang.jpg"
import workshop from "../../../assets/media/hamburg/2026/workshop.jpg"
import vortrag from "../../../assets/media/hamburg/2026/vortrag-1.jpg"

type Image = {
    image: any,
    alt: string,
    attribution: string,
    blur?: string,
}

const images_raw: Record<string, Image> = {
    traumweh_1: {
        image: traumweh_1,
        alt: "Ein Foto der Veranstaltung. Eine Speakerin steht auf einer Bühe. Auf einer Leinwand ist eine Präsentation zu sehen. Auf Bannern steht DIDAYS 2026 Hamburg.",
        attribution: "CC-4.0 BY-SA traumweh",
    },
    max_1: {
      image: max_1,
      alt: "Ein Foto der einer leeren, bunt erleuchteten Bühnenszene. Auf der Leinwand auf der Bühne ist unscharf ein Programmablauf des Tages zu sehen. Diverse Banner zeigen den Schriftzug DIDAYs 2026.",
      attribution: "CC-4.0 BY-SA max",
    },
    max_2: {
      image: max_2,
      alt: "Ein Foto einer Speakerin auf einer Bühne. Hinter ihr ist eine Leinwand auf der auf gelber Folie der eine Definition für Hacking steht. Dies sei 'atypisches Benutzerverhalten' laut der Deutschen Bundespost.",
      attribution: "CC-4.0 BY-SA max",
    },
    eingang: {
      image: eingang,
      alt: "Der Eingang zum Kulturpalast, mit DIDAYS-Beachflags",
      attribution: "CC-4.0 BY-SA stb",
    },
    workshop: {
      image: workshop,
      alt: "Menschen in einem Workshop-Raum, die intentiv das Thema Passwort-Manager diskutieren",
      attribution: "CC-4.0 BY-SA stb",
    },
    vortrag: {
      image: vortrag,
      alt: "Ein Blick auf die Bühne auf der zwei Menschen vor einer Präsentationsslide stehen und über Linux reden.",
      attribution: "CC-4.0 BY-SA jule",
    }
}

const images: Record<string, Image> = {}

for (const image_name in images_raw) {
    const image = images_raw[image_name]

    let buffer
    if (import.meta.env.DEV) {
        const imagePath = new URL(image.image.src, Astro.url)
        const imageResponse = await fetch(imagePath)
        buffer = Buffer.from(await imageResponse.arrayBuffer())
    } else {
        const path = image.image.src.substring((import.meta.env.BASE_URL).length).replace(/(^[\/]*|[\/]*$)/g, '')
        const imagePath = "./dist/" + path
        buffer = await readFile(imagePath)
    }

    image["blur"] = (await getPlaiceholder(buffer, {
        size: 10,
    })).base64
    images[image_name] = image
}

const impressions = ["vortrag", "traumweh_1", "max_1", "max_2", "eingang", "workshop"]

const slides = [
    {
        name: "Ziemlich gute Privatsphäre",
        author: "anna elbe",
        path: "/hamburg/2026/slides/anna elbe - Ziemlich gute Privatsphäre.pdf",
    },
    {
        name: "Datenschutz für Betroffene",
        author: "CCC Hansestadt Hamburg e.V.",
        path: "/hamburg/2026/slides/CCCHH - Datenschutz für Betroffene.pdf",
    },
    {
        name: "Nutze deinen Computer mit Linux",
        author: "Endof10",
        path: "/hamburg/2026/slides/Endof10 - Nutze deinen Computer mit Linux.pdf",
    },
    {
        name: "Einfach, sicher und verantwortungsvoll digital unterwegs",
        author: "Omas gegen Rechts",
        path: "/hamburg/2026/slides/Omas gegen Rechts - Einfach, sicher und verantwortungsvoll digital unterwegs.pdf",
    },
    {
        name: "OpenStreetMap",
        author: "OpenStreetMap",
        path: "/hamburg/2026/slides/OpenStreetMap - OpenStreetMap.pdf",
    },
    {
        name: "Repair Café Eidelstedt Flyer",
        author: "Repair Café Eidelstedt",
        path: "/hamburg/2026/slides/Repair Cafe Eidelstedt - Flyer.pdf",
    },
    {
        name: "Messenger",
        author: "CCC Hansestadt Hamburg e.V.",
        path: "/hamburg/2026/slides/CCCHH - Messenger.pdf",
    },
    {
        name: "Passwort-Manager",
        author: "CCC Hansestadt Hamburg e.V.",
        path: "/hamburg/2026/slides/CCCHH - Passwort-Manager.pdf",
    },
]
---

<Layout>
  <div class="flex flex-col">
    <h1 class="text-6xl font-bold mt-8 mb-4 flex justify-center">
      <img src={customPath(import.meta.env.BASE_URL, "/hamburg/2026/logo.svg")}
           alt="Logo von den DiDays 2026 in Hamburg"
           class="h-full"/>
    </h1>
    <div class="mask-[url(/transitions/big.svg)] bg-base-200 h-30 mask-repeat-x mask-[auto_100%]"/>
  </div>

  <div class="bg-base-200 pt-8 pb-16">
    <div class="container p-8 max-w-5xl mx-auto flex flex-col gap-10 items-center md:items-start">
      <p class="text-xl/8 text-center">
        Die ersten DIDAYs fanden 2026 das erste Mal mit reger Beteiligung diverser Hamburger Gruppen in Harburg statt.
        Dort haben wir ausgiebig über Passwort-Manager, sichere Messenger, Verantwortung im digitalen Raum, Medienkompetenz, Linux und vieles Mehr diskutiert und Erfahrungen ausgetauscht.
      </p>
      <p class="text-xl/8 text-center">
        Wir bedanken uns bei <a href="/hamburg/2026/wer" class="font-bold link">allen Partnern</a>, die sich mit Vorträgen, Workshops, Organisation und einer bunten Sammlung kleiner Stände eingebracht haben!
      </p>
    </div>
  </div>

  <div class="bg-white relative overflow-hidden">
    <div
        class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%] absolute top-0 w-full z-20"/>
    <img
        aria-hidden
        alt=""
        src={images["traumweh_1"].blur}
        class="absolute inset-0 w-full h-full transform scale-150 filter blur-2xl"
    />
    <Picture
        formats={["avif", "webp", "jpg"]}
        widths={[540, 720, images["traumweh_1"].image.width]}
        src={images["traumweh_1"].image}
        alt={images["traumweh_1"].alt}
        layout="full-width"
        class="w-full max-h-[70vh] object-cover"
        pictureAttributes={{class: "relative z-10 text-transparent"}}
    />
      {images["traumweh_1"].attribution &&
          <span class="absolute z-10 px-3 text-xs py-1 bg-white/50 bottom-11 right-0 rounded-l text-black">
              {images["traumweh_1"].attribution}
          </span>
      }
    <div
        class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%] rotate-180 absolute bottom-0 w-full z-20"/>
  </div>

  <div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
    <div class="container p-8 max-w-2xl mx-auto">
      <h2 class="text-4xl font-semibold mb-8">
        Freut euch auf 2027!
      </h2>
      <p>
        Uns und allen beteiligten Gruppen und Initiativen hat das viel Spaß gemacht, und das Feedback war einhellig: bitte macht das nächstes Jahr wieder! Und das ist auch unser Plan: wir versuchen sobald wie möglich Termin und Ort dingfest zu machen.
      </p>
    </div>
  </div>

  <div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
    <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
    <div class="container p-8 max-w-2xl mx-auto">
      <h2 class="text-4xl font-semibold mb-8">
        Beteiligt euch!
      </h2>
      <p>
        Jeden 1. Sonntag ist DIDAY: schaut im <a href="https://events.diday.org" class="font-bold link">Event-Kalender</a> nach Angeboten bei euch vor Ort. Oder besser noch: werdet mit eurer Gruppe oder Initiative selbst aktiv!
      </p>
      <p>Der CCCHH lädt alle Gruppen, die sich aktiv am DIDAY beteiligen möchten, zu einem Erfahrungsaustausch ein. Auf der <a href="https://wiki.hamburg.ccc.de/club:projekte:diday_hamburg" class="font-bold link">Wiki-Seite zum Thema DIDAY-Erfahrungsaustausch</a> findet ihr den nächsten Termin und weitere Informationen.</p>
    </div>
  </div>

  <div class="bg-base-200 pb-20 w-screen overflow-x-hidden">
    <div class="mask-[url(/transitions/small.svg)] bg-base-100 h-10 mask-repeat-x mask-[auto_100%]"/>
    <div class="container p-8 mx-auto">
      <h2 class="text-4xl font-semibold my-8 mx-auto text-center">
        Eindrücke vom Event
      </h2>
      <div class="flex gap-4 overflow-x-auto w-full justify-start py-4">
          {impressions.map(async (impression_name) => {
                  const impression = images[impression_name]
                  return (
                      <button command="show-modal" commandfor={`impression-${impression_name}`}
                              class="mx-auto shrink-0 w-lg overflow-hidden shadow-lg rounded-xl relative">
                        <img
                            aria-hidden
                            alt=""
                            src={impression.blur}
                            class="absolute inset-0 w-full h-full transform scale-150 filter blur-2xl"
                        />
                        <Picture
                            formats={["avif", "webp", "jpg"]}
                            widths={[540, 720, impression.image.width]}
                            src={impression.image}
                            alt={impression.alt}
                            layout="full-width"
                            pictureAttributes={{class: "relative z-10 text-transparent"}}
                        />
                          {impression.attribution &&
                              <span
                                  class="absolute z-10 px-3 text-xs py-1 bg-white/50 bottom-0 right-0 rounded-tl text-black">
                                  {impression.attribution}
                              </span>}
                      </button>

                      <dialog id={`impression-${impression_name}`}
                              class="mx-auto my-auto rounded-xl max-w-6xl bg-base-100 backdrop:bg-black/50"
                              closedby="any">
                        <Picture
                            src={impression.image}
                            alt={impression.alt}
                        />
                        <div class="p-2 flex justify-between items-center">
                            {
                                impression.attribution &&
                                <span class="px-3 text-xs py-1">
                                    {impression.attribution}
                                </span>
                            }
                          <button commandfor={`impression-${impression_name}`} command="close"
                                  class="btn btn-base-200 ml-auto">
                            Schließen
                          </button>
                        </div>
                      </dialog>)

              },
          )}
      </div>
    </div>
  </div>

  <div class="bg-base-100 pb-20 w-screen overflow-x-hidden">
    <div class="mask-[url(/transitions/small.svg)] bg-base-200 h-10 mask-repeat-x mask-[auto_100%]"/>
    <div class="container p-8 max-w-4xl mx-auto">
      <h2 class="text-4xl font-semibold mb-8">
        Vortragsfolien
      </h2>
      <p>
        Hier findet ihr einige der Folien zu den bei uns gehaltenen Vorträgen einfach zum Download.
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full py-6">
          {slides.map(slide =>
              <a href={customPath(import.meta.env.BASE_URL, slide.path)}
                 class="card shrink-0 bg-base-100 card-md shadow-lg border-base-200 border-2">
                <div class="card-body">
                  <h2 class="card-title">{slide.name}</h2>
                  <p>von {slide.author}</p>
                  <div class="justify-end card-actions">
                    <button class="btn btn-base-200">
                      <File/>
                      Folien ansehen
                    </button>
                  </div>
                </div>
              </a>,
          )}
      </div>
    </div>
  </div>


  <Footer/>
</Layout>