@if (overlayData !== "new") {

<div class="overlay">
  <div class="header">
    <img src="./../../../../assets/img/logo.svg" alt="" />
    <p>{{ "contacts.editContact" | translate }}</p>
    <app-btn-close (click)="closeDialog()"></app-btn-close>
  </div>
  <div class="content">
    <div class="badge">
      <div class="picker">
        <input
          id="colorPicker"
          name="colorPicker"
          [(colorPicker)]="overlayData.color"
          [style.background]="newColor === '' ? overlayData.color : newColor"
          (colorPickerChange)="updateColor($event)"
        />
        <div class="initials">
          @if (!userInitials) {
          {{ overlayData.initials }} } @else {
          {{ userInitials }}
          }
        </div>
      </div>
    </div>
    <div class="form">
      <app-contact-form
        (initialsEmitter)="initialsEmitter($event)"
        (closeDialogEmitter)="closeDialog()"
        [selectedUser]="overlayData"
        [newColor]="newColor"
        [currentColor]="overlayData.color"
      ></app-contact-form>
    </div>
  </div>
  <div class="notice">{{ "contacts.notice" | translate }}</div>
</div>
} @else {

<div class="overlay">
  <div class="header">
    <img src="./../../../../assets/img/logo.svg" alt="" />
    <p>{{ "contacts.addContact" | translate }}</p>
    <app-btn-close (click)="closeDialog()"></app-btn-close>
  </div>
  <div class="content">
    <div class="badge">
      <div class="picker">
        <input
          id="colorPicker"
          name="colorPicker"
          [(colorPicker)]="randomColor"
          [style.background]="randomColor"
          (colorPickerSelect)="updateColor($event)"
        />
        <div class="initials">{{ userInitials }}</div>
      </div>
    </div>
    <div class="form">
      <app-contact-form
        (initialsEmitter)="initialsEmitter($event)"
        (closeDialogEmitter)="closeDialog()"
        [randomColor]="randomColor"
        [newColor]="newColor"
      ></app-contact-form>
    </div>
  </div>
  <div class="notice">{{ "contacts.notice" | translate }}</div>
</div>
}