{php}
    $strPlayModuleSlug = trim((string)($arrVideo['v_name_en'] ?? request()->route('strPinyin') ?? ''));
    if ($strPlayModuleSlug === '') {
        $strPlayModuleSlug = (string)($arrVideo['v_id'] ?? '');
    }
{/php}
<main class="{$TpStyle.dom_prefix}-p3-layout">

    <section class="{$TpStyle.dom_prefix}-p3-main">

        {// 左：播放器 + 基本信息 }
        <div class="{$TpStyle.dom_prefix}-p3-left">
            <div id="dplayer" class="{$TpStyle.dom_prefix}-p3-dp"></div>

            <div class="{$TpStyle.dom_prefix}-p3-info">
                <h1>{$arrVideo.v_name}</h1>
                <p class="{$TpStyle.dom_prefix}-p3-meta">
                    {$arrVideo.v_category} · {$arrVideo.v_area} · {$arrVideo.v_year}
                </p>
                <p class="{$TpStyle.dom_prefix}-p3-actor">
                    主演：{$arrVideo.v_actor}
                </p>
            </div>
        </div>

        {// 右：线路 + 集数（PC 时固定在侧边栏） }
        <aside class="{$TpStyle.dom_prefix}-p3-right">
            <div class="{$TpStyle.dom_prefix}-p3-linehead">播放线路</div>

            <div class="{$TpStyle.dom_prefix}-p3-linelist">
                <?php $lineIndex=0; ?>
                {foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
                <?php $lineIndex++; ?>
                <button type="button"
                        class="{$TpStyle.dom_prefix}-p3-line {eq name='$lineIndex' value='1'}active{/eq}"
                        onclick="p3Switch('{$strPlayGroupName}', this)">
                    {$strPlayGroupName}
                </button>
                {/foreach}
            </div>

            <?php $lineIndex=0; ?>
            {foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
            <?php $lineIndex++; ?>
            <div class="{$TpStyle.dom_prefix}-p3-eplist {eq name='$lineIndex' value='1'}active{/eq}"
                 id="p3-ep-{$strPlayGroupName}">
                <?php $epIndex=0; ?>
                {volist name='$arrPlayUrlType' id='arrPlayUrl'}
                <?php $epIndex++; ?>
                <a href="{:app('app\\services\\VideoService')->getVideoPlayUrl((int)$arrVideo['v_id'], $strPlayModuleSlug, (string)$strPlayGroupName, (int)$epIndex)}"
                   class="{$TpStyle.dom_prefix}-p3-ep {if $epIndex == $Request.route.intPlayIndex}active{/if}"
                   m3u8="{$arrPlayUrl.url}">
                    {$arrPlayUrl.name}
                </a>
                {/volist}
            </div>
            {/foreach}
        </aside>

    </section>

    {// 下方：简介 + 推荐 }
    <section class="{$TpStyle.dom_prefix}-p3-desc">
        <h2>剧情简介</h2>
        <p>{$arrVideo.v_description|raw}</p>
    </section>

    <section class="{$TpStyle.dom_prefix}-p3-rel">
        <h3>猜你喜欢</h3>
        <div class="{$TpStyle.dom_prefix}-p3-relgrid">
            {video:list count="8"
                v_category_en="$arrVideo.v_category_en"
                sort_type="news"
                d_key="rk" d_val="Video" cache_life="3600"}

            <a href="/detail/{$Video.v_id}.html" class="{$TpStyle.dom_prefix}-p3-card">
                <img loading="lazy"
                     src="{site:cfg code='PUBLIC_COVER_DOMAIN' encode='false'/}{$Video.v_pic}">
                <p>{$Video.v_name}</p>
            </a>

            {/video:list}
        </div>
    </section>

</main>

<script>
function p3Switch(name, el){
    document.querySelectorAll('.{$TpStyle.dom_prefix}-p3-eplist')
        .forEach(function(box){ box.classList.remove('active'); });
    var target = document.getElementById('p3-ep-'+name);
    if(target) target.classList.add('active');

    document.querySelectorAll('.{$TpStyle.dom_prefix}-p3-line')
        .forEach(function(b){ b.classList.remove('active'); });
    el.classList.add('active');
}
</script>