{#if media}

{#if media.mimeType.startsWith('image/')}

{:else}

{getFileType(media.mimeType)}

{/if}

{media.filename}

{#if !isSaving} {/if}

Type {getFileType(media.mimeType)}

Size {formatFileSize(media.size)}

{#if showExif}

{#if media.width && media.height}

Dimensions {media.width} × {media.height}px

{/if} {#if media.dominantColor}

Dominant Color {media.dominantColor}

{/if}

Uploaded {new Date(media.createdAt).toLocaleDateString()}

{#if media.exifData && Object.keys(media.exifData).length > 0}

{#if media.exifData.camera}

Camera {media.exifData.camera}

{/if} {#if media.exifData.lens}

Lens {media.exifData.lens}

{/if} {#if media.exifData.focalLength}

Focal Length {media.exifData.focalLength}

{/if} {#if media.exifData.aperture}

Aperture {media.exifData.aperture}

{/if} {#if media.exifData.shutterSpeed}

Shutter Speed {media.exifData.shutterSpeed}

{/if} {#if media.exifData.iso}

ISO {media.exifData.iso}

{/if} {#if media.exifData.dateTaken}

Date Taken {new Date(media.exifData.dateTaken).toLocaleDateString()}

{/if} {#if media.exifData.coordinates}

GPS {media.exifData.coordinates.latitude.toFixed(6)}, {media.exifData.coordinates.longitude.toFixed(6)}

{/if}

Show in Photos This photo will be displayed in Photos

<div class="usage-section">
								<div class="section-header">
									<h4>Used In</h4>
									{#if media.mimeType?.startsWith('image/')}
										<button
											class="add-album-button"
											onclick={() => (showAlbumSelector = true)}
											title="Manage albums"
										>
											<AlbumIcon />
											<span>Albums</span>
										</button>
									{/if}
								</div>
								{#if loadingUsage}
									<div class="usage-loading">
										<div class="spinner"></div>
										<span>Loading usage information...</span>
									</div>
								{:else if usage.length > 0}
									<ul class="usage-list">
										{#each usage as usageItem}
											<li class="usage-item">
												<div class="usage-content">
													<div class="usage-header">
														{#if usageItem.contentUrl}
															<a
																href={usageItem.contentUrl}
																class="usage-title"
																target="_blank"
																rel="noopener"
															>
																{usageItem.contentTitle}
															</a>
														{:else}
															<span class="usage-title">{usageItem.contentTitle}</span>
														{/if}
														<span class="usage-type">{usageItem.contentType}</span>
													</div>
													<div class="usage-details">
														<span class="usage-field">{usageItem.fieldDisplayName}</span>
														<span class="usage-date"
															>Added {new Date(usageItem.createdAt).toLocaleDateString()}</span
														>
													</div>
												</div>
											</li>
										{/each}
									</ul>
								{:else}
									<p class="no-usage">This media file is not currently used in any content.</p>
								{/if}
							</div>

{#if albums.length > 0}
								<div class="albums-inline">
									<h4>Albums</h4>
									<div class="album-tags">
										{#each albums as album}
											<a href="/admin/albums/{album.id}/edit" class="album-tag">
												{album.title}
											</a>
										{/each}
									</div>
								</div>
							{/if}
						</div>
					</div>
				</div>

<div class="pane-footer">
					<div class="footer-left">
						<Button
							variant="ghost"
							onclick={handleDelete}
							disabled={isSaving}
							class="delete-button"
						>
							Delete
						</Button>
					</div>

<div class="footer-right">
						<Button variant="primary" onclick={handleSave} disabled={isSaving}>Save Changes</Button>
					</div>
				</div>
			</div>
		</div>
	</Modal>

{#if showAlbumSelector && media}
		<Modal isOpen={showAlbumSelector} onClose={() => (showAlbumSelector = false)} size="medium">
			<AlbumSelector
				mediaId={media.id}
				currentAlbums={albums}
				onUpdate={(updatedAlbums) => {
					albums = updatedAlbums
					showAlbumSelector = false
				}}
				onClose={() => (showAlbumSelector = false)}
			/>
		</Modal>
	{/if}
{/if}

// Left pane - Image preview
	.image-pane {
		flex: 1;
		background-color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: $unit-4x;
		position: relative;
		overflow: hidden;

.image-container {
			max-width: 90%;
			max-height: 90%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

:global(.preview-image) {
				width: 100%;
				height: 100%;
				object-fit: contain;
				border-radius: $corner-radius-md;
				display: block;
			}
		}

.file-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: $unit-2x;
			color: rgba(255, 255, 255, 0.6);

.file-type {
				font-size: 0.875rem;
				font-weight: 500;
			}
		}
	}

// Right pane - Details
	.details-pane {
		width: 400px;
		background-color: white;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

.pane-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $unit-2x $unit-3x;
		border-bottom: $unit-1px solid rgba(0, 0, 0, 0.08);
		flex-shrink: 0;
		gap: $unit-2x;

.filename-header {
			flex: 1;
			font-size: 1.125rem;
			font-weight: 500;
			margin: 0;
			color: $gray-10;
			word-break: break-all;
			line-height: 1.5;
		}

.header-actions {
			display: flex;
			align-items: center;
			gap: $unit;
		}
	}

.pane-body {
		flex: 1;
		overflow-y: auto;
	}

.pane-body-content {
		padding: $unit-3x;
		display: flex;
		flex-direction: column;
		gap: $unit-6x;
	}

.file-info {
		display: flex;
		flex-direction: column;
		gap: $unit-3x;
		padding: $unit-3x;
		background-color: $gray-90;
		border-bottom: $unit-1px solid rgba(0, 0, 0, 0.08);
	}

.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: $unit-3x;
	}

.info-item {
		display: flex;
		flex-direction: column;
		gap: $unit-half;

&.vertical {
			grid-column: 1 / -1;
		}

.label {
			font-size: 0.75rem;
			font-weight: 500;
			color: $gray-50;
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}

.value {
			font-size: 0.875rem;
			color: $gray-10;
			font-weight: 500;

&.color-value {
				display: flex;
				align-items: center;
				gap: $unit-2x;
			}
		}
	}

.color-swatch {
		display: inline-block;
		width: $unit-20px;
		height: $unit-20px;
		border-radius: $corner-radius-xs;
		border: $unit-1px solid rgba(0, 0, 0, 0.1);
		box-shadow: inset 0 0 0 $unit-1px rgba(255, 255, 255, 0.1);
	}

:global(.btn.btn-ghost.exif-toggle) {
		margin-top: $unit-2x;
		justify-content: center;
		background: transparent;
		border: $unit-1px solid $gray-70;

&:hover {
			background: rgba(0, 0, 0, 0.02);
			border-color: $gray-70;
		}
	}

.media-metadata,
	.exif-metadata {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: $unit-3x;
	}

.metadata-divider {
		border-radius: $unit-1px;
		height: $unit-2px;
		background: $gray-80;
		margin: $unit-3x 0;
	}

.edit-form {
		display: flex;
		flex-direction: column;
		gap: $unit-4x;

h4 {
			font-size: 1rem;
			font-weight: 600;
			margin: 0;
			color: $gray-20;
		}
	}

.photography-toggle {
		.toggle-label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: $unit-3x;
			cursor: pointer;
			user-select: none;
		}

.toggle-input {
			position: absolute;
			opacity: 0;
			pointer-events: none;

&:checked + .toggle-content + .toggle-slider {
				background-color: $blue-60;

&::before {
					transform: translateX($unit-20px);
				}
			}

&:disabled + .toggle-content + .toggle-slider {
				opacity: 0.5;
				cursor: not-allowed;
			}
		}

.toggle-slider {
			position: relative;
			width: $unit-5x + $unit-half;
			height: $unit-3x;
			background-color: $gray-80;
			border-radius: $corner-radius-xl;
			transition: background-color 0.2s ease;
			flex-shrink: 0;

&::before {
				content: '';
				position: absolute;
				top: $unit-2px;
				left: $unit-2px;
				width: $unit-20px;
				height: $unit-20px;
				background-color: white;
				border-radius: 50%;
				transition: transform 0.2s ease;
				box-shadow: 0 $unit-1px $unit-3px rgba(0, 0, 0, 0.1);
			}
		}

.toggle-content {
			display: flex;
			flex-direction: column;
			gap: $unit-half;

.toggle-title {
				font-weight: 500;
				color: $gray-10;
				font-size: 0.875rem;
			}

.toggle-description {
				font-size: 0.75rem;
				color: $gray-50;
				line-height: 1.4;
			}
		}
	}

.usage-section {
		.section-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: $unit-2x;

h4 {
				margin: 0;
				font-size: 1rem;
				font-weight: 600;
				color: $gray-20;
			}
		}

.add-album-button {
			display: flex;
			align-items: center;
			gap: $unit-half;
			padding: $unit-half;
			background: transparent;
			border: none;
			border-radius: $corner-radius-sm;
			color: $gray-40;
			cursor: pointer;
			transition: all 0.2s ease;
			font-size: 0.875rem;
			font-weight: 500;

&:hover {
				background: $gray-95;
				color: $gray-20;
			}

svg,
			:global(svg) {
				width: $unit-2x;
				height: $unit-2x;
				flex-shrink: 0;
			}
		}

.usage-list {
			list-style: none;
			padding: 0;
			margin: $unit-2x 0 0 0;
			display: flex;
			flex-direction: column;
			gap: $unit;
		}

.usage-loading {
			display: flex;
			align-items: center;
			gap: $unit-2x;
			padding: $unit-2x;
			color: $gray-50;

.spinner {
				width: $unit-2x;
				height: $unit-2x;
				border: $unit-2px solid $gray-90;
				border-top: $unit-2px solid $gray-50;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}
		}

.usage-item {
			padding: $unit-3x;
			background: $gray-95;
			border-radius: $corner-radius-xl;
			border: $unit-1px solid $gray-90;

.usage-content {
				display: flex;
				flex-direction: column;
				gap: $unit;
			}

.usage-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: $unit-2x;

.usage-title {
					font-weight: 600;
					color: $gray-10;
					text-decoration: none;
					transition: color 0.2s ease;

&:hover {
						color: $blue-60;
					}
				}

.usage-type {
					background: $gray-85;
					color: $gray-30;
					padding: $unit-half $unit;
					border-radius: $corner-radius-sm;
					font-size: 0.75rem;
					font-weight: 500;
					text-transform: uppercase;
					letter-spacing: 0.5px;
					flex-shrink: 0;
				}
			}

.usage-details {
				display: flex;
				align-items: center;
				gap: $unit-3x;

.usage-field {
					color: $gray-40;
					font-size: 0.875rem;
					font-weight: 500;
				}

.usage-date {
					color: $gray-50;
					font-size: 0.75rem;
				}
			}
		}

.no-usage {
			color: $gray-50;
			font-style: italic;
			margin: $unit-2x 0 0 0;
		}
	}

// Albums inline display
	.albums-inline {
		margin-top: $unit-4x;

h4 {
			font-size: 1rem;
			font-weight: 600;
			color: $gray-20;
			margin: 0 0 $unit-2x 0;
		}
	}

.album-tags {
		display: flex;
		flex-wrap: wrap;
		gap: $unit;
	}

.album-tag {
		display: inline-flex;
		align-items: center;
		padding: $unit-half $unit-2x;
		background: $gray-95;
		border: $unit-1px solid $gray-90;
		border-radius: $unit-20px;
		color: $gray-20;
		text-decoration: none;
		font-size: 0.875rem;
		font-weight: 500;
		transition: all 0.2s ease;

&:hover {
			background: $gray-90;
			border-color: $gray-85;
			color: $gray-10;
		}
	}

.pane-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $unit-2x $unit-3x;
		border-top: $unit-1px solid rgba(0, 0, 0, 0.08);
		flex-shrink: 0;

.footer-left {
			:global(.delete-button) {
				color: $red-60;

&:hover {
					background-color: rgba(239, 68, 68, 0.1);
				}
			}
		}

.footer-right {
			display: flex;
			align-items: center;
			gap: $unit-2x;
		}
	}

@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

// Responsive adjustments
	@media (max-width: 768px) {
		.media-details-modal {
			flex-direction: column;
		}

.image-pane {
			height: 300px;
			flex: none;
		}

.details-pane {
			width: 100%;
			flex: 1;
		}

.pane-header {
			padding: $unit-3x;
		}

.pane-body {
			// padding: $unit-3x;
		}

.pane-footer {
			padding: $unit-3x;
			flex-direction: column;
			gap: $unit-3x;
			align-items: stretch;

.footer-right {
				justify-content: space-between;
			}
		}
	}
</style>