{#await gruppe}
{:then gruppeP}
  {#each Object.entries(gruppeP) as [klasse, schueler]}
    {#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">{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}
{/each}
{/await}

<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 {
    computed: {
      gruppe: async ({schueler, knexConfig}) => {
        const Schueler = await R.models.Schueler
        const knex = await R.knex(knexConfig)
        Schueler.knex(knex)
        const klasse = await Schueler.query()
          .where('Status', '2')
          .andWhere('Geloescht', '-')
          .andWhere('Gesperrt', '-')
          .select('ID', 'Name', 'Vorname', 'Klasse')
          .orderBy('Klasse')
          .orderBy('Name')
        return R.lodash.groupBy(klasse, 'Klasse')
      }
    },
    helpers: { h, R },
  }
</script>