@extends('admin.layout.app')
@section('content')
    <!-- Content -->
    <main class="grow pt-5" id="content" role="content">
    @include('admin.user.header')
    <!-- Container -->
        <div class="kt-container-fixed">
            <!-- begin: works -->
            <div class="flex flex-col items-stretch gap-5 lg:gap-7.5">
                <!-- begin: toolbar -->
                <div class="flex flex-wrap items-center gap-5 justify-between">
                    <h3 class="text-lg text-mono font-semibold">
                        {{$user->getMedia('portfolio')->count()}} Works
                    </h3>
                </div>
                <!-- end: toolbar -->
                <!-- begin: cards -->
                <div id="works_cards">
                    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 lg:gap-7.5">
                        @if($user->getMedia('portfolio')->isEmpty())
                            <label >No Portfolio Found!</label>
                        @else
                            @foreach($user->getMedia('portfolio') as $media)
                                <div class="kt-card shadow-md shadow-black/5 border-0">
                                    <a class="text-lg font-medium text-mono hover:text-primary"
                                       href="{{$media->getUrl()}}">
                                        <img alt="" class="w-full h-48 rounded-t-xl"
                                             src="{{ $media->getUrl() }}"/>
                                    </a>
                                    <div class="kt-card-border kt-card-rounded-b flex flex-col gap-2 px-5 py-4.5">

                                        <div class="flex items-center justify-between grow">
                                            <div class="flex items-center grow">
                                                <img alt="" class="rounded-full size-7 me-2"
                                                     src="{{$user->getFirstMediaURL('profile_image')}}"/>
                                                <a class="text-sm text-foreground hover:text-primary mb-px"
                                                   href="#">
                                                    {{$user->name ?? ''}}
                                                </a>
                                            </div>
                                            {{--                                    <div class="flex gap-3 items-center">--}}
                                            {{--                                        <div class="flex gap-1 items-center">--}}
                                            {{--                                            <i class="ki-filled ki-heart text-base text-muted-foreground">--}}
                                            {{--                                            </i>--}}
                                            {{--                                            <span class="text-sm text-foreground py-2">--}}
                                            {{--               24--}}
                                            {{--              </span>--}}
                                            {{--                                        </div>--}}
                                            {{--                                        <div class="flex gap-1 items-center">--}}
                                            {{--                                            <i class="ki-filled ki-messages text-base text-muted-foreground">--}}
                                            {{--                                            </i>--}}
                                            {{--                                            <span class="text-sm text-foreground py-2">--}}
                                            {{--               5--}}
                                            {{--              </span>--}}
                                            {{--                                        </div>--}}
                                            {{--                                    </div>--}}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                    </div>
                    <div class="flex grow justify-center pt-5 lg:pt-7.5">
                        <a class="kt-link kt-link-underlined kt-link-dashed" href="#">
                            Show more works
                        </a>
                    </div>
                    @endif
                </div>
                <!-- end: cards -->

            </div>
            <!-- end: works -->
        </div>
        <!-- End of Container -->
    </main>
    <!-- End of Content -->
@endsection