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

@section('title', __('daylight::media.media'))

@section('content')
    <livewire:daylight::media-library />

    {{--    <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">--}}
    {{--                    {{ __('daylight::media.create_directory') }}--}}
    {{--                </x-daylight::buttons.secondary>--}}
    {{--            @endcan--}}

    {{--            @can('create:media')--}}
    {{--                <x-daylight::buttons.primary href="#" element="a">--}}
    {{--                     {{ __('daylight::media.upload_files') }}--}}
    {{--                </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
