{#each chunk(schueler, anzahl) as slice, i}
  <div class="page grid" orientation="landscape" size="A3" style="font-size: 1.1rem">
    <div class="header">
      <pre>
        Konferenzliste <b>{klasse.Klasse || schueler[0].Klasse}</b> &Tab; {aktAbschnitt().klassenlehrer_in}: <b>{`${aktAbschnitt().lehrer.Vorname} ${aktAbschnitt().lehrer.Nachname} (${aktAbschnitt().lehrer.Kuerzel})`}</b> &Tab; Stand: {heute()} &Tab; Konferenzdatum: {datum(aktAbschnitt().Konferenzdatum)} &Tab; Zeugnisdatum: {datum(aktAbschnitt().ZeugnisDatum)}
      </pre>
    </div>
    <div class="main">
      <Voffset v=1/>
      <table>
        <tr>
          <th><b>Nr</b></th>
          <th><b>Name</b></th>
          <th class="rotate"><div><span><b>FStd</b></span></div></th>
          <th class="rotate"><div><span><b>uFStd</b></span></div></th>
          {#each Array.from(faecher()) as f}
            <th class="rotate"><div><span><b>{f}</b></span></div></th>
          {/each}
          <th><b>Bemerkungen</b></th>
        </tr>
        <tr><td colspan="2" style="height: 4rem">Bitte abzeichnen</td>{#each Object.keys(noten()) as n}<td></td>{/each}<td></td><td></td><td></td></tr>
        {#each slice as s, ii}
          <tr>
            <td><b>{i*anzahl+ii+1}</b></td>
            <td><b>{s.Name}, {s.Vorname}</b></td>
            <td>{s.abschnitte.find(aktHalbjahr).SumFehlStd || 0}</td>
            <td>{s.abschnitte.find(aktHalbjahr).SumFehlStdU || 0}</td>
            {#each Object.entries(noten()) as [fach, n]}
              <td class="text-center" style={parseInt(n[i*anzahl+ii]) > 4 ? 'background:tomato;':''}>{n[i*anzahl+ii] || '–'}</td>
            {/each}
            <td class="extraklein">{s.abschnitte.find(aktHalbjahr).ZeugnisBem || ''}</td>
          </tr>
        {/each}
      </table>
    </div>
    <div class="footer">Seite {i+1}/{Math.ceil(schueler.length/anzahl)}</div>
  </div>
{/each}

<script>
  import { datum, chunk }  from './helfer'

  import Voffset from './partials/Voffset.html'

  export let schueler, schule, privat, jahr, abschnitt, klasse
  const aktHalbjahr = (a) => a.Jahr === jahr && a.Abschnitt === abschnitt
  const heute = () => new Date().toLocaleDateString('de', {day: '2-digit', month: '2-digit', year: 'numeric'})
  const anzahl = 25
  const aktAbschnitt = () => schueler[0].abschnitte.slice(-1)[0]
  const faecher = () => {
    let faecher = new Set
    schueler.forEach(s => s.abschnitte.find(aktHalbjahr).noten.forEach(n => {faecher.add(n.fach.FachKrz)}))
    return faecher
  }
  const noten = () => {
    let noten = {}
    faecher().forEach(f => {noten[f] = []})
    schueler.forEach(s => s.abschnitte.find(aktHalbjahr).noten.forEach(n => noten[n.fach.FachKrz].push(n.NotenKrz || "–")))
    return noten
  }
</script>

<style>
  @import 'css/main.css';
  @import 'css/a3-landscape.css';
  table {
    border-collapse: collapse;
    width:auto;
  }
  table td {
    border: thin solid #ddd;
    line-height: 1.3rem;
    padding: 9px;
    white-space:nowrap;
  }
  table td.extraklein {
    font-size: .6rem;
    white-space:pre-wrap;
    word-wrap:break-word;
    vertical-align: top;
    padding: 1px;
  }
  table td:last-child {
    width: 100%;
  }
  th.rotate {
    height: 30px;
    white-space: nowrap;
  }
  th.rotate > div {
    transform:
      translate(20px, -3px)
      rotate(315deg);
    box-sizing: border-box;
  }
  th.rotate > div > span {
    border-bottom: 1px solid #ccc;
    width: 30px;
    transform-origin: left bottom;
    display: inline-block
  }

</style>