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

    {// 封面 + 播放器组合卡片 }
    <section class="{$TpStyle.dom_prefix}-p5-hero">
        <div class="{$TpStyle.dom_prefix}-p5-left">
            <img loading="lazy"
                 src="{site:cfg code='PUBLIC_COVER_DOMAIN' encode='false'/}{$arrVideo.v_pic}"
                 alt="{$arrVideo.v_name}"
                 class="{$TpStyle.dom_prefix}-p5-pic">
        </div>
        <div class="{$TpStyle.dom_prefix}-p5-right">
            <h1>{$arrVideo.v_name}</h1>
            <p class="{$TpStyle.dom_prefix}-p5-meta">
                {$arrVideo.v_year} · {$arrVideo.v_category} · {$arrVideo.v_area}
            </p>
            <div id="dplayer" class="{$TpStyle.dom_prefix}-p5-dp"></div>
        </div>
    </section>

    {// 线路：横向滚动 }
    <nav class="{$TpStyle.dom_prefix}-p5-lines">
        <?php $lineIndex=0; ?>
        {foreach $arrVideo.v_play_url as $strPlayGroupName=>$arrPlayUrlType}
        <?php $lineIndex++; ?>
        <span class="{$TpStyle.dom_prefix}-p5-line
                     {eq name='$lineIndex' value='1'}active{/eq}"
              onclick="p5Line('{$strPlayGroupName}', this)">
            {$strPlayGroupName}
        </span>
        {/foreach}
    </nav>

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

    {// 简介 }
    <section class="{$TpStyle.dom_prefix}-p5-desc">
        <h2>内容简介</h2>
        <p>{$arrVideo.v_description|raw}</p>
    </section>

    {// “瀑布式”推荐（grid 不等高） }
    <section class="{$TpStyle.dom_prefix}-p5-rel">
        <h3>更多精彩</h3>

        <div class="{$TpStyle.dom_prefix}-p5-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}-p5-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 p5Line(name, el){
    document.querySelectorAll('.{$TpStyle.dom_prefix}-p5-epbox')
        .forEach(function(box){ box.classList.remove('active'); });
    var t = document.getElementById('p5-ep-'+name);
    if(t) t.classList.add('active');

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