XFESystem

@model XFEStudioWebSite.Models.Docs.ViewModels.DocViewModel
@inject XFEStudioWebSite.Services.Abstractions.IPublicUrlService PublicUrls

@{
    Layout = "_Layout";
    ViewData["Title"] = Model.Title;
    ViewData["BodyClass"] = "docs-reader-page";

    var publisher = string.IsNullOrWhiteSpace(Model.Publisher) ? "XFEstudio" : Model.Publisher;
    var publisherInitial = publisher.Length > 0
        ? publisher[..1].ToUpperInvariant()
        : "?";
}

<partial name="_MarkdownStyles" />
<link rel="stylesheet" href="~/css/docs/docs-layout.css" asp-append-version="true" />

<div class="docs-reading-progress" aria-hidden="true">
    <span data-doc-progress></span>
</div>

<div class="docs-layout">
    <aside class="docs-toc" aria-label="文档目录">
        <button id="mobile-toc-toggle"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#sidebar-collapse"
                aria-expanded="false"
                aria-controls="sidebar-collapse">
            <span><i class="bi bi-list-nested" aria-hidden="true"></i> 文档目录</span>
            <i class="bi bi-chevron-down docs-mobile-chevron" aria-hidden="true"></i>
        </button>

        <div class="collapse d-lg-block docs-toc__panel" id="sidebar-collapse">
            <div class="docs-toc__title">
                <span><i class="bi bi-list-nested" aria-hidden="true"></i> 本页目录</span>
                @if (Context.User.IsInRole(XFEStudioWebSite.Core.AppRoles.Admin) ||
                     Context.User.IsInRole(XFEStudioWebSite.Core.AppRoles.SuperAdmin) ||
                     Context.User.IsInRole(XFEStudioWebSite.Core.AppRoles.Developer))
                {
                    <div class="docs-toc__actions" aria-label="文档管理">
                        <a asp-action="Edit" asp-route-id="@Model.Id" class="docs-icon-button" title="编辑文档" aria-label="编辑文档">
                            <i class="bi bi-pencil-square" aria-hidden="true"></i>
                        </a>
                        <form asp-action="Delete" asp-controller="Docs" method="post"
                              data-xfe-confirm="确定要删除此文档吗？"
                              data-xfe-confirm-title="删除文档"
                              data-xfe-confirm-variant="danger">
                            <input type="hidden" name="id" value="@Model.Id" />
                            <button type="submit" class="docs-icon-button is-danger" title="删除文档" aria-label="删除文档">
                                <i class="bi bi-trash" aria-hidden="true"></i>
                            </button>
                        </form>
                    </div>
                }
            </div>

            @if (Model.Toc.Count > 0)
            {
                <nav aria-label="页内章节">
                    <ul>
                        @foreach (var heading in Model.Toc)
                        {
                            <li class="docs-toc__item docs-toc__item-level-@heading.Level">
                                <a href="#@heading.Anchor" class="toc-link" data-doc-toc-link>@heading.Text</a>
                            </li>
                        }
                    </ul>
                </nav>
            }
            else
            {
                <p class="docs-toc__empty"><i class="bi bi-info-circle" aria-hidden="true"></i> 文档暂无可用标题</p>
            }
        </div>
    </aside>

    <main class="docs-content">
        <article class="docs-article">
            <header class="docs-article-header">
                <nav aria-label="面包屑导航">
                    <ol class="breadcrumb docs-breadcrumb">
                        <li class="breadcrumb-item"><a asp-action="Index">文档中心</a></li>
                        <li class="breadcrumb-item active" aria-current="page">@Model.Title</li>
                    </ol>
                </nav>

                <div class="docs-article-kicker">
                    <i class="bi bi-file-earmark-text" aria-hidden="true"></i>
                    技术文档
                    @if (Model.Toc.Count > 0)
                    {
                        <span aria-hidden="true">·</span>
                        <span><span>章节数</span> <span>@Model.Toc.Count</span></span>
                    }
                </div>
                <h1>@Model.Title</h1>

                <div class="docs-article-meta">
                    <a href="@PublicUrls.Main($"Account/PublicProfile/{Uri.EscapeDataString(publisher)}")" class="docs-author">
                        <span class="docs-author__avatar"
                              style="@(!string.IsNullOrEmpty(Model.PublisherAvatarUrl) ? $"background-image: url('{Model.PublisherAvatarUrl}');" : null)">
                            @publisherInitial
                        </span>
                        <span>
                            <small>发布者</small>
                            <strong>@publisher</strong>
                        </span>
                    </a>
                    <span class="docs-meta-chip"><i class="bi bi-markdown" aria-hidden="true"></i> Markdown</span>
                </div>
            </header>

            @if (!Model.IsApproved)
            {
                <div class="docs-review-notice" role="alert">
                    <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                    <div><strong>尚未通过审核</strong><span>此文档目前仅对发布者和管理员可见。</span></div>
                </div>
            }

            <div class="markdown-body docs-article-body" data-doc-content>
                @Html.Raw(Model.HtmlContent)
            </div>
        </article>
    </main>
</div>

<button class="docs-back-to-top" type="button" data-doc-back-to-top aria-label="返回顶部" title="返回顶部">
    <i class="bi bi-arrow-up" aria-hidden="true"></i>
</button>

<div class="modal fade docs-image-modal" id="imageModal" tabindex="-1" aria-label="图片预览" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content bg-transparent border-0 shadow-none">
            <div class="modal-body p-0 text-center">
                <div class="d-inline-block position-relative docs-image-modal__inner">
                    <button type="button" class="docs-image-modal__close" data-bs-dismiss="modal" aria-label="关闭图片预览">
                        <i class="bi bi-x-lg" aria-hidden="true"></i>
                    </button>
                    <img id="modalImage" src="" class="img-fluid" alt="文档图片预览">
                </div>
            </div>
        </div>
    </div>
</div>

<partial name="_MarkdownScripts" />
<script src="~/js/docs/docs-reader.js" asp-append-version="true"></script>