@if (currentUserId) { @for (user of
firebaseService.getUserDataFromId(currentUserId); track user) {
<section>
  <div class="dialog">
    <div class="header">
      <img src="./../../../../assets/img/logo.svg" alt="" />
      <p>{{ "contacts.editContact" | translate }}</p>
      <app-btn-close [isContactDialogOpen]="false"></app-btn-close>
    </div>
    <div class="content">
      <div class="badge">
        <div class="picker">
          <input
            [(colorPicker)]="currentColor"
            [style.background]="newColor === '' ? user.color : newColor"
            (colorPickerChange)="updateColor($event)"
          />
          <div class="initials">
            @if (!userInitials) {
            {{ user.initials }} } @else {
            {{ userInitials }}
            }
          </div>
        </div>
      </div>
      <div class="form">
        <app-contact-form
          (initialsEmitter)="initialsEmitter($event)"
          [currentUserId]="currentUserId"
          [newColor]="newColor"
          [currentColor]="user.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 [isContactDialogOpen]="false"></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)"
          [randomColor]="randomColor"
          [newColor]="newColor"
        ></app-contact-form>
      </div>
    </div>
    <div class="notice">{{ "contacts.notice" | translate }}</div>
  </div>
</section>
}