<h2 mat-dialog-title>{{ T.USER_PROFILES.DIALOG_TITLE | translate }}</h2>

<mat-dialog-content>
  <!-- Create New Profile -->
  <div class="create-profile-section">
    <h3>{{ T.USER_PROFILES.CREATE_NEW_PROFILE | translate }}</h3>
    <div class="create-profile-form">
      <mat-form-field class="profile-name-input">
        <mat-label>{{ T.USER_PROFILES.PROFILE_NAME | translate }}</mat-label>
        <input
          matInput
          [(ngModel)]="newProfileName"
          (keydown.enter)="createProfile()"
          [placeholder]="T.USER_PROFILES.PROFILE_NAME_PLACEHOLDER | translate"
        />
      </mat-form-field>
      <button
        mat-flat-button
        color="primary"
        (click)="createProfile()"
        [disabled]="!newProfileName() || isCreating()"
      >
        <mat-icon>add</mat-icon>
        {{ T.USER_PROFILES.CREATE | translate }}
      </button>
    </div>
  </div>

  <!-- Existing Profiles -->
  <div class="profiles-list-section">
    <h3>{{ T.USER_PROFILES.EXISTING_PROFILES | translate }}</h3>
    <div class="profiles-list">
      @for (profile of profileService.profiles(); track profile.id) {
        <div
          class="profile-item"
          [class.active-profile]="profile.id === profileService.activeProfile()?.id"
        >
          @if (editingProfileId() === profile.id) {
            <!-- Edit Mode -->
            <mat-form-field class="profile-name-edit">
              <input
                matInput
                [(ngModel)]="editingProfileName"
                (keydown.enter)="saveEdit(profile.id)"
                (keydown.escape)="cancelEdit()"
              />
            </mat-form-field>
            <div class="profile-actions">
              <button
                mat-icon-button
                (click)="saveEdit(profile.id)"
                [matTooltip]="T.USER_PROFILES.SAVE | translate"
              >
                <mat-icon>check</mat-icon>
              </button>
              <button
                mat-icon-button
                (click)="cancelEdit()"
                [matTooltip]="T.USER_PROFILES.CANCEL | translate"
              >
                <mat-icon>close</mat-icon>
              </button>
            </div>
          } @else {
            <!-- View Mode -->
            <div class="profile-info-section">
              <div class="profile-name">
                <strong>{{ profile.name }}</strong>
                @if (profile.id === profileService.activeProfile()?.id) {
                  <span class="active-badge">{{
                    T.USER_PROFILES.ACTIVE | translate
                  }}</span>
                }
              </div>
              <div class="profile-meta">
                {{ T.USER_PROFILES.CREATED | translate }}
                {{ profile.createdAt | date: 'medium' }}
              </div>
            </div>
            <div class="profile-actions">
              <button
                mat-icon-button
                (click)="startEdit(profile)"
                [matTooltip]="T.USER_PROFILES.RENAME | translate"
                [disabled]="profileService.profiles().length === 1"
              >
                <mat-icon>edit</mat-icon>
              </button>
              <button
                mat-icon-button
                (click)="exportProfile(profile)"
                [matTooltip]="T.USER_PROFILES.EXPORT_PROFILE | translate"
              >
                <mat-icon>download</mat-icon>
              </button>
              <button
                mat-icon-button
                (click)="deleteProfile(profile)"
                [matTooltip]="T.USER_PROFILES.DELETE_PROFILE | translate"
                [disabled]="
                  profile.id === profileService.activeProfile()?.id ||
                  profileService.profiles().length === 1
                "
                color="warn"
              >
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          }
        </div>
      }
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button
    mat-button
    (click)="close()"
  >
    {{ T.USER_PROFILES.CLOSE | translate }}
  </button>
</mat-dialog-actions>
