<ng-template [(tuiDialog)]="viewerOpen">
  <oimg [src]="viewedPicture!.path" height="100%" width="100%" [radius]="0"></oimg>
</ng-template>

<main>
  @defer (when store) {
    <navbar backButtonDest="/chat">
      <div class="data">
        <oimg [src]="store.uploaderData().pfp" height="50px" width="50px" [radius]="15"></oimg>
        <div class="uploader-data">
          @if (!store.uploaderData().displayName) {
            <span class="main-name">{{'@'+store.uploaderData().username}}</span>
          } @else {
            <span class="main-name">{{store.uploaderData().displayName}}</span>
            <span class="alt-name">{{'@'+store.uploaderData().username}}</span>
          }
        </div>
      </div>

      <div class="items-right">
      </div>
    </navbar>

    <main>
      @if (openedAlbum) {
        <div style="display: flex; align-items: center; gap: 10px">
          <button tuiButton appearance="flat" iconStart="@tui.chevron-left" (click)="exitAlbum()"></button>
          <h1 style="padding: 0; margin: 0">{{openedAlbum.name}}</h1>
        </div>

        <div id="pictureList">
          @for (picture of openedAlbum.images; track picture) {
            <oimg (click)="viewPicture(picture)" [src]="picture.path" height="200px" width="200px" [radius]="25" objectFit="none"></oimg>
          }
        </div>
      } @else {
        @if (store.albums().length == 0) {
          <tui-block-status style="height: 300px">
            <tui-icon icon="@tui.frown" tuiSlot="top" style="font-size: 150px"></tui-icon>
            <h4>{{"chat.pictures.albumList.noAlbum"|translate}}</h4>
          </tui-block-status>
        } @else {
          <div id="albumList">
            @for (album of store.albums(); track album) {
              <div class="album" (click)="enterAlbum(album.albumId)">
                <masonry [maxColSize]="3" style="height: 300px; pointer-events: none;">
                  @for (file of album.images; track file) {
                    <img [src]="file.path+'_thumbnail.png'" style="filter: blur(5px)"/>
                  }
                </masonry>
                <div class="album-name">
                  <h2>{{album.name}}</h2>
                </div>
              </div>
            }
          </div>
        }
      }
    </main>
  }
</main>
