---
import type { SchoolDossier } from "../data/education";

interface Props {
  dossier: SchoolDossier;
  index: number;
}

const { dossier, index } = Astro.props;
---

<article class:list={["dossier", index % 2 === 1 && "dossier--reverse"]} id={dossier.slug}>
  <div class="dossier__media panel">
    <div class:list={["dossier__image-grid", dossier.images.length > 1 && "dossier__image-grid--split"]}>
      {dossier.images.map((image) => (
        <figure class="dossier__figure">
          <img src={image.src} alt={image.alt} loading="lazy" />
          <figcaption>
            <span>{image.credit}</span>
            <a href={image.sourceUrl} target="_blank" rel="noreferrer">{image.sourceLabel}</a>
            <span>{image.license}</span>
          </figcaption>
          {image.note && <p class="dossier__image-note">{image.note}</p>}
        </figure>
      ))}
    </div>
  </div>

  <div class="dossier__body">
    <div class="dossier__meta">
      <span>{dossier.mode} file</span>
      <span>{dossier.years}</span>
      <span>{dossier.city}</span>
    </div>

    <div class="dossier__heading">
      <img class="dossier__logo" src={dossier.logo} alt={dossier.school} loading="lazy" />
      <div>
        <h2>{dossier.school}</h2>
        <p class="dossier__program">{dossier.program}</p>
        <p class="dossier__dek">{dossier.dek}</p>
      </div>
    </div>

    <blockquote class="dossier__quote">
      <p>"{dossier.quote}"</p>
      <footer>
        <span class="dossier__signature">{dossier.signature}</span>
        <span class="dossier__signature-note">{dossier.signatureNote}</span>
      </footer>
    </blockquote>

    <div class="dossier__copy">
      {dossier.paragraphs.map((paragraph) => (
        <p>{paragraph}</p>
      ))}
    </div>
  </div>
</article>
