Add seat selection and no seats components

Introduces SeatSelectionComponent and NoSeatsInHallComponent for improved seat category display and handling cases with no available seats. Updates order flow to show seat categories, loading spinner, and total price. Refactors TheaterOverlayComponent to provide seat categories, and updates styles and dependencies.

src/app/order/order.component.css

@@ -1,3 +1,7 @@
 mat-stepper {
   background: transparent !important;
 }
+
+::ng-deep .mat-horizontal-stepper-header{
+    pointer-events: none !important;
+}

src/app/order/order.component.html

@@ -1,4 +1,15 @@
 <div class="w-full h-full">
+
+@if (loadingService.loading$ | async){
+  <div class="w-full h-full flex items-center justify-center">
+    <mat-progress-spinner
+      mode="indeterminate"
+      diameter="50"
+    ></mat-progress-spinner>
+  </div>
+}
+@else if (performance()) {
+
   <mat-stepper
     orientation="horizontal"
     linear="true"
@@ -8,12 +19,37 @@
       <form [formGroup]="firstFormGroup">
         <ng-template matStepLabel>Warenkorb</ng-template>
 
-        @if (performance()) {
-          <app-performance-info class="w-full h-50" [performance]="performance()!"></app-performance-info>
-        }
+        <app-performance-info class="w-full h-50" [performance]="performance()!"></app-performance-info>
 
-        <div>
-          <button mat-button matStepperNext>Next</button>
+        <div class="mb-4 mt-2 p-2">
+
+          @for (seatCategory of seatCategories(); track $index) {
+            <div class="h-2"></div>
+            <app-seat-selection
+              [seatCategory]="seatCategory"
+            ></app-seat-selection>
+          }
+          @empty {
+            <app-no-seats-in-hall></app-no-seats-in-hall>
+          }
+
+        </div>
+
+
+        <mat-divider></mat-divider>
+
+        <div class="flex justify-between p-2 mt-1 items-baseline">
+          <p class="font-semibold text-lg">
+            Tickets gesamt:
+          </p>
+          <p class="font-semibold text-2xl bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+            75,00 €
+          </p>
+        </div>
+
+        <div class="flex space-x-5 mt-10">
+          <button mat-button matButton="outlined" matStepperNext class="w-1/2">Reservieren</button>
+          <button mat-button matButton="filled" matStepperNext class="w-1/2">Buchen</button>
         </div>
       </form>
     </mat-step>
@@ -46,4 +82,5 @@
       </div>
     </mat-step>
   </mat-stepper>
+}
 </div>

src/app/order/order.component.ts

@@ -1,4 +1,5 @@
-import { Vorstellung } from '@infinimotion/model-frontend';
+import { LoadingService } from './../loading.service';
+import { Sitzkategorie, Vorstellung } from '@infinimotion/model-frontend';
 import { Component, inject, input } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 
@@ -10,8 +11,10 @@ import { FormBuilder, Validators } from '@angular/forms';
 })
 export class OrderComponent {
   performance = input<Vorstellung>();
+  seatCategories = input.required<Sitzkategorie[]>();
 
   private _formBuilder = inject(FormBuilder);
+  loadingService = inject(LoadingService);
 
   firstFormGroup = this._formBuilder.group({
     firstCtrl: ['', Validators.required],