{#if media}

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

{:else if isVideoFile(media.mimeType)}

{:else}

{getFileType(media.mimeType)}

{/if}

{media.filename}

{#if !isSaving} {/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>
								<MediaUsageList {usage} loading={loadingUsage} />

{#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>
		</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;
			}
		}

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

.preview-video {
				width: 100%;
				height: auto;
				max-width: 100%;
				object-fit: contain;
				background: #000;
				border-radius: $corner-radius-md;
			}
		}

.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;
	}

.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;
			}
		}
	}

// 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;
		}
	}

// 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>