{#each R.lodash.chunk(schueler, 10) as slice}
  <div class="page" orientation="portrait" size="A4">
    <div class="grid">
      <b style="padding: 5px 0 0 5px">{slice[0].Klasse}</b>
      {#each slice as s}
        <div>
          <table style="width: 100%; margin-bottom: 15px; margin-left: 30px">
            <tr>
              <td style="width: 50%"><b>{s.Name}, {s.Vorname}</b></td>
              <td>Ihr Benutzername: b{s.ID}</td>
            </tr>
            <tr>
              <td></td>
              <td>Ihr Passwort: {h(s.ID)}</td>
            </tr>
          </table>
        </div>
        <hr>
      {/each}
    </div>
  </div>
{/each}

<style>
  @import 'daten/main.css';
  .page {padding: 0;}
  .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
}
</style>

<script>
  import Hashids from 'hashids'
  const hashids = new Hashids('schild.report hashing salt', 8, 'abcdefghkmnpqrstuvwxyz23456789')
  function h (id) { return hashids.encode(id) }

  export default {
    helpers: { h, R },
  }
</script>