import { Component, input } from '@angular/core';
import { DatePipe } from '@angular/common';
import { Aantekening } from '@registratie/domain/registration';

/** Organism: table of specialismen/aantekeningen. */
@Component({
  selector: 'app-registration-table',
  imports: [DatePipe],
  template: `
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col" i18n="@@table.type">Type</th>
            <th scope="col" i18n="@@table.omschrijving">Omschrijving</th>
            <th scope="col" i18n="@@table.datum">Datum</th>
          </tr>
        </thead>
        <tbody>
          @for (row of rows(); track row.omschrijving) {
            <tr>
              <td>{{ row.type }}</td>
              <td>{{ row.omschrijving }}</td>
              <td>{{ row.datum | date: 'mediumDate' }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  `,
})
export class RegistrationTableComponent {
  rows = input.required<Aantekening[]>();
}
