<p>
  <tui-icon icon="@tui.info"/>
  {{ "chat.userSettingsDialog.security.label"|translate }}
</p>
<div id="options" tuiGroup orientation="vertical">
  <user-settings-security-password/>
  <user-settings-security-email/>
  <div class="option">
    <header>
      <tui-icon icon="@tui.phone"/>
      <span>{{ "chat.userSettingsDialog.security.phoneNumber"|translate }}</span>

      @if (serviceManager.currentSession()!.userData.phoneSet) {
        <div tuiBadge appearance="positive"
             iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
        </div>
      } @else {
        <div tuiBadge appearance="negative"
             iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
        </div>
      }
    </header>

    <main>
      <button tuiButton appearance="outline"
              [iconStart]="serviceManager.currentSession()!.userData.phoneSet ? '@tui.pencil' : '@tui.plus'">
        @if (serviceManager.currentSession()!.userData.phoneSet) {
          {{ "chat.userSettingsDialog.security.changePhone"|translate }}
        } @else {
          {{ "chat.userSettingsDialog.security.setPhone"|translate }}
        }
      </button>

      @if (serviceManager.currentSession()!.userData.phoneSet) {
        <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x"
                style="color: var(--tui-text-negative)">
          {{ "chat.userSettingsDialog.security.removePhone"|translate }}
        </button>
      }
    </main>
  </div>
</div>
