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

    {// 全宽播放器 }
    <section class="{$TpStyle.dom_prefix}-p2-screen">
        <div id="dplayer" class="{$TpStyle.dom_prefix}-p2-dp"></div>
    </section>

    {// 基本信息 }
    <section class="{$TpStyle.dom_prefix}-p2-info">
        <h1>{$strPlayMainHeading}</h1>
        <p class="{$TpStyle.dom_prefix}-p2-meta">
            <span>{$arrVideo.v_category}</span>
            <span>{$arrVideo.v_area}</span>
            <span>{$arrVideo.v_year}</span>
            <span>{$strPlayHeadingMeta}</span>
        </p>
        <p class="{$TpStyle.dom_prefix}-p2-actors">
            主演：{$arrVideo.v_actor}
        </p>
    </section>

    {// 播放线路（深色 chip） }
    <nav class="{$TpStyle.dom_prefix}-p2-lines">
        <?php $lineIndex=0; ?>
        {foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
        <?php $lineIndex++; ?>
        <button type="button"
                class="{$TpStyle.dom_prefix}-p2-linechip {eq name='$lineIndex' value='1'}active{/eq}"
                onclick="p2SwitchLine('{$strPlayGroupName}', this)">
            {$strPlayGroupName}
        </button>
        {/foreach}
    </nav>

    {// 集数列表：深色块 }
    <section class="{$TpStyle.dom_prefix}-p2-epswrap">

        <?php $lineIndex=0; ?>
        {foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
        <?php $lineIndex++; ?>
        <div class="{$TpStyle.dom_prefix}-p2-epbox {eq name='$lineIndex' value='1'}active{/eq}"
             id="p2-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}-p2-epbtn {if $epIndex == $Request.route.intPlayIndex}active{/if}"
               m3u8="{$arrPlayUrl.url}">
                {$arrPlayUrl.name}
            </a>
            {/volist}
        </div>
        {/foreach}

    </section>

    {// 剧情简介 }
    <section class="{$TpStyle.dom_prefix}-p2-desc">
        <h2>剧情简介</h2>
        <p>{$arrVideo.v_description|raw}</p>
    </section>

    {// 猜你喜欢 }
    <section class="{$TpStyle.dom_prefix}-p2-rel">
        <h3>猜你喜欢</h3>

        <div class="{$TpStyle.dom_prefix}-p2-relgrid">
            {video:list count="10"
                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}-p2-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>

</article>

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

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