@section('title') {{mb_strimwidth($details[0]->title, 0, 64, '...')}} @endsection
@section('desc') {{mb_strimwidth($details[0]->title, 0, 128, '...')}} NBA clip uploaded on the {{ \Carbon\Carbon::parse($details[0]->posted)->format('jS F Y')}} @endsection
<x-app-layout>
    <div class="row">
        <div class="card">
            <div class="card-body px-2">
                <h1 class="card-title text-center mb-2">{{$details[0]->title}}</h1>
                <div class="row text-center mb-3">
                    <div class="col-12 col-md-3"></div>
                    <div class="col-12 col-md-6" style="width: 1080px; height: auto">
                        <video id="video-container" controls width="100%"
                               poster="{{$thumbnail_url}}">
                            <source id="video-player"
                                    src="{{$video_url}}"
                                    type="video/mp4">
                            Sorry, your browser doesn't support embedded videos.
                        </video>
                    </div>
                    <div class="col-12 col-md-3"></div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-4 mobile-center">
                        <p>{{number_format($up_comments[0]->ups, 0)}}
                            <i>upvotes</i>. {{ number_format($up_comments[0]->comments, 0) }}
                            <i>comments</i>. @if($details[0]->user_name === '[deleted]')
                                <span class="text-light">deleted user</span>
                            @else
                                <a
                                    href="https://reddit.com/u/{{$details[0]->user_name}}">{{$details[0]->user_name}}</a>
                            @endif
                        </p>
                    </div>
                    <div class="col-12 col-md-4 text-center">
                        <p>
                            <a href=" {{route('date', \Carbon\Carbon::parse($details[0]->posted)->tz('America/New_York')->format('Y-m-d'))}}">{{\Carbon\Carbon::parse($details[0]->posted)->tz('America/New_York')->format('g:ia, jS F Y')}}</a>
                        </p>
                    </div>
                    <div class="col-12 col-md-4 text-center">
                        <p><a href="https://reddit.com/r/nba/{{$details[0]->id}}">View on Reddit</a></p>
                    </div>
                </div>
                <div class="row my-2">
                    <div class="col-12 col-md-6 pl-4 mb-2 mobile-center">
                        <span
                            class="badge bg-primary">{{$details[0]->width}} x {{$details[0]->height}}p</span>
                        <span
                            class="badge bg-primary">{{number_format(($details[0]->size / 1024 / 1024), 2)}} MB</span>
                        <span
                            class="badge bg-primary">{{number_format(($details[0]->bitrate / 1000), 0)}} Kbps</span>
                        <span class="badge bg-primary">{{$details[0]->duration}}s</span>
                    </div>
                    <div class="col-12 col-md-6 text-center">
                        @foreach($keywords as $k)
                            <span class="badge rounded-pill keyword-badge"><a
                                    href="{{route('keyword', $k->word)}}">{{$k->word}}</a></span>
                        @endforeach
                    </div>
                </div>
                <div class="list-group">
                    {{\App\Models\Post::similarVideosHandler($details[0]->id)}}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>