@if (currentUserId) {
<section>
  <div class="dialog">
    <div class="header">
      <img src="./../../../../assets/img/logo.svg" alt="" />
      <p>{{ "contacts.editContact" | translate }}</p>
      <app-btn-close [isEditContactDialogOpen]="false"></app-btn-close>
    </div>
    <div class="content">
      <div class="badge">
        <div
          class="circle"
          [ngStyle]="{
            'background-color': firebaseService.getUserDetails(
              currentUserId,
              'color'
            )
          }"
        >
          <div class="initials">
            @if (!userInitials) {
            {{ firebaseService.getUserDetails(currentUserId, "initials") }} }
            @else {
            {{ userInitials }}
            }
          </div>
        </div>
      </div>
      <div class="form">
        <app-contact-form
          (inititalsEmitter)="inititalsEmitter($event)"
          [currentUserId]="currentUserId"
        ></app-contact-form>
      </div>
    </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 [isEditContactDialogOpen]="false"></app-btn-close>
    </div>
    <div class="content">
      <div class="badge">
        <div
          class="circle"
          [ngStyle]="{
            'background-color': randomColor
          }"
        >
          <div class="initials">{{ userInitials }}</div>
        </div>
      </div>
      <div class="form">
        <app-contact-form
          (inititalsEmitter)="inititalsEmitter($event)"
          [randomColor]="randomColor"
        ></app-contact-form>
      </div>
    </div>
  </div>
</section>
}