dispatch('close')} />

Info

{#if asset.isOffline}

Asset offline

This asset is offline. Immich can not access its file location. Please ensure the asset is available and then rescan the library.

{/if} {#if isOwner}

{#key asset.id}

autoGrowHeight(textArea)}
          bind:value={description}
          use:autoGrowHeight
          use:clickOutside
          on:outclick={handleFocusOut}
          use:shortcut={{
            shortcut: { key: 'Enter', ctrl: true },
            onShortcut: () => handlePromiseError(handleFocusOut()),
          }}
        />
      {/key}
    </section>
  {:else if description}
    <p class="px-4 break-words whitespace-pre-line w-full text-black dark:text-white text-base">{description}</p>
  {/if}

{#if !isSharedLink() && people.length > 0}
    <section class="px-4 py-4 text-sm">
      <div class="flex h-10 w-full items-center justify-between">
        <h2>PEOPLE</h2>
        <div class="flex gap-2 items-center">
          {#if people.some((person) => person.isHidden)}
            <CircleIconButton
              title="Show hidden people"
              icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
              padding="1"
              buttonSize="32"
              on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
            />
          {/if}
          <CircleIconButton
            title="Edit people"
            icon={mdiPencil}
            padding="1"
            size="20"
            buttonSize="32"
            on:click={() => (showEditFaces = true)}
          />
        </div>
      </div>

<div class="mt-2 flex flex-wrap gap-2">
        {#each people as person, index (person.id)}
          {#if showingHiddenPeople || !person.isHidden}
            <a
              class="w-[90px]"
              href="{AppRoute.PEOPLE}/{person.id}?{QueryParameter.PREVIOUS_ROUTE}={currentAlbum?.id
                ? `${AppRoute.ALBUMS}/${currentAlbum?.id}`
                : AppRoute.PHOTOS}"
              on:focus={() => ($boundingBoxesArray = people[index].faces)}
              on:blur={() => ($boundingBoxesArray = [])}
              on:mouseover={() => ($boundingBoxesArray = people[index].faces)}
              on:mouseleave={() => ($boundingBoxesArray = [])}
            >
              <div class="relative">
                <ImageThumbnail
                  curve
                  shadow
                  url={getPeopleThumbnailUrl(person.id)}
                  altText={person.name}
                  title={person.name}
                  widthStyle="90px"
                  heightStyle="90px"
                  thumbhash={null}
                  hidden={person.isHidden}
                />
              </div>
              <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
              {#if person.birthDate}
                {@const personBirthDate = DateTime.fromISO(person.birthDate)}
                {@const age = Math.floor(DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'years').years)}
                {@const ageInMonths = Math.floor(
                  DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'months').months,
                )}
                {#if age >= 0}
                  <p
                    class="font-light"
                    title={personBirthDate.toLocaleString(
                      {
                        month: 'long',
                        day: 'numeric',
                        year: 'numeric',
                      },
                      { locale: $locale },
                    )}
                  >
                    {#if ageInMonths <= 11}
                      Age {ageInMonths} months
                    {:else if ageInMonths > 12 && ageInMonths <= 23}
                      Age 1 year, {ageInMonths - 12} months
                    {:else}
                      Age {age}
                    {/if}
                  </p>
                {/if}
              {/if}
            </a>
          {/if}
        {/each}
      </div>
    </section>
  {/if}

<div class="px-4 py-4">
    {#if asset.exifInfo}
      <div class="flex h-10 w-full items-center justify-between text-sm">
        <h2>DETAILS</h2>
      </div>
    {:else}
      <p class="text-sm">NO EXIF INFO AVAILABLE</p>
    {/if}

{#if asset.exifInfo?.dateTimeOriginal}
      {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
        zone: asset.exifInfo.timeZone ?? undefined,
      })}
      <button
        type="button"
        class="flex w-full text-left justify-between place-items-start gap-4 py-4"
        on:click={() => (isOwner ? (isShowChangeDate = true) : null)}
        title={isOwner ? 'Edit date' : ''}
        class:hover:dark:text-immich-dark-primary={isOwner}
        class:hover:text-immich-primary={isOwner}
      >
        <div class="flex gap-4">
          <div>
            <Icon path={mdiCalendar} size="24" />
          </div>

<div>
            <p>
              {assetDateTimeOriginal.toLocaleString(
                {
                  month: 'short',
                  day: 'numeric',
                  year: 'numeric',
                },
                { locale: $locale },
              )}
            </p>
            <div class="flex gap-2 text-sm">
              <p>
                {assetDateTimeOriginal.toLocaleString(
                  {
                    weekday: 'short',
                    hour: 'numeric',
                    minute: '2-digit',
                    timeZoneName: 'longOffset',
                  },
                  { locale: $locale },
                )}
              </p>
            </div>
          </div>
        </div>

{#if isOwner}
          <div class="p-1">
            <Icon path={mdiPencil} size="20" />
          </div>
        {/if}
      </button>
    {:else if !asset.exifInfo?.dateTimeOriginal && isOwner}
      <div class="flex justify-between place-items-start gap-4 py-4">
        <div class="flex gap-4">
          <div>
            <Icon path={mdiCalendar} size="24" />
          </div>
        </div>
        <div class="p-1">
          <Icon path={mdiPencil} size="20" />
        </div>
      </div>
    {/if}

{#if isShowChangeDate}
      {@const assetDateTimeOriginal = asset.exifInfo?.dateTimeOriginal
        ? DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
            zone: asset.exifInfo.timeZone ?? undefined,
            locale: $locale,
          })
        : DateTime.now()}
      <ChangeDate
        initialDate={assetDateTimeOriginal}
        on:confirm={({ detail: date }) => handleConfirmChangeDate(date)}
        on:cancel={() => (isShowChangeDate = false)}
      />
    {/if}

{#if asset.exifInfo?.fileSizeInByte}
      <div class="flex gap-4 py-4">
        <div><Icon path={mdiImageOutline} size="24" /></div>

<div>
          <p class="break-all flex place-items-center gap-2">
            {asset.originalFileName}
            {#if isOwner}
              <CircleIconButton
                icon={mdiInformationOutline}
                title="Show file location"
                size="16"
                padding="2"
                on:click={toggleAssetPath}
              />
            {/if}
          </p>
          <div class="flex gap-2 text-sm">
            {#if asset.exifInfo.exifImageHeight && asset.exifInfo.exifImageWidth}
              {#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
                <p>
                  {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
                </p>
              {/if}
              {@const { width, height } = getDimensions(asset.exifInfo)}
              <p>{width} x {height}</p>
            {/if}
            <p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
          </div>
          {#if showAssetPath}
            <p class="text-xs opacity-50 break-all" transition:slide={{ duration: 250 }}>
              {asset.originalPath}
            </p>
          {/if}
        </div>
      </div>
    {/if}

{#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.fNumber}
      <div class="flex gap-4 py-4">
        <div><Icon path={mdiCameraIris} size="24" /></div>

<div>
          <p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
          <div class="flex gap-2 text-sm">
            {#if asset.exifInfo?.fNumber}
              <p>{`ƒ/${asset.exifInfo.fNumber.toLocaleString($locale)}` || ''}</p>
            {/if}

{#if asset.exifInfo.exposureTime}
              <p>{`${asset.exifInfo.exposureTime}`}</p>
            {/if}

{#if asset.exifInfo.focalLength}
              <p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
            {/if}

{#if asset.exifInfo.iso}
              <p>
                {`ISO ${asset.exifInfo.iso}`}
              </p>
            {/if}
          </div>
        </div>
      </div>
    {/if}

{#if latlng && $featureFlags.loaded && $featureFlags.map}
  <div class="h-[360px]">
    {#await import('../shared-components/map/map.svelte')}
      {#await delay(timeToLoadTheMap) then}
        
        <div class="flex items-center justify-center h-full w-full">
          <LoadingSpinner />
        </div>
      {/await}
    {:then component}
      <svelte:component
        this={component.default}
        mapMarkers={[
          {
            lat: latlng.lat,
            lon: latlng.lng,
            id: asset.id,
            city: asset.exifInfo?.city ?? null,
            state: asset.exifInfo?.state ?? null,
            country: asset.exifInfo?.country ?? null,
          },
        ]}
        center={latlng}
        zoom={15}
        simplified
        useLocationPin
      >
        <svelte:fragment slot="popup" let:marker>
          {@const { lat, lon } = marker}
          <div class="flex flex-col items-center gap-1">
            <p class="font-bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</p>
            <a
              href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=15#map=15/{lat}/{lon}"
              target="_blank"
              class="font-medium text-immich-primary"
            >
              Open in OpenStreetMap
            </a>
          </div>
        </svelte:fragment>
      </svelte:component>
    {/await}
  </div>
{/if}

{#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
  <section class="px-6 dark:text-immich-dark-fg mt-4">
    <p class="text-sm">SHARED BY</p>
    <div class="flex gap-4 pt-4">
      <div>
        <UserAvatar user={asset.owner} size="md" />
      </div>

<div class="mb-auto mt-auto">
        <p>
          {asset.owner.name}
        </p>
      </div>
    </div>
  </section>
{/if}

{#if albums.length > 0}
  <section class="p-6 dark:text-immich-dark-fg">
    <p class="pb-4 text-sm">APPEARS IN</p>
    {#each albums as album}
      <a data-sveltekit-preload-data="hover" href={`/albums/${album.id}`}>
        <div class="flex gap-4 py-2 hover:cursor-pointer items-center">
          <div>
            <img
              alt={album.albumName}
              class="h-[50px] w-[50px] rounded object-cover"
              src={album.albumThumbnailAssetId &&
                getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
              draggable="false"
            />
          </div>

<div class="mb-auto mt-auto">
            <p class="dark:text-immich-dark-primary">{album.albumName}</p>
            <div class="flex flex-col gap-0 text-sm">
              <div>
                <AlbumListItemDetails {album} />
              </div>
            </div>
          </div>
        </div>
      </a>
    {/each}
  </section>
{/if}

{#if showEditFaces}
  <PersonSidePanel
    assetId={asset.id}
    assetType={asset.type}
    on:close={() => {
      showEditFaces = false;
    }}
    on:refresh={handleRefreshPeople}
  />
{/if}