<div tuiGroup id="options" orientation="vertical">
  <div>
    <header>
      <tui-icon icon="@tui.image"></tui-icon>
      {{ "chat.network.settings.overviewPage.networkPicture"|translate }}
      <oimg [src]="networkStore().networkData().picture" height="25px" width="25px" [radius]="6"/>
    </header>

    <main>
      <button tuiButton appearance="outline" disabled iconEnd="@tui.file-up">
        {{ "chat.network.settings.overviewPage.uploadNewPicture"|translate }}
      </button>
    </main>
  </div>
  <div>
    <ng-template [(tuiDialog)]="setNewNameDialogOpen"
                 [tuiDialogOptions]="{label: 'chat.network.settings.overviewPage.setNewName'|translate}">

      <tui-textfield #newName iconStart="@tui.signature">
        <label tuiLabel>{{"chat.network.settings.overviewPage.setNewNameDialog.label"|translate}}</label>
        <input type="text" tuiInput>
      </tui-textfield>
      @if (setNewNameError() != "") {
        <tui-error [error]="setNewNameError()"></tui-error>
      }

      <footer>
        <button tuiButton iconStart="@tui.check" [loading]="setNewNamePending()" [disabled]="setNewNamePending()" (click)="setNewName(newName.value())">
          {{'chat.network.settings.overviewPage.setNewName'|translate}}
        </button>
      </footer>
    </ng-template>

    <header>
      <tui-icon icon="@tui.network"></tui-icon>
      {{ "chat.network.settings.overviewPage.networkName"|translate }}
      <b style="color: gray">{{ networkStore().networkData().name }}</b>
    </header>
    <main>
      <button (click)="setNewNameDialogOpen.set(true)" tuiButton appearance="outline" iconEnd="@tui.pencil">
        {{ "chat.network.settings.overviewPage.setNewName"|translate }}
      </button>
    </main>

  </div>
  <div>
    <ng-template [(tuiDialog)]="makeNetworkPrivateWarnDialogOpen"
                 [tuiDialogOptions]="{label: 'chat.network.settings.overviewPage.changeToPrivateDialog.label'|translate}">
      <ul>
        <li>
          <tui-icon icon="@tui.eye-off"/>
          {{ "chat.network.settings.overviewPage.changeToPrivateDialog.warn.1"|translate }}
        </li>
        <li>
          <tui-icon icon="@tui.ticket"/>
          {{ "chat.network.settings.overviewPage.changeToPrivateDialog.warn.2"|translate }}
        </li>
        <li>
          <tui-icon icon="@tui.radio"/>
          {{ "chat.network.settings.overviewPage.changeToPrivateDialog.warn.3"|translate }}
        </li>
      </ul>
      <footer>
        <button tuiButton iconStart="@tui.eye-off" [loading]="networkVisChangePending()" [disabled]="networkVisChangePending()" (click)="changeVisibility('private')">
          {{'chat.network.settings.overviewPage.changeToPrivate'|translate}}
        </button>
      </footer>
    </ng-template>

    <ng-template [(tuiDialog)]="makeNetworkPublicWarnDialogOpen"
                 [tuiDialogOptions]="{label: 'chat.network.settings.overviewPage.changeToPublicDialog.label'|translate}">
      <ul>
        <li>
          <tui-icon icon="@tui.eye"/>
          {{ "chat.network.settings.overviewPage.changeToPublicDialog.warn.1"|translate }}
        </li>
        <li>
          <tui-icon icon="@tui.ticket"/>
          {{ "chat.network.settings.overviewPage.changeToPublicDialog.warn.2"|translate }}
        </li>
        <li>
          <tui-icon icon="@tui.radio"/>
          {{ "chat.network.settings.overviewPage.changeToPublicDialog.warn.3"|translate }}
        </li>
      </ul>
      <footer>
        <button tuiButton iconStart="@tui.eye" [loading]="networkVisChangePending()" [disabled]="networkVisChangePending()" (click)="changeVisibility('public')">
          {{'chat.network.settings.overviewPage.changeToPublic'|translate}}
        </button>
      </footer>
    </ng-template>

    <header>
      @if (networkStore().networkData().visibility == "public") {
        <tui-icon icon="@tui.eye"></tui-icon>
      } @else {
        <tui-icon icon="@tui.eye-off"></tui-icon>
      }
      {{ "chat.network.settings.overviewPage.networkVisibility"|translate }}
    </header>

    <main>
      @if (networkStore().networkData().visibility == "public") {
        <button tuiButton appearance="outline" iconEnd="@tui.eye-off" (click)="makeNetworkPrivateWarnDialogOpen.set(true)">
          {{ "chat.network.settings.overviewPage.changeToPrivate"|translate }}
        </button>
      } @else {
        <button tuiButton appearance="outline" iconEnd="@tui.eye" (click)="makeNetworkPublicWarnDialogOpen.set(true)">
          {{ "chat.network.settings.overviewPage.changeToPublic"|translate }}
        </button>
      }
    </main>
  </div>
</div>
