@using System.Text.Json
@using Dpz.Core.EnumLibrary
@model VideoWatchModel

<section class="video-page video-page--watch">
    <div class="video-watch">
        <div class="video-watch__stage">
            <div class="video-watch__ambient" aria-hidden="true">
                <img src="@Model.Config.Cover" alt="" loading="eager" decoding="async" />
            </div>
            <div class="video-player-wrapper">
                <div id="video-player" class="video-player" data-video-config="@Model.ConfigJson"></div>
            </div>
        </div>

        <article class="video-detail" aria-labelledby="video-title">
            <div class="video-detail__summary">
                <p class="video-kicker">正在播放</p>
                <h1 id="video-title" class="video-detail__title">@Model.Config.Title</h1>
                @if (!string.IsNullOrWhiteSpace(Model.SubTitle))
                {
                    <p class="video-detail__subtitle">@Model.SubTitle</p>
                }
                @if (Model.Tags.Length > 0)
                {
                    <ul class="video-tags" aria-label="视频标签">
                        @foreach (var tag in Model.Tags)
                        {
                            <li class="video-tags__item">@tag</li>
                        }
                    </ul>
                }
            </div>

            <dl class="video-detail__stats" aria-label="视频数据">
                <div class="video-detail__stat">
                    <dt>
                        <i class="fa-regular fa-eye" aria-hidden="true"></i>
                        播放
                    </dt>
                    <dd data-video-counter="play" data-count="@Model.PlayCount">
                        @Model.PlayCount.ToString("N0") 播放
                    </dd>
                </div>
                <div class="video-detail__stat">
                    <dt>
                        <i class="fa-regular fa-comment-dots" aria-hidden="true"></i>
                        弹幕
                    </dt>
                    <dd data-video-counter="danmaku" data-count="@Model.DanmakuCount">
                        @Model.DanmakuCount.ToString("N0") 弹幕
                    </dd>
                </div>
                <div class="video-detail__stat">
                    <dt>
                        <i class="fa-regular fa-message" aria-hidden="true"></i>
                        评论
                    </dt>
                    <dd>@Model.CommentCount.ToString("N0") 评论</dd>
                </div>
            </dl>

            @if (!string.IsNullOrWhiteSpace(Model.Description))
            {
                <div class="video-detail__description">
                    @Model.Description
                </div>
            }
        </article>

        <section class="video-comments" aria-labelledby="video-comments-title">
            <div class="video-comments__header">
                <p class="video-kicker">讨论</p>
                <h2 id="video-comments-title" class="video-comments__title">评论</h2>
            </div>
            <partial name="_GlobalCommentPartial" model="(CommentNode.Video, Model.Config.Id)" />
        </section>
    </div>
</section>