client-app/src/app/carnet/add/add-carnet.component.html

<div class="client-carnet-container">
    <!-- Initial Questions Section -->
    <div *ngIf="!questionsCompleted" class="questions-section">
        <h2>Add New Carnet</h2>

        <form [formGroup]="questionsForm" (ngSubmit)="onQuestionsSubmit()">
            <div class="question-row">
                <mat-radio-group formControlName="newCarnet">
                    <mat-label>Do you need a new carnet?</mat-label>
                    <mat-radio-button [value]="true">Yes</mat-radio-button>
                    <mat-radio-button [value]="false">No</mat-radio-button>
                </mat-radio-group>
            </div>

            <div class="question-row">
                <mat-radio-group formControlName="additionalSets">
                    <mat-label>Do you need additional sets?</mat-label>
                    <mat-radio-button [value]="true">Yes</mat-radio-button>
                    <mat-radio-button [value]="false">No</mat-radio-button>
                </mat-radio-group>
            </div>

            <div class="question-row">
                <mat-radio-group formControlName="duplicateCarnet">
                    <mat-label>Did you lose your carnet? Are you looking for duplicates?</mat-label>
                    <mat-radio-button [value]="true">Yes</mat-radio-button>
                    <mat-radio-button [value]="false">No</mat-radio-button>
                </mat-radio-group>
            </div>

            <div class="question-row">
                <mat-radio-group formControlName="extendCarnet">
                    <mat-label>Do you need to extend the carnet?</mat-label>
                    <mat-radio-button [value]="true">Yes</mat-radio-button>
                    <mat-radio-button [value]="false">No</mat-radio-button>
                </mat-radio-group>
            </div>

            <div class="actions">
                <button mat-raised-button color="primary" type="submit" [disabled]="!questionsForm.valid">
                    Continue
                </button>
            </div>
        </form>
    </div>

    <!-- Stepper Section (shown after questions are answered) -->
    <mat-stepper *ngIf="questionsCompleted" orientation="vertical" [linear]="isLinear"
        (selectionChange)="onStepChange($event)" [selectedIndex]="currentStep">

        <!-- Application Name Step -->
        <mat-step [completed]="stepsCompleted.applicationDetail" [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Application Name</ng-template>
            <app-application [isEditMode]="isEditMode" (applicationIdCreated)="onApplicationDetailCreated($event)">
            </app-application>
        </mat-step>

        <!-- Holder Selection Step -->
        <mat-step [completed]="stepsCompleted.holderSelection" [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Holder Selection</ng-template>
            <app-holder (completed)="onHolderSelectionSaved($event)">
            </app-holder>
        </mat-step>

        <!-- Goods Section Step -->
        <mat-step *ngIf="applicationType === 'new'" [completed]="stepsCompleted.goodsSection"
            [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Goods Section</ng-template>
            <app-goods (completed)="onGoodsSectionSaved($event)">
            </app-goods>
        </mat-step>

        <!-- Travel Plan Step -->
        <mat-step *ngIf="applicationType === 'new' || applicationType === 'extend'"
            [completed]="stepsCompleted.travelPlan" [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Travel Plan</ng-template>
            <!-- <app-travel-plan (completed)="onTravelPlanSaved($event)">
            </app-travel-plan> -->
        </mat-step>

        <!-- Insurance Step -->
        <mat-step [completed]="stepsCompleted.insurance" [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Insurance</ng-template>
            <!-- <app-insurance (completed)="onInsuranceSaved($event)">
            </app-insurance> -->
        </mat-step>

        <!-- Shipping Step -->
        <mat-step [completed]="stepsCompleted.shipping" [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Shipping</ng-template>
            <!-- <app-shipping (completed)="onShippingSaved($event)">
            </app-shipping> -->
        </mat-step>

        <!-- Delivery Method Step -->
        <mat-step [completed]="stepsCompleted.deliveryMethod" [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Delivery Method</ng-template>
            <!-- <app-delivery-method (completed)="onDeliveryMethodSaved($event)">
            </app-delivery-method> -->
        </mat-step>

        <!-- Payment Step -->
        <mat-step [completed]="stepsCompleted.payment" [editable]="stepsCompleted.applicationDetail">
            <ng-template matStepLabel>Payment</ng-template>
            <!-- <app-payment (completed)="onPaymentSaved($event)">
            </app-payment> -->
        </mat-step>
    </mat-stepper>
</div>