@extends('public._layout.layout')

@section('main')

<section class="content">
    <div class="video-block">
        <div class="person mobile-size">
            @isset($owner['image_url'])
            <div class="person__avatar">
                <img src="{{ $owner['image_url'] }}" alt="#">
            </div>
            @endisset
            <span>{{ $owner['name'] }}</span>
            <span class="person__date">{{ $created_at }}}</span>
        </div>
        
        <div class="video">
            <video poster="{{ $image['url'] ?? '' }}" id="video" @if($capsule_status == 2) class="closed-capsule" @endif>
                <source src='{{ $media_url }}' type='video/mp4'>
            </video>
            
            <div class="video__overlay @if($capsule_status == 2)closed @endif"></div>
            
            <div class="video__controls">
                @if($capsule_status == 2 && $diff_time)
                <div class="timer timer_beige @if($capsule_status == 2)closed @endif"> {{ $diff_time }}</div>
                @endif
                <div class="video__controls-wrap">
                    @if($capsule_status == 1)
                    <div class="icon-play">
                        <img src="{{ asset('img/play.svg') }}" alt="#">
                    </div>
                    @endif
    
                    <div class="timer @if($capsule_status == 2)closed" id="js-timer" data-timer="{{ $opens_at }} @endif">00:00:00</div>
                </div>
                
                <div class="latch">
                    <img src="{{ $capsule_status == 1 ? asset('img/latch-open.svg') : asset('img/latch-closed.svg') }}" alt="#">
                </div>
            </div>
        </div>
        <!-- /.video__content -->
        
        <div class="action-bar mobile-size">
            <div class="action-bar__item">
                <div class="action-bar__image"><img src="{{ asset('img/comment.svg') }}" alt="#"></div>
                <span class="action-bar__descr">{{ $count_comment }}</span>
            </div>
            <div class="action-bar__item">
                <div class="action-bar__image"><img src="{{ asset('img/like.svg') }}" alt="#"></div>
                <span class="action-bar__descr">{{ $count_like }}</span>
            </div>
            <div class="action-bar__item">
                <div class="action-bar__image"><img src="{{ asset('img/bell.svg') }}" alt="#"></div>
                <span class="action-bar__descr">{{ $count_subscribers }}</span>
            </div>
        </div> <!-- /.action-bar -->
    </div> <!-- /.video -->
    
    <div class="chat">
        <div class="chat__item author">
            <div class="person">
                @isset($owner['image_url'])
                <div class="person__avatar desktop-size">
                    <img src="{{ $owner['image_url'] }}" alt="#">
                </div>
                @endisset
                
                <div class="person__content">
                    <div class="person__descr">
                        <div class="person__name">{{ $owner['name'] }}</div>
                        <div class="person__info desktop-size">
                            <span>{{ $created_at }}</span>
                            @isset($address)<span>{{ $address['city'] }}, {{ $address['country_title'] }}</span>@endisset
                        </div>
                    </div>
                    
                    <div class="person__text">
                        <p>{{ $caption }}</p>
                    </div> <!-- person__text -->
                    <div class="person__info person__info_purple desktop-size">
                        <span>{{ $count_comment }} comments</span>
                        <span>{{ $count_like }} likes</span>
                        <span>{{ $count_subscribers }} saves</span>
                    </div>
                </div> <!-- person__content -->
            </div> <!-- /.person -->
        </div> <!-- chat__item -->
        
        <div class="chat__item comments">
            @foreach($comments as $comment)
                <div class="person">
                    @isset($comment['owner']['image_url'])
                    <div class="person__avatar"><img src="{{ $comment['owner']['image_url'] }}" alt="#"></div>
                    @endisset
                    <div class="person__content">
                        <div class="person__descr">
                            <div class="person__comment">
                                <span>{{ $comment['owner']['name'] }}</span>
                                {{ $comment['content'] }}
                            </div>
                        </div> <!-- /.person__descr -->
                    </div> <!-- /.person__content -->
                </div> <!-- /.person -->
            @endforeach
        </div> <!-- /.chat__item -->
        
        <div class="chat__item links">
            <a class="logo" href="https://timecaps.com" target="_blank">
                <img src="{{ asset('img/logo-full.svg') }}" alt="Logo">
            </a> <!-- logo -->
            
            <a class="button mobile-size link-on-market" href="#" target="_blank">Download the app</a>
            
            <p class="desktop-size">TimeCaps – Capture the moment. Open in TimeCaps to capture the moments with friends</p>
            
            
            <div class="app-links desktop-size">
                <div class="app-links__title">Download the app</div>
                <div class="app-links__wrap {{ $platform ?? '' }}">
                    <a class="android-hide" onclick="gtag('event', 'Click', { event_category: 'Appstore' });" href="https://apps.apple.com/app/apple-store/id1447497237?pt=119497656&amp;ct=Share&amp;mt=8" target="_blank">
                        <img src="{{ asset('img/appstore.png') }}" alt="iOS">
                    </a>
                    <a class="ios-hide" onclick="gtag('event', 'Click', { event_category: 'Google Play' });" href="https://play.google.com/store/apps/details?id=com.timecaps.android&amp;hl=en&amp;referrer=share" target="_blank">
                        <img src="{{ asset('img/gplay.png') }}" alt="Android">
                    </a>
                </div>
            </div>
        </div> <!-- /.chat__item -->
    
    
    </div> <!-- /.chat -->
</section> <!-- /.content -->

@endsection