source: bus-n-go-pavel-216049/bus-n-go-frontend/src/app/components/controls/control/control.component.html

<div class="flex flex-col justify-center items-center">
  <div class="w-full flex flex-col justify-center items-center p-10">
    <h1 class="text-3xl p-5">Create new fine</h1>
    <div class="w-1/3">
      <form (ngSubmit)="onSubmit($event)" class="flex flex-wrap gap-x-5" [formGroup]="fineForm">
        <mat-form-field>
          <mat-label>Iznos</mat-label>
          <input formControlName="iznos" matInput placeholder="1000" value="" type="number">
        </mat-form-field>

        <mat-checkbox class="w-1/3" formControlName="plateno">Plateno</mat-checkbox>

        <mat-form-field>
          <mat-label>Dokument</mat-label>
          <input formControlName="dokument" matInput placeholder="DC-1234" value="" type="text">
        </mat-form-field>

        <mat-form-field (click)="onClick()" [appearance]="'outline'">
          <mat-label>Select patnik (if is registered)</mat-label>
          <mat-select formControlName="patnikId">
            @for (passenger of passengers; track passenger.email) {
              <mat-option [value]="passenger.id">{{ passenger.name }} -> {{ passenger.email }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <mat-form-field>
          <mat-label>Telefon</mat-label>
          <input formControlName="telefon" matInput placeholder="07x xxx xxx" value="" type="text">
        </mat-form-field>

        <mat-form-field>
          <mat-label>Adresa</mat-label>
          <input formControlName="adresa" matInput placeholder="ul. Jane Sandanski" value="" type="text">
        </mat-form-field>

        <mat-form-field>
          <mat-label>Ime</mat-label>
          <input formControlName="ime" matInput placeholder="Zoran Stojkovski" value="" type="text">
        </mat-form-field>

        <button class="w-3/4" type="submit" mat-flat-button>Create new fine</button>
      </form>
    </div>
  </div>

  <div class="relative overflow-x-auto">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
      <tr>
        <th scope="col" class="px-6 py-3">#</th>
        <th scope="col" class="px-6 py-3">Conductor</th>
        <th scope="col" class="px-6 py-3">Passenger</th>
        <th scope="col" class="px-6 py-3">Date Created</th>
        <th scope="col" class="px-6 py-3">Payed</th>
        <th scope="col" class="px-6 py-3">Date Payed</th>

      </tr>
      </thead>
      <tbody>

        @for (fine of fines; track fine.id) {
          <tr>
            <td class="px-6 py-4">
              {{ fine.id }}
            </td>
            <td class="px-6 py-4">{{ fine.kondukter.name }}</td>
            <td class="px-6 py-4">{{ fine.ime }}{{ fine.patnik?.name }}</td>
            <td class="px-6 py-4">{{ fine.dateCreated }}</td>
            <td class="px-6 py-4">{{ fine.plateno }}</td>
            <td class="px-6 py-4">{{ fine.datePayed || 'not payed' }}</td>
          </tr>
        }
      </tbody>
    </table>
  </div>

</div>