result html

<main>
	<!-- <main> -->
	<!-- Header section -->
	<!-- <header class="header-section">
		<h2 class="header-title">Your Header Title</h2>
	</header> -->

	<!-- Content section -->
	<section class="content-container" id="content-container">
		<div class="main-content">
			@if (userWheelStatus === "lose") {
				<div class="content-text">
					<div class="content-title">
						<h3>MERCI</h3>
						<h6>POUR TA PARTICIPATION!</h6>
					</div>

					<div class="content-subtitle">
						<p>RECOMMENCE POUR PLUS DE FUN!</p>
						<img src="/assets/las/images/resetIcon.png" alt="" />
					</div>

					<div class="content-para">
						<p>
							CONTINUE DE SCANNER POUR<br />
							DÉCOUVRIR LESNOUVEAUX JEUX
						</p>
					</div>
				</div>
			} @else if (userWheelStatus === "win") {
				<div class="code-content">
					<h3>FÉLICITATIONS</h3>

					@if (userWheelProductType === "physical") {
						<div class="code-card">
							<img [src]="backendURL + userWheelProductImg" alt="" style="width: 120px" />
						</div>
					} @else {
						<div class="code-card">
							<img src="/assets/las/images/codeImg.png" alt="" style="width: 84px" />

							<p>
								CARTE DE RECHARGE <br />
								TÉLÉPHONIQUE
							</p>
						</div>
					}

					@if (!isInputHasValue && userWheelProductType === "voucher") {
						<div class="code-input">
							<p>Sélectionne ton opérateur pour avoir ton code de recharge</p>

							<div class="input-group">
								<label class="input-group-text bg-white border-0" for="inputGroupSelect01">
									<img src="/assets/las/images/simImg.png" alt="" />
								</label>

								<select class="form-select border-0" id="inputGroupSelect01" [(ngModel)]="selectedRegion" (change)="onRegionChange($event)">
									<option value="" disabled selected hidden>Sélectionner ton opérateur</option>
									<option value="inwi">Inwi</option>
									<option value="maroc telecom">Maroc telecom</option>
									<option value="orange">Orange</option>
								</select>
							</div>
						</div>
					} @else {
						<div class="code-value">
							<div class="code-value-card" [cdkCopyToClipboard]="userWheelProductCode" (cdkCopyToClipboardCopied)="handleClipboardEvent()">
								@if (isCopied) {
									<i class="bi bi-clipboard-check"></i>
								} @else {
									<i class="bi bi-copy"></i>
								}

								<span>{{ userWheelProductCode }}</span>
							</div>

							<p>{{ resultMessage }}</p>
						</div>
					}
				</div>
			}
		</div>
	</section>

	<!-- Footer section -->
	<footer class="footer-section">
		<div class="footer-btn-next">
			<button class="btn btn-danger footer-btn" (click)="onFooterBtnClick()">{{ footerBtnText }}</button>
		</div>
		<div class="footer-text-section">
			<h5 class="footer-text">Fumer tue</h5>
		</div>
	</footer>
</main>