{#each assetsGroupByDate as assetsInDateGroup, groupIndex (assetsInDateGroup[0].id)} {@const dateGroupTitle = new Date(assetsInDateGroup[0].fileCreatedAt).toLocaleDateString($locale, groupDateFormat)}

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

{#if (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)} selected={$selectedAssets.has(asset) || $assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1} disabled={$assetsInAlbumStoreState.findIndex((a) => a.id == asset.id) != -1} thumbnailWidth={box.width} thumbnailHeight={box.height} />

{/each}