<app-header></app-header>
<!-- Flex container -->
<div class="flex" *ngIf="dataLoaded && showProfile">
  <!-- Centered container -->
  <div class="center-container">
    <!-- Material card -->
    <div class="user-info">
      <mat-card class="default-background-color">
        <!-- E-Mail verification warn card -->
        <app-verify-email-warn-card
          *ngIf="isProfileOwner"
        ></app-verify-email-warn-card>

        <!-- Profile photo based on user -->
        <div class="m-auto">
          <div
            *ngIf="
              userProfilePhoto && userProfilePhoto != '';
              else defaultAvatar
            "
            class="m-auto userProfileDiv"
          >
            <img
              class="userProfileImg"
              src="{{ userProfilePhoto }}"
              alt="User Foto"
            />
            <!-- Include the profile photo upload component here -->
            <app-profile-photo-upload
              *ngIf="isProfileOwner"
            ></app-profile-photo-upload>
          </div>
          <!-- Conditional SVG based on user's email domain -->
          <ng-template #defaultAvatar>
            <div class="userProfileDiv" style="margin-bottom: 40px">
              <ng-container *ngIf="isCompanyAtos(); else otherAvatar">
                <svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 295 295"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="147.5"
                    cy="122.917"
                    r="36.875"
                    stroke="#0596FF"
                    stroke-width="4"
                    stroke-linecap="round"
                  />
                  <path
                    d="M221.25 229.927C216.9 216.859 207.314 205.311 193.98 197.075C180.646 188.839 164.308 184.375 147.5 184.375C130.692 184.375 114.354 188.839 101.02 197.075C87.6857 205.311 78.1001 216.859 73.75 229.927"
                    stroke="#0596FF"
                    stroke-width="4"
                    stroke-linecap="round"
                  />
                </svg>
              </ng-container>
              <ng-template #otherAvatar>
                <svg
                  width="100%"
                  height="100%"
                  viewBox="0 0 295 295"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle
                    cx="147.5"
                    cy="122.917"
                    r="36.875"
                    stroke="#FF6D43"
                    stroke-width="4"
                    stroke-linecap="round"
                  />
                  <path
                    d="M221.25 229.927C216.9 216.859 207.314 205.311 193.98 197.075C180.646 188.839 164.308 184.375 147.5 184.375C130.692 184.375 114.354 188.839 101.02 197.075C87.6857 205.311 78.1001 216.859 73.75 229.927"
                    stroke="#FF6D43"
                    stroke-width="4"
                    stroke-linecap="round"
                  />
                </svg>
              </ng-template>
              <!-- Include the profile photo upload component here as well -->
              <app-profile-photo-upload
                *ngIf="isProfileOwner"
              ></app-profile-photo-upload>
            </div>
          </ng-template>
        </div>
        <!-- Conditional SVG based on user's email domain -->

        <!-- Card content -->
        <mat-card-content>
          <form [formGroup]="userProfileForm" (ngSubmit)="saveProfile()">
            <!-- Name input field -->
            <div>
              <mat-form-field appearance="outline" class="non-editable-field">
                <mat-label>Name</mat-label>
                <input
                  type="text"
                  matInput
                  [readonly]="true"
                  formControlName="name"
                />
              </mat-form-field>
            </div>

            <!-- Email input field -->
            <div>
              <mat-form-field appearance="outline" class="non-editable-field">
                <mat-label>Email</mat-label>
                <input
                  type="text"
                  matInput
                  [readonly]="true"
                  formControlName="email"
                />
              </mat-form-field>
            </div>

            <div
              class="flex3"
              *ngIf="isProfileOwner || userProfileForm.value.firmenposition"
            >
              <mat-form-field
                appearance="outline"
                class="{{
                  isProfileOwner ? 'editable-field' : 'non-editable-field'
                }}"
              >
                <mat-label>Firmenposition</mat-label>
                <input
                  type="text"
                  matInput
                  [readonly]="!isProfileOwner"
                  formControlName="firmenposition"
                  placeholder="z. B. Developer"
                />
              </mat-form-field>
              <!-- Save button -->
              <mat-icon
                class="sync-icon"
                *ngIf="isProfileOwner && !showSpinnerModule"
                (click)="saveProfile()"
                >sync</mat-icon
              >
              <app-progress-spinner
                class="spinner-section"
                [showSpinner]="showSpinnerModule"
              ></app-progress-spinner>
            </div>

            <!-- User wins -->
            <div class="flex3">
              <h2>Siege:</h2>
              <!-- Display user wins if available, otherwise show loading or blank -->
              <h1 [style.color]="isCompanyAtos() ? '#0596ff' : '#ff6d43'">
                {{
                  userProfileForm.controls["wins"].value
                    ? userProfileForm.controls["wins"].value
                    : 0
                }}
              </h1>
            </div>
            <!-- ... other parts of your form ... -->
          </form>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
<app-progress-spinner
  class="spinner-section-center"
  [showSpinner]="!dataLoaded"
></app-progress-spinner>
