<div class="flex">
  <mat-card class="my-single-card">
    <mat-card-header class="card-header">
      <h2 class="icon-title">
        <span class="material-symbols-outlined">account_circle</span>
        Profilo
      </h2>
    </mat-card-header>
    <mat-card-content style="padding: 120px 0px">
      <div class="div-center" style="flex-direction: column">
        <span style="margin: 20px 0px"
          >Profilo in uso:
          <span class="highlight">{{
            profileName(currentProfile())
          }}</span></span
        >
        <mat-form-field style="width: 80%">
          <mat-label>Profili</mat-label>
          <mat-select [formControl]="selectedProfile">
            @for (profile of profiles(); track profile) {
            <mat-option [value]="profile">{{
              profileName(profile)
            }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
        <div
          class="div-center"
          style="flex-direction: column; width: 100%"
          *ngIf="currentProfile()?.type == 'AG'"
        >
          <span style="margin-bottom: 20px"
            >Stato agente:
            <span class="highlight">{{ agentStatus() }}</span>
          </span>
          <mat-form-field style="width: 80%">
            <mat-label>Stato</mat-label>
            <mat-select [formControl]="selectedStatus">
              <mat-option [value]="'READY'">READY</mat-option>
              <mat-option [value]="'NR'">NR</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div
          class="div-center"
          style="flex-direction: column; width: 100%"
          *ngIf="currentProfile()?.type == 'AG' && selectedStatus.value == 'NR'"
        >
          <span style="margin-bottom: 20px"
            >Codice attività impostato:
            <span class="highlight">{{ currentActivityCode() }}</span>
          </span>
          <mat-form-field style="width: 80%">
            <mat-label>Codici attività</mat-label>
            <mat-select [formControl]="selectedActivityCode">
              @for (activityCode of activityCodeList(); track activityCode) {
              <mat-option [value]="activityCode">
                {{ activityCode.description }}
              </mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>
