<x-app-layout>
    <div class="pt-10">
        <div class="flex flex-col xl:flex-row justify-center">
            @if($episode->is_dvd_aspect)
            <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[58%]">
            @else
            <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[70%]">
            @endif
                <!-- Player -->
                @include('stream.partials.player')

                @if($isMobile)
                <div class="flex flex-col">
                    @include('stream.partials.playlist')
                </div>
                @endif

                @include('admin.stream')
                <!-- Infos -->
                @include('stream.partials.info')
                <!-- Comments -->
                <livewire:comments :model="$episode"/>
            </div>
            <div class="flex flex-col">
                @if(! $isMobile)
                @include('stream.partials.playlist')
                @endif

                @include('stream.partials.more-episodes')
                @include('stream.partials.more-studio')
                @include('series.partials.popular')
            </div>
        </div>
    </div>
    <br>
    <!-- Modals -->
    @include('modals.download')
    @include('modals.add-to-playlist')
    @include('modals.share')

    @auth

        @if(Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR) || Auth::user()->hasRole(\App\Enums\UserRole::MODERATOR))
        @include('admin.modals.edit-episode')
        @endif

        @if(Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
        @include('admin.modals.upload-episode')
        @include('admin.modals.add-subtitles')
        @endif

    @endauth
    <!-- Player Script -->
    @vite(['resources/js/player.js'])
</x-app-layout>
