@using System.Text.Json
@using Dpz.Core.EnumLibrary
@model Dpz.Core.Public.ViewModel.VmVideo
@{
    ViewData["Title"] = Model.VideoTitle;
    var videoConfig = new
    {
        id = Model.Id,
        url = $"https://cdn.dpangzi.com/Video/{Model.Title}/1080p.m3u8",
        cover = $"https://cdn.dpangzi.com/Video/{Model.Title}/video.webp!Screenshot",
        title = Model.VideoTitle
    };
}

<div class="video-watch">
    <div class="video-player-wrapper">
        <div id="video-player" class="video-player" data-video-config="@JsonSerializer.Serialize(videoConfig)"></div>
    </div>

    <div class="video-info">
        <div class="video-info__header">
            <h1 class="video-info__title">@Model.VideoTitle</h1>
            <div class="video-info__meta">
                <div class="video-info__meta-item" title="播放量">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M2.45825 12C3.73253 7.94291 7.52281 5 12.0002 5C16.4776 5 20.2679 7.94291 21.5422 12C20.2679 16.0571 16.4776 19 12.0002 19C7.52281 19 3.73253 16.0571 2.45825 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <span>@Model.PlayCount 播放</span>
                </div>
                <div class="video-info__meta-item" title="弹幕数">
                    <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V7C3 6.46957 3.21071 5.96086 3.58579 5.58579C3.96086 5.21071 4.46957 5 5 5H19C19.5304 5 20.0391 5.21071 20.4142 5.58579C20.7893 5.96086 21 6.46957 21 7V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    <span>@Model.DanmakuCount 弹幕</span>
                </div>
                @if (Model.Tags.Length > 0)
                {
                    <div class="video-info__meta-item">
                        <svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 7H7.01M7 17H7.01M17 7H17.01M17 17H17.01M12 12H12.01M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span>@string.Join(", ", Model.Tags)</span>
                    </div>
                }
            </div>
        </div>

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

    <div class="video-comments">
        <partial name="_GlobalCommentPartial" model="(CommentNode.Video, Model.Id)" />
    </div>
</div>