@extends('layouts.front')

@section('title', __('front.reels.title') . ' — ' . getSiteName())

@section('content')
@php
  $reelsI18n = [
    'fromCourse'   => __('front.reels.from_course', ['title' => ':title']),
    'byInstructor' => __('front.reels.by_instructor', ['name' => ':name']),
    'lessonCount'  => __('front.reels.lesson_count', ['count' => ':count']),
  ];
@endphp
<script>
  window.NEXUS_REELS = @json($reelsData);
  window.NEXUS_REELS_I18N = @json($reelsI18n);
  window.NEXUS_REELS_MORE_URL = "{{ route('front.reels.more') }}";
</script>
<section class="page-section active" id="page-reels">
<div class="page-hero" style="padding-bottom:24px;">
  <div class="container">
    <div class="breadcrumb"><a href="{{ url('/') }}" data-page="home">{{ __('front.nav.home') }}</a> / {{ __('front.nav.reels') }}</div>
    <h1>{{ __('front.reels.title') }}</h1>
    <p>{{ __('front.reels.subtitle') }}</p>
  </div>
</div>

@if($reelsData->isNotEmpty())
<div class="container reel-layout">
  <div class="ph ph-video reel-stage">
    <div id="reelVideoSlot" style="position:absolute;inset:0;"></div>
    <div class="reel-top-ui" style="margin-top:6px;"><span class="reel-cat" id="reelCat"></span></div>
    <div class="reel-nav-ui">
      <button type="button" class="reel-nav-btn" id="reelPrevBtn" aria-label="{{ __('front.reels.previous') }}">‹</button>
      <button type="button" class="reel-nav-btn" id="reelNextBtn" aria-label="{{ __('front.reels.next') }}">›</button>
    </div>
    <div class="reel-bottom-ui">
      <span class="course-tag" id="reelCourseTag"></span>
      <h3 id="reelTitle"></h3>
      <p id="reelMeta"></p>
      <a href="#" id="reelStartBtn" class="btn btn-primary btn-sm">{{ __('front.reels.start_course') }}</a>
    </div>
    <div class="reel-side-ui">
      <div class="side-btn"><div class="side-ic">★</div><span id="reelRatingCount">0</span></div>
      <div class="side-btn"><div class="side-ic">↗</div><span>{{ __('front.reels.share') }}</span></div>
    </div>
  </div>

  <div class="reel-list">
    <h4>{{ __('front.reels.up_next') }}</h4>
    <div id="reelUpNextList"></div>
  </div>
</div>
@else
  <div class="container" style="padding:60px 0;">
    <p class="muted">{{ __('front.reels.no_reels') }}</p>
  </div>
@endif
</section>
@endsection