<div *ngIf="user" class="spt-container">
    <div class="spt-headline d-flex justify-content-between align-items-start">
        <h1>{{ 'users.user' | translate }}: {{ user.firstName }} {{ user.lastName }}</h1>
    </div>
    <mat-tab-group>
        <mat-tab label="{{ 'basic.details' | translate }}">
            <app-user-form
                [data]="user"
                [mode]="FormMode.Edit"
                [id]="appHelperService.extractId(user.id!)"
                (submit)="onFormUpdate($event)"
            >
            </app-user-form>
        </mat-tab>
        <mat-tab label="{{ 'users.userTrips' | translate }}">
            <app-user-trip-list
                [user]="user"
            ></app-user-trip-list>
        </mat-tab>
    </mat-tab-group>
</div>
