@if (overlayData !== "new") {
<section>
  <div class="dialog">
    <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
            [(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>
</section>
} @else {
<section>
  <div class="dialog">
    <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
            [(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>
</section>
}