{#if $isMultiSelectState} assetInteractionStore.clearMultiselect()}> {#if isAllUserOwned} assetStore.triggerUpdate()} /> assetStore.triggerUpdate()} /> {/if} {#if isOwned || isAllUserOwned} handleRemoveAssets(assetIds)} /> {/if} {#if isAllUserOwned} assetStore.removeAsset(assetId)} /> {/if} {:else} {#if viewMode === ViewMode.VIEW || viewMode === ViewMode.ALBUM_OPTIONS} goto(backUrl)}> (viewMode = ViewMode.SELECT_ASSETS)} icon={mdiFileImagePlusOutline} /> {#if isOwned} (viewMode = ViewMode.SELECT_USERS)} icon={mdiShareVariantOutline} /> (viewMode = ViewMode.CONFIRM_DELETE)} icon={mdiDeleteOutline} /> {/if} {#if album.assetCount > 0} {#if isOwned}

(viewMode = ViewMode.VIEW)}> {#if viewMode === ViewMode.ALBUM_OPTIONS} {#if album.assetCount !== 0} {/if} (viewMode = ViewMode.SELECT_THUMBNAIL)} text="Set album cover" /> (viewMode = ViewMode.OPTIONS)} text="Options" /> {/if}

{/if} {/if} {#if isCreatingSharedAlbum && album.sharedUsers.length === 0} {/if} {/if} {#if viewMode === ViewMode.SELECT_ASSETS}

{#if $timelineSelected.size === 0} Add to album {:else} {$timelineSelected.size.toLocaleString($locale)} selected {/if}

{/if} {#if viewMode === ViewMode.SELECT_THUMBNAIL} (viewMode = ViewMode.VIEW)}> Select Album Cover {/if} {/if}

{#if viewMode === ViewMode.SELECT_ASSETS} {:else} 0} isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL} singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL} showArchiveIcon on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)} on:escape={handleEscape} > {#if viewMode !== ViewMode.SELECT_THUMBNAIL}

e.key === 'Enter' && titleInput.blur()} on:blur={handleUpdateName} class="w-[99%] border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned ? 'hover:border-gray-400' : 'hover:border-transparent'} bg-immich-bg focus:border-b-2 focus:border-immich-primary focus:outline-none dark:bg-immich-dark-bg dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray" type="text" bind:value={album.albumName} disabled={!isOwned} bind:this={titleInput} title="Edit Title" placeholder="Add a title" /> {#if album.assetCount > 0}

{getDateRange()}

{album.assetCount} items

{/if} {#if album.sharedUsers.length > 0 || (album.hasSharedLink && isOwned)}

{#if album.hasSharedLink && isOwned} (viewMode = ViewMode.LINK_SHARING)} /> {/if} {#each album.sharedUsers as user (user.id)} {/each} {#if isOwned} (viewMode = ViewMode.SELECT_USERS)} title="Add more users" /> {/if}

{/if} {#if isOwned}

autoGrowHeight(textArea)}
                  on:focusout={handleUpdateDescription}
                  use:autoGrowHeight
                  placeholder="Add description"
                />
              {:else if description}
                <p class="break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
              {/if}
            </section>
          {/if}

{#if album.assetCount === 0}
            <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
              <div class="w-[300px]">
                <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
                <button
                  on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
                  class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
                >
                  <span class="text-text-immich-primary dark:text-immich-dark-primary"
                    ><Icon path={mdiPlus} size="24" />
                  </span>
                  <span class="text-lg">Select photos</span>
                </button>
              </div>
            </section>
          {/if}
        </AssetGrid>
      {/if}

{#if showActivityStatus}
        <div class="absolute z-[2] bottom-0 right-0 mb-6 mr-6 justify-self-end">
          <ActivityStatus
            disabled={!album.isActivityEnabled}
            {isLiked}
            numberOfComments={$numberOfComments}
            {isShowActivity}
            on:favorite={handleFavorite}
            on:openActivityTab={handleOpenAndCloseActivityTab}
          />
        </div>
      {/if}
    </main>
  </div>
  {#if album.sharedUsers.length > 0 && album && isShowActivity && $user && !$showAssetViewer}
    <div class="flex">
      <div
        transition:fly={{ duration: 150 }}
        id="activity-panel"
        class="z-[2] w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
        translate="yes"
      >
        <ActivityViewer
          user={$user}
          disabled={!album.isActivityEnabled}
          albumOwnerId={album.ownerId}
          albumId={album.id}
          {isLiked}
          bind:reactions
          on:addComment={() => updateNumberOfComments(1)}
          on:deleteComment={() => updateNumberOfComments(-1)}
          on:deleteLike={() => (isLiked = null)}
          on:close={handleOpenAndCloseActivityTab}
        />
      </div>
    </div>
  {/if}
</div>
{#if viewMode === ViewMode.SELECT_USERS}
  <UserSelectionModal
    {album}
    on:select={({ detail: users }) => handleAddUsers(users)}
    on:share={() => (viewMode = ViewMode.LINK_SHARING)}
    on:close={() => (viewMode = ViewMode.VIEW)}
  />
{/if}

{#if viewMode === ViewMode.LINK_SHARING}
  <CreateSharedLinkModal albumId={album.id} on:close={() => (viewMode = ViewMode.VIEW)} />
{/if}

{#if viewMode === ViewMode.VIEW_USERS}
  <ShareInfoModal
    on:close={() => (viewMode = ViewMode.VIEW)}
    {album}
    on:remove={({ detail: userId }) => handleRemoveUser(userId)}
  />
{/if}

{#if viewMode === ViewMode.CONFIRM_DELETE}
  <ConfirmDialogue
    title="Delete album"
    confirmText="Delete"
    on:confirm={handleRemoveAlbum}
    on:cancel={() => (viewMode = ViewMode.VIEW)}
  >
    <svelte:fragment slot="prompt">
      <p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
      <p>If this album is shared, other users will not be able to access it anymore.</p>
    </svelte:fragment>
  </ConfirmDialogue>
{/if}

{#if viewMode === ViewMode.OPTIONS && $user}
  <AlbumOptions
    {album}
    user={$user}
    on:close={() => (viewMode = ViewMode.VIEW)}
    on:toggleEnableActivity={handleToggleEnableActivity}
    on:showSelectSharedUser={() => (viewMode = ViewMode.SELECT_USERS)}
  />
{/if}

::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: white;
  }
</style>