<div class="min-h-screen flex items-center justify-center bg-background">
  <div class="w-full max-w-md space-y-4">
    <div class="space-y-4">
      <input type="url" pInputText placeholder="Enter YouTube URL" [(ngModel)]="url" required class="w-full p-1 m-1">
      <div class="flex justify-center">
        <p-button (onClick)="handleSubmit($event)" label="Generate" type="submit" class="w-32 pb-1"></p-button>
      </div>
    </div>

    <p-scrollPanel styleClass="w-full">
      <p-table [value]="completedOrders"
               selectionMode="single"
               styleClass="p-datatable-gridlines">
        <ng-template pTemplate="header" class = "text-color-primary">
          <tr>
            <th class="w-[200px] bg-muted/50">Ordered By</th>
            <th class="text-center">Order State</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-order
                     class = "text-color-primary"
        >

          <tr [routerLink]="['/question-generation', order.id]">
            <td class="font-medium">{{order.orderedBy.username}}</td>
            <td class="text-center">
              <app-student-status [status]="order.orderState"></app-student-status>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </p-scrollPanel>
  </div>
</div>
