@extends('layouts/LayoutMaster')

@section('title', 'Главная страница')

@section('vendor-style')

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zuck.js/2.1.0/zuck.min.css">
  <link rel="stylesheet" href="{{ asset('css/stories.css') }}">
  <link rel="stylesheet" href="{{ asset('vndrs/css/flexslider/flexslider.css') }}">
	  <link rel="stylesheet" href="https://cdn.plyr.io/3.6.3/plyr.css" />
@endsection
@section('page-style')
<link href="{{ asset('vndrs/emojiarea/css/emoji.css') }}" rel="stylesheet">
 @endsection

@section('content')
@if($countStorys > 0)
<div id="stories"> </div>
@endif
<div class="content">
@mobile
 <div class="content-items myfeed active">
		@include('includes/episode/feed', ['episodes' => $mylents])
	</div>
@endmobile
@desktop
<div class="content-filter">
<div class="tabs w-50p">
        <input type="radio" id="radio-1" data-start="1" name="lents_feed" value="main" {{ (Auth::check()) ? '' : 'checked' }} />
        <label class="tab" for="radio-1">Наш канал</label>
        <input type="radio" id="radio-2" data-last="2" name="lents_feed" value="my" {{ (Auth::check()) ? 'checked' : 'disabled' }} />
        <label class="tab" for="radio-2">События</label>
        <span class="glider"></span>
    </div>
	
<div class="right-filter {{ (Auth::check()) ? 'd-none' : '' }}">
				<div class="filter-item" data-title="Ленты" data-lfilter="lents" data-ltype="main">
				{!! Helper::postType('lents') !!}
				</div>
			<div class="filter-item" data-title="Видео" data-lfilter="video" data-ltype="main">
				{!! Helper::postType('video') !!}
			</div>
			<div class="filter-item" data-title="Фотографии" data-lfilter="photo" data-ltype="main">
				 {!! Helper::postType('photo') !!}
			</div>
			<div class="filter-item" data-title="Посты" data-lfilter="post" data-ltype="main">
				 {!! Helper::postType('post') !!}
			</div>
</div>
			
			</div>
	<div class="content-items mainfeed  {{ (Auth::check()) ? '' : 'active' }}">
		@include('includes/post/index', ['posts' => $lents])
	</div>
	@if(Auth::check())
	<div class="content-items myfeed active">
		@include('includes/episode/feed', ['episodes' => $mylents])
	</div>
	@endif
@enddesktop
</div>

@endsection
@section('content-right')
@include('includes/right-menu')
		<div class="recommends">
		<div class="block-title_unbg">Рекомендации</div>
			@include('includes/post/recomends', ['recomends' => $recomends])
		</div>
@endsection
@section('vendor-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/zuck.js/2.1.0/zuck.min.js"></script>
	<script src="{{ asset('vndrs/emojiarea/js/jquery.emojiarea.min.js') }}"></script>
<script src="{{ asset('vndrs/js/flexslider/jquery.flexslider-min.js') }}"></script>
<script src="https://cdn.plyr.io/3.6.3/plyr.js"></script>
@endsection
@section('page-script')
<script src="{{ asset('vndrs/emojiarea/js/config.min.js') }}"></script>
<script src="{{ asset('vndrs/emojiarea/js/util.min.js') }}"></script>
<script src="{{ asset('vndrs/emojiarea/js/emoji-picker.min.js') }}"></script>
@if($countStorys > 0)
<script type="text/javascript">
const options = {
	stories: [
                  ],
		 language: { 
    unmute: 'Нажмите, чтобы включить звук',
    keyboardTip: 'Нажмите пробел, чтобы увидеть следующее',
    visitLink: 'Перейти',
    time: {
      ago:'назад', 
      hour:'час', 
      hours:'часов', 
      minute:'минута', 
      minutes:'минут', 
      fromnow: 'сейчас', 
      seconds:'секунд', 
      yesterday: 'вчера', 
      tomorrow: 'завтра', 
      days:'дней'
    }
  }
};
const elStory = document.querySelector("#stories");
const stories = Zuck(elStory, options);

</script>
@endif
<script type="text/javascript">
  $('input[type=radio][name=lents_feed]').change(function() {
    var tabsActive = this.value;
	
	if(tabsActive == 'main'){
		$('.myfeed').removeClass('active');
		$('.mainfeed').addClass('active');
		$('.right-filter').removeClass('d-none');
	}else{
		$('.mainfeed').removeClass('active');
		$('.myfeed').addClass('active');
		$('.right-filter').addClass('d-none');
	}
});
</script>
<script>
  $('.flexslider').flexslider({
    animation: "slide",
	slideshow: false,
	prevText: "",
	nextText: "",
  });
</script>
	 <script>
	 $( ".idplayer" ).each(function() {
  const player = new Plyr(this, {
});
});
const players = Plyr.setup('.video_itemyt'); 
</script>
<script>
$(function() {
        window.emojiPicker = new EmojiPicker({
          emojiable_selector: '[data-emojiable=true]',
          assetsPath: '/vndrs/emojiarea/img/',
          popupButtonClasses: 'fa fa-smile-o'
        });
        window.emojiPicker.discover();
      });
</script>
<script src="{{ asset('js/scripts/lentsFilter.js') }}"></script>
@endsection