@extends('daylight::layouts.app')

@section('title', __('Media'))

@section('content')
    <div wire:ignore">
        <div data-vue-app>
            <media-library />
        </div>
    </div>

{{--    <div class="grid lg:grid-cols-2 border-b border-gray-200 pb-4 mb-4">--}}
{{--        @if($currentDirectory)--}}
{{--            <h1 class="text-xl leading-loose font-medium">{{ $currentDirectory->name }}</h1>--}}
{{--        @else--}}
{{--            <h1 class="text-xl leading-loose font-medium">Media</h1>--}}
{{--        @endif--}}

{{--        <div class="flex items-center lg:justify-end text-sm gap-4">--}}
{{--            @can('create:media')--}}
{{--                <x-daylight::buttons.secondary href="#" element="a">--}}
{{--                    {{ __('Create directory') }}--}}
{{--                </x-daylight::buttons.secondary>--}}
{{--            @endcan--}}

{{--            @can('create:media')--}}
{{--                <x-daylight::buttons.primary href="#" element="a">--}}
{{--                     {{ __('Upload file(s)') }}--}}
{{--                </x-daylight::buttons.primary>--}}
{{--            @endcan--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    @if($directories->count() > 0)--}}
{{--        <div class="grid grid-cols-10 gap-6 mt-8">--}}
{{--            @foreach($directories as $directory)--}}
{{--                <a class="bg-gray-100 hover:bg-gray-200 border-gray-300 w-full flex flex-col items-center justify-center py-6 px-3 aspect-square rounded-lg" href="{{ route('daylight.media.directory', $directory) }}">--}}
{{--                    <svg class="w-10 h-10 text-gray-400 mb-4" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">--}}
{{--                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"></path>--}}
{{--                    </svg>--}}
{{--                    <div class="truncate whitespace-nowrap w-full text-gray-600 text-sm">--}}
{{--                       {{ $directory->name }}{{ $directory->name }}{{ $directory->name }}--}}
{{--                    </div>--}}
{{--                </a>--}}
{{--            @endforeach--}}
{{--        </div>--}}
{{--    @endif--}}

{{--    @if($directories->count() > 0 && $files->count() > 0)--}}
{{--        <hr class="my-8 border-gray-200">--}}
{{--    @endif--}}

{{--    @if($files->count() > 0)--}}
{{--        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 gap-6 mt-8">--}}
{{--            @foreach($files as $file)--}}
{{--                <a href="{{ route('daylight.media.show', $file) }}" class="group relative">--}}
{{--                    <div class="relative rounded-lg overflow-hidden">--}}
{{--                        <div class="absolute inset-0 bg-black bg-opacity-25 opacity-0 group-hover:opacity-100 transition"></div>--}}
{{--                        <img class="aspect-square rounded-lg" src="https://plus.unsplash.com/premium_photo-1663853489900-3f24ea776dea?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyfHx8ZW58MHx8fHx8" alt="">--}}
{{--                    </div>--}}

{{--                    <div class="mt-2">--}}
{{--                        <h3 class="text-gray-600 mb-0 text-sm truncate">{{ $file->name }}{{ $file->name }}{{ $file->name }}</h3>--}}
{{--                        <p class="text-gray-400 mt-0 text-xs">123 kb</p>--}}
{{--                    </div>--}}
{{--                </a>--}}
{{--            @endforeach--}}
{{--        </div>--}}
{{--    @endif--}}
@endsection
