<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>
      @for (album of store.albums(); track album) {
        <div class="album">
          <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>
      }
    </main>
  }
</main>
