<aside>
  @for (category of networkSettingsOptions; track category) {
    <header>
      <tui-icon [icon]="'@tui.'+category.icon"></tui-icon>
      @if (category.name == "networkName") {
        {{networkStore().networkData().name}}
      } @else {
        {{'chat.network.settings.options.categories.'+category.name|translate}}
      }
    </header>

    <div class="optionList">
      @for (option of category.options; track option;) {
        <button (click)="selectedOption = option.name" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" tuiButton [disabled]="!option.implemented || !optionRequiredPermissionsGranted(networkStore().networkData().permissions, option.requiredAtLeastOneOf ?? [])">
          <tui-icon [icon]="'@tui.'+option.icon"></tui-icon>
          {{'chat.network.settings.options.'+option.name|translate}}
        </button>
      }
    </div>
  }
</aside>

<main>
  @switch (selectedOption) {
    @case ("overview") {
      <network-settings-overview [networkStore]="networkStore()"/>
    }
  }
</main>
