@extends('frontend.layouts.app')
@section('title')
    {{translate('Uplive')}}
@endsection
@section('content')
<div class="pageMainLayout__wr homePage">
    <div class="addsSpace__wr leftSpace__wr">
        <a href="javascript:void(0);">
            <img src="images/inner-layout-adds-dummy-bg.png" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
        </a>
    </div>
    <div class="pageInnerLayout__wr">
        <article class="upLiveParentWrapSec__wr">
            <div class="gridRowWrapp__wr" id="upLiveGallery">
                @forelse ($live as $item)
                        <div class="itemColWrap__wr">
                            <div class="itemContentWrap__wr">
                                <a href="{{route('artist.detail', $item['artist_id'])}}" target="_blank" class="profileInfoWrap__wr">
                                    <span class="profilePic__wr">
                                        @if($item['artist_image'])
                                            <img src="{{asset('uploads/artists/' . $item['artist_image'])}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="31" height="31"> 
                                        @else
                                            <img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="31" height="31">
                                        @endif
                                    </span>
                                    <span class="labelTitle__wr">Live Artist Fan</span>
                                </a>
                            </div>
                            <div class="itemImage__wr">
                                <img src="{{asset('uploads/performances/' . $item['performance_image'])}}" loading="lazy" class="img-fluid" alt="uplive-gallery-bg" title="uplive-gallery-bg" width="" height="">
                                <div class="postInfoWrap__wr">
                                    <a href="{{route('performance.detail', $item['performance_id'])}}">
                                        <p class="labelTitle__wr">{{$item['performance_title']}}</p>
                                    </a>
                                    <p class="labelDate__wr">{{date('dS F', strtotime($item['performance_date_time']))}}</p>
                                </div>
                            </div>
                        </div>
                    @empty
                    <div class="row">
                        <div class="display-3">
                            There Are No Live Performances.
                        </div>
                    </div>
                @endforelse
            </div>
        </article>
    </div>
    <div class="addsSpace__wr rightSpace__wr">
        <a href="javascript:void(0);">
            <img src="images/inner-layout-adds-dummy-bg.png" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
        </a>
    </div>
</div>
@endsection
@section('script')
<script>
$(document).ready(function(){
    $(".itemImage__wr, .postInfoWrap__wr").hover(function(){
        $(this).css({'zoom': 0.9});
    });
    $(".itemImage__wr, .postInfoWrap__wr").mouseout(function(){
        $(this).css({'zoom': 1});
    });
})
</script>
@endsection