shouldShowUploadBoxByDefault())
x-on:toggle-upload-box.window="showUploadBox = ! showUploadBox"
@endunless
{{-- This event is dispatched from Livewire, so we need an event listener in addition to the global store. --}}
x-on:reset-selected-media-item.window="$store.browseLibrary.resetMediaItemsSelection()"
x-on:browse-library-load.window="@this.call('loadMedia', $event.detail.defaultFolder )"
>
@if ($this->canCreate())
shouldShowUploadBoxByDefault())
x-show="showUploadBox"
x-collapse
x-cloak
@endunless
>
@livewire('media-library::media.upload-media')
@endif
@if ($this->canCreateFolder())
@svg('heroicon-o-plus', 'h-6 w-6 text-white')
{{ Str::ucfirst(__('filament-media-library::translations.phrases.create-folder')) }}
@endif
@if ($browseLibraryItems?->isEmpty())
@include('media-library::media.empty-state')
@for ($i = 0; $i < 22; $i++)
@endfor
@else
@foreach ($browseLibraryItems ?? [] as $browseLibraryItem)
@if ($browseLibraryItem->isMediaLibraryItem())
@php
/** @var MediaLibraryItem $mediaItem */
$mediaItem = $browseLibraryItem->item;
/** @var Media $image */
$image = $mediaItem->getfirstMedia('library');
$conversion = FilamentMediaLibrary::get()->getThumbnailMediaConversion();
@endphp
hasResponsiveImages($conversion))
srcset="{{ $image->getSrcset($conversion) }}"
{{-- Up to 1279px (Tailwind CSS xl) use 30vw, then 20vw. --}}
sizes="(max-width: 1279px) 80vw, (min-width: 1279px) 50vw"
@endif
alt="{{ $mediaItem?->getMeta()->name }}"
:class="{
'ring-2 ring-offset-4 ring-primary-600 dark:ring-offset-gray-800': $store.browseLibrary.isMediaItemSelected('{{ $mediaItem->getKey() }}'),
'object-cover rounded-lg dark:opacity-80': true,
'focus-within:ring-2 focus-within:ring-offset-4 focus-within:ring-offset-gray-100 focus-within:ring-primary-600': true
}"
/>
{{ $image->name }}
{{ $image->human_readable_size }}
@elseif ($browseLibraryItem->isMediaLibraryFolder())
@svg('heroicon-s-folder', 'absolute left-4 top-4 w-10 text-primary-500 dark:opacity-80')
@if ($this->canRenameFolder($browseLibraryItem->item) || $this->canMoveFolder($browseLibraryItem->item) || $this->canDeleteFolder($browseLibraryItem->item))
@svg('heroicon-o-ellipsis-vertical', 'w-6 stroke-gray-400 dark:stroke-gray-600')
@endif
@if ($this->canRenameFolder($browseLibraryItem->item))
{{ Str::ucfirst(__('filament-media-library::translations.phrases.rename-folder')) }}
@endif
@if ($this->canMoveFolder($browseLibraryItem->item))
{{ Str::ucfirst(__('filament-media-library::translations.phrases.move-folder')) }}
@endif
@if ($this->canDeleteFolder($browseLibraryItem->item))
{{ Str::ucfirst(__('filament-media-library::translations.phrases.delete-folder')) }}
@endif
{{ $browseLibraryItem->item->name }}
{{ $browseLibraryItem->item->name }}
{{ trans_choice('filament-media-library::translations.sentences.folder-files', $browseLibraryItem->getChildrenCount(), ['count' => $browseLibraryItem->getChildrenCount()]) }}
@endif
@endforeach
@if ($browseLibraryItems?->hasPages())
@endif
@endif
config('filament.layout.forms.actions.alignment') === 'left',
// 'justify-center' => config('filament.layout.forms.actions.alignment') === 'center',
'justify-end' => true || config('filament.layout.forms.actions.alignment') === 'right',
])
>
{{ Str::ucfirst(__('filament-media-library::translations.phrases.cancel')) }}
{{ Str::ucfirst(__('filament-media-library::translations.phrases.create')) }}
config('filament.layout.forms.actions.alignment') === 'left',
// 'justify-center' => config('filament.layout.forms.actions.alignment') === 'center',
'justify-end' => true || config('filament.layout.forms.actions.alignment') === 'right',
])
>
{{ Str::ucfirst(__('filament-media-library::translations.phrases.cancel')) }}
{{ Str::ucfirst(__('filament-media-library::translations.phrases.rename-folder')) }}
config('filament.layout.forms.actions.alignment') === 'left',
// 'justify-center' => config('filament.layout.forms.actions.alignment') === 'center',
'justify-end' => true || config('filament.layout.forms.actions.alignment') === 'right',
])
>
{{ Str::ucfirst(__('filament-media-library::translations.phrases.cancel')) }}
{{ Str::ucfirst(__('filament-media-library::translations.phrases.move-folder')) }}
config('filament.layout.forms.actions.alignment') === 'left',
// 'justify-center' => config('filament.layout.forms.actions.alignment') === 'center',
'justify-end' => true || config('filament.layout.forms.actions.alignment') === 'right',
])
>
{{ Str::ucfirst(__('filament-media-library::translations.phrases.cancel')) }}
{{ Str::ucfirst(__('filament-media-library::translations.phrases.confirm')) }}