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}

</section>

{#if !api.isSharedLink && people.length > 0}
    <section class="px-4 py-4 text-sm">
      <h2>PEOPLE</h2>

<div class="mt-4 flex flex-wrap gap-2">
        {#each people as person (person.id)}
          <a href="/people/{person.id}" class="w-[90px]" on:click={() => dispatch('close-viewer')}>
            <ImageThumbnail
              curve
              shadow
              url={api.getPeopleThumbnailUrl(person.id)}
              altText={person.name}
              title={person.name}
              widthStyle="90px"
              heightStyle="90px"
              thumbhash={null}
            />
            <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
            {#if person.birthDate}
              {@const personBirthDate = DateTime.fromISO(person.birthDate)}
              <p
                class="font-light"
                title={personBirthDate.toLocaleString(
                  {
                    month: 'long',
                    day: 'numeric',
                    year: 'numeric',
                  },
                  { locale: $locale },
                )}
              >
                Age {Math.floor(DateTime.fromISO(asset.fileCreatedAt).diff(personBirthDate, 'years').years)}
              </p>
            {/if}
          </a>
        {/each}
      </div>
    </section>
  {/if}

<div class="px-4 py-4">
    {#if !asset.exifInfo && !asset.isExternal}
      <p class="text-sm">NO EXIF INFO AVAILABLE</p>
    {:else if !asset.exifInfo && asset.isExternal}
      <div class="flex gap-4 py-4">
        <div>
          <p class="break-all">
            Metadata not loaded for {asset.originalPath}
          </p>
        </div>
      </div>
    {:else}
      <p class="text-sm">DETAILS</p>
    {/if}

{#if asset.exifInfo?.dateTimeOriginal}
      {@const assetDateTimeOriginal = DateTime.fromISO(asset.exifInfo.dateTimeOriginal, {
        zone: asset.exifInfo.timeZone ?? undefined,
      })}
      <div class="flex gap-4 py-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}

{#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">
            {#if isOwner}
              {asset.originalFileName}
              <button title="Show File Location" on:click={toggleAssetPath}>
                <Icon path={mdiInformationOutline} />
              </button>
            {:else}
              {getAssetFilename(asset)}
            {/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}

<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</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 asset.exifInfo?.city}
      <div class="flex gap-4 py-4">
        <div><Icon path={mdiMapMarkerOutline} size="24" /></div>

<div>
          <p>{asset.exifInfo.city}</p>
          {#if asset.exifInfo?.state}
            <div class="flex gap-2 text-sm">
              <p>{asset.exifInfo.state}</p>
            </div>
          {/if}
          {#if asset.exifInfo?.country}
            <div class="flex gap-2 text-sm">
              <p>{asset.exifInfo.country}</p>
            </div>
          {/if}
        </div>
      </div>
    {/if}
  </div>
</section>

{#if latlng && $featureFlags.loaded && $featureFlags.map}
  <div class="h-[360px]">
    <Map mapMarkers={[{ lat: latlng.lat, lon: latlng.lng, id: asset.id }]} center={latlng} zoom={14} simplified>
      <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>
    </Map>
  </div>
{/if}

{#if asset.owner && !isOwner}
  <section class="px-6 pt-6 dark:text-immich-dark-fg">
    <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"
          on:click={() => dispatch('click', album)}
          on:keydown={() => dispatch('click', album)}
        >
          <div>
            <img
              alt={album.albumName}
              class="h-[50px] w-[50px] rounded object-cover"
              src={album.albumThumbnailAssetId &&
                api.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 gap-2 text-sm">
              <p>{album.assetCount} items</p>
              {#if album.shared}
                <p>· Shared</p>
              {/if}
            </div>
          </div>
        </div>
      </a>
    {/each}
  </section>
{/if}