<div id="layout" [class.mobile]="breakpoint() != 'desktopLarge'">
  @if (breakpoint() == "desktopLarge" || selectedOption == "") {
    <aside>
      <header>
        <tui-icon icon="@tui.cog"/>
        <h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>

        @if (breakpoint() != "mobile") {
          <button tuiButtonX (click)="close.emit()"></button>
        }
      </header>

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

  @if (breakpoint() == "desktopLarge" || selectedOption != "") {
    <main>
      @if (breakpoint() != "desktopLarge") {
        <div style="display: flex; align-items: center; gap: 1rem;">
          <button tuiButton appearance="flat" iconStart="@tui.arrow-left" (click)="selectedOption = ''"></button>
          <h3>{{"chat.userSettingsDialog.options."+selectedOption|translate}}</h3>
        </div>
      }
      @switch (selectedOption) {
        @case ("security") {
          <user-settings-security/>
        }
      }
    </main>
  }
</div>
