{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)} {@const dateGroupTitle = formatGroupTitle(DateTime.fromISO(assetsInDateGroup[0].fileCreatedAt).startOf('day'))}

{ isMouseOverGroup = true; assetMouseEventHandler(dateGroupTitle, null); }} on:mouseleave={() => { isMouseOverGroup = false; assetMouseEventHandler(dateGroupTitle, null); }} >

{#if !singleSelect && ((hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle))}

selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)} on:keydown={() => selectAssetGroupHandler(assetsInDateGroup, dateGroupTitle)} > {#if $selectedGroup.has(dateGroupTitle)} {:else} {/if}

{/if} {dateGroupTitle}

{#each assetsInDateGroup as asset, index (asset.id)} {@const box = geometry[groupIndex].boxes[index]}

assetClickHandler(asset, assetsInDateGroup, dateGroupTitle)} on:select={() => assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle)} on:mouse-event={() => assetMouseEventHandler(dateGroupTitle, asset)} selected={$selectedAssets.has(asset) || $assetsInAlbumState.some(({ id }) => id === asset.id)} selectionCandidate={$assetSelectionCandidates.has(asset)} disabled={$assetsInAlbumState.some(({ id }) => id === asset.id)} thumbnailWidth={box.width} thumbnailHeight={box.height} />

{/each}