<aside>
  <header>
    <tui-icon icon="@tui.cog"/>
    <h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>

    <button tuiButtonX></button>
  </header>

  <div id="options">
    @for (option of options; track option) {
      <button tuiButton [iconStart]="'@tui.'+option.icon" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" (click)="selectedOption = option.name">
        {{"chat.userSettingsDialog.options."+option.name|translate}}
      </button>
    }
  </div>
</aside>

<main>
  @switch (selectedOption) {
    @case ("security") {
      <user-settings-security/>
    }
  }
</main>
