{{ $model := . }}

{{- if not $model.image -}}
	<div class="text-sm text-gray-500">Kein Bild vorhanden.</div>
{{- else -}}
	{{- $preview := $model.image.PreviewPath -}}
	{{- $image := $model.image.ImagePath -}}
	<div class="border-b pb-3">
		<div class="font-semibold text-slate-900">{{ $model.image.Title }}</div>
		{{- if $model.image.Description -}}
			<div class="text-xs text-slate-500 annotation-content mt-1">{{ Safe $model.image.Description }}</div>
		{{- end -}}
		<div class="text-xs text-slate-400 mt-1">{{ $model.image.Key }}</div>
	</div>
	<div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-4">
		<div class="text-xs">
			<div class="text-slate-500 uppercase tracking-wide text-[0.65rem] mb-1">Vorschau</div>
			{{- if $preview -}}
				<a href="{{ $preview }}" target="_blank" rel="noopener noreferrer" data-url="{{ $preview }}">
					<img src="{{ $preview }}" alt="" class="h-20 w-20 object-cover rounded-sm border border-slate-200 hover:opacity-90" />
				</a>
			{{- else -}}
				<span class="text-slate-400">—</span>
			{{- end -}}
		</div>
		<div class="text-xs">
			<div class="text-slate-500 uppercase tracking-wide text-[0.65rem] mb-1">Bild</div>
			{{- if $image -}}
				<a href="{{ $image }}" target="_blank" rel="noopener noreferrer" data-url="{{ $image }}">
					<img src="{{ $image }}" alt="" class="h-20 w-20 object-cover rounded-sm border border-slate-200 hover:opacity-90" />
				</a>
			{{- else -}}
				<span class="text-slate-400">—</span>
			{{- end -}}
		</div>
	</div>
	<div class="mt-3 flex items-center justify-between text-xs text-slate-500">
		<span>{{ GermanDate $model.image.Created }} {{ GermanTime $model.image.Created }}</span>
		{{- if $image -}}
			<button type="button" class="text-slate-600 hover:text-slate-900" data-action="copy" data-url="{{ $image }}">
				<i class="ri-file-copy-line"></i> Link kopieren
			</button>
		{{- end -}}
	</div>
{{- end -}}