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

    {// 顶部区域：封面 + 简介 }
    <header class="{$TpStyle.dom_prefix}-p1-header">
        <figure class="{$TpStyle.dom_prefix}-p1-poster">
            <img loading="lazy"
                 src="{site:cfg code='PUBLIC_COVER_DOMAIN' encode='false'/}{$arrVideo.v_pic}">
        </figure>

        <section class="{$TpStyle.dom_prefix}-p1-info">
            <h1>{$arrVideo.v_name}</h1>

            <p class="{$TpStyle.dom_prefix}-p1-meta">
                <span>{$arrVideo.v_category}</span>
                <span>{$arrVideo.v_area}</span>
                <span>{$arrVideo.v_year}</span>
            </p>

            <p class="{$TpStyle.dom_prefix}-p1-des">
                {$arrVideo.v_description|raw}
            </p>
        </section>
    </header>

    {// 播放器容器 }
    <section class="{$TpStyle.dom_prefix}-p1-playerbox">
        <div id="dplayer" class="{$TpStyle.dom_prefix}-p1-dp"></div>
    </section>


    {// 播放线路导航 }
    <nav class="{$TpStyle.dom_prefix}-p1-lines">
        <?php $lineIndex=0; ?>
        {foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
            <?php $lineIndex++; ?>
            <a class="{$TpStyle.dom_prefix}-p1-linebtn
                      {eq name='$lineIndex' value='1'}active{/eq}"
               onclick="p1SwitchLine('{$strPlayGroupName}', this)">
               {$strPlayGroupName}
            </a>
        {/foreach}
    </nav>

    {// 集数列表 }
    <section class="{$TpStyle.dom_prefix}-p1-episodes">

        <?php $lineIndex = 0; ?>
        {foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
        <?php $lineIndex++; ?>

        <ul class="{$TpStyle.dom_prefix}-p1-elist
                   {eq name='$lineIndex' value='1'}active{/eq}"
            id="p1-list-{$strPlayGroupName}">

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

        </ul>
        {/foreach}

    </section>

    {// 相关推荐：SEO强沉淀 }
    <section class="{$TpStyle.dom_prefix}-p1-relbox">
        <h2 class="{$TpStyle.dom_prefix}-p1-reltitle">猜你喜欢</h2>

        <div class="{$TpStyle.dom_prefix}-p1-relgrid">

            {video:list count="12"
                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}-p1-relcard">
                <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 p1SwitchLine(name, el){
    document.querySelectorAll('.{$TpStyle.dom_prefix}-p1-elist').forEach(e=>e.classList.remove('active'));
    document.querySelector('#p1-list-'+name).classList.add('active');

    document.querySelectorAll('.{$TpStyle.dom_prefix}-p1-linebtn').forEach(e=>e.classList.remove('active'));
    el.classList.add('active');
}
</script>