@php
    $currentMedia = null;

    if (! empty($value)) {
        $currentMedia = \App\Models\Media::query()->find($value);
    }

    $previewId = $previewId ?? $fieldId . '-preview';
    $labelId = $labelId ?? $fieldId . '-label';
    $emptyLabel = $emptyLabel ?? 'No media selected';
@endphp

<div class="media-picker">
    <div class="media-picker__preview" id="{{ $previewId }}">
        @if($currentMedia && $currentMedia->is_image)
            <img src="{{ $currentMedia->preview_url }}" alt="{{ $currentMedia->alt_text ?: $currentMedia->name }}">
        @else
            <div class="admin-empty">No media selected</div>
        @endif
    </div>

    <div class="media-picker__meta">
        <div class="media-picker__header">
            <p class="admin-field__label">{{ $label }}</p>
            <p class="media-picker__name" id="{{ $labelId }}" title="{{ $currentMedia?->name ?? $emptyLabel }}">{{ $currentMedia?->name ?? $emptyLabel }}</p>
        </div>

        <input type="hidden" name="{{ $name }}" id="{{ $fieldId }}" value="{{ $value }}">

        <div class="media-picker__actions">
            <button type="button" class="admin-button admin-button--small" onclick="CodexAdmin.openMediaBrowser('{{ $fieldId }}', '{{ $previewId }}', '{{ $labelId }}')">Choose media</button>
            <button type="button" class="admin-button admin-button--secondary admin-button--small" onclick="CodexAdmin.clearMedia('{{ $fieldId }}', '{{ $previewId }}', '{{ $labelId }}', '{{ addslashes($emptyLabel) }}')">Clear</button>
        </div>

        @if(! empty($hint))
            <p class="admin-field__hint media-picker__hint">{{ $hint }}</p>
        @endif
    </div>
</div>
