@page
@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Anchor
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Clipboard
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.MalihuCustomScrollbar
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Popper
@using Volo.Abp.AspNetCore.Mvc.UI.Packages.Prismjs
@using Volo.Abp.AspNetCore.Mvc.UI.Theming
@using Volo.Docs
@using Volo.Docs.Localization
@using Volo.Docs.Pages.Documents.Project
@inject IThemeManager ThemeManager
@inject IHtmlLocalizer<DocsResource> L
@model IndexModel
@{
    ViewBag.FluidLayout = true;
    Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
}
@section styles {
    <abp-style-bundle name="@typeof(IndexModel).FullName">
        <abp-script type="@typeof(PrismjsStyleBundleContributor)" />
        <abp-script type="@typeof(MalihuCustomScrollbarPluginStyleBundleContributor)" />
        <abp-style src="/Pages/Documents/Project/bootstrap-toc.css" />
        <abp-style src="/Pages/Documents/Shared/Styles/vs.css" />
    </abp-style-bundle>
}
@section scripts {
    <abp-script-bundle name="@typeof(IndexModel).FullName">
        <abp-script type="@typeof(MalihuCustomScrollbarPluginScriptBundleContributor)" />
        <abp-script type="@typeof(ClipboardScriptBundleContributor)" />
        <abp-script type="@typeof(AnchorJsScriptBundleContributor)" />
        <abp-script type="@typeof(PrismjsScriptBundleContributor)" />
        <abp-script type="@typeof(PopperJsScriptBundleContributor)" />
        <abp-script src="/Pages/Documents/Project/bootstrap-toc.js" />
        <abp-script src="/Pages/Documents/Shared/Scripts/vs.js" />
        <abp-script src="/Pages/Documents/Project/index.js" />
    </abp-script-bundle>
}
<div class="docs-page" data-spy="scroll" data-target="#docs-sticky-index">
    <div class="row justify-content-end">
        <div class="col-md-3 docs-sidebar dark-sidebar">
            <div class="docs-sidebar-wrapper">

                <div class="docs-top">
                    <nav class="navbar navbar-logo">
                        @if (!Model.Project.Name.IsNullOrWhiteSpace())
                        {
                            <a class="navbar-brand w-100" href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())">
                                <span id="ProjectName">@Model.Project.Name</span><br>
                                <strong class="display-block">
                                    @L["Documents"]
                                </strong>
                            </a>
                        }

                        @if (!Model.Document.Project.MainWebsiteUrl.IsNullOrWhiteSpace())
                        {
                            <a href="@Model.Document.Project.MainWebsiteUrl" class="go-back-site" id="GoToMainWebSite">
                                <i class="fa fa-chevron-left"></i>
                                @L["BackToWebsite"]
                            </a>
                        }

                        <div class="for-mobile">
                            <div class="navbar-light">
                                <button type="button" class="open-dmenu navbar-toggler" aria-label="Close">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                            </div>
                        </div>
                    </nav>
                </div>

                <div class="docs-tree-list">

                    @if (Model.ProjectSelectItems.Count > 1)
                    {
                        <div class="docs-version">
                            <div class="version-select">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <label class="input-group-text">
                                            <i class="fa fa-folder-open" aria-hidden="true" data-toggle="tooltip" title="@L["Project"]"></i>
                                        </label>
                                    </div>

                                    <select asp-items="Model.ProjectSelectItems" class="form-control" onchange="window.location.replace(this.value)"></select>
                                </div>
                            </div>
                        </div>
                    }

                    @if (Model.VersionSelectItems.Any())
                    {
                        <div class="docs-version">
                            <div class="version-select">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <label class="input-group-text">
                                            <i class="fa fa-check-square-o" aria-hidden="true" data-toggle="tooltip" title="@L["Version"]"></i>
                                        </label>
                                    </div>

                                    <select asp-items="Model.VersionSelectItems" class="form-control" onchange="if (this.value) { window.location.replace(this.value) }"></select>
                                </div>
                            </div>
                        </div>
                    }

                    <div class="docs-version">
                        <div class="version-select">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <label class="input-group-text"><i class="fa fa-filter"></i></label>
                                </div>

                                <input class="form-control" type="search" placeholder="Filter topics" aria-label="Filter">
                            </div>
                        </div>
                    </div>

                    @if (Model.Navigation == null || Model.Navigation.Content.IsNullOrEmpty())
                    {
                        <div class="text-muted p-3">
                            <i class="fa fa-warning"></i> @L["NavigationDocumentNotFound"]
                        </div>
                    }
                    else
                    {
                        <ul root-node="@Model.Navigation.RootNode"
                            version="@(Model.LatestVersionInfo == null || Model.LatestVersionInfo.IsSelected ? DocsAppConsts.Latest : Model.Version)"
                            project-name="@Model.ProjectName"
                            project-format="@Model.Project.Format"
                            selected-document-name="@Model.DocumentNameWithExtension"
                            language="@Model.LanguageCode"
                            id="sidebar-scroll"
                            class="nav nav-list"></ul>
                    }
                </div>

            </div>
        </div>

        @if (Model.Document != null)
        {
            <div class="col-md-7 docs-content bg-white">
                <div class="docs-link-btns">
                    <div class="float-left">
                        @(L["ShareOn"].Value + " :")
                        <a href="#" target="_blank" class="share-button twitter" id="TwitterShareLink" title="Twitter">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" target="_blank" class="share-button linkedin" id="LinkedinShareLink" title="LinkedIn">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" target="_blank" class="share-button email" id="EmailShareLink" title="E-mail">
                            <i class="fa fa-envelope-square"></i>
                        </a>
                    </div>

                    <div class="float-right">
                        @if (Model.LanguageSelectListItems.Count > 1)
                        {
                                <select asp-items="Model.LanguageSelectListItems" class="mr-2" onchange="window.location.replace(this.value)"></select>
                        }

                        @if (!string.IsNullOrEmpty(Model.Document.EditLink))
                        {
                            <a href="@Model.Document.EditLink" target="_blank"> <i class="fa fa-edit"></i> @L["Edit"]</a>
                        }
                    </div>
                </div>

                <div class="docs-content-field">
                    <div class="position-relative">
                        @if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0)
                        {
                            <div class="contributors">
                                <small class="text-muted">@(L["Contributors"].Value + " :")</small>
                                @foreach (var contributor in Model.Document.Contributors)
                                {
                                    <a href="@contributor.UserProfileUrl" target="_blank">
                                        <img src="@contributor.AvatarUrl"
                                             class="contributors-avatar" height="21" width="21" title="@contributor.Username" />
                                    </a>
                                }
                            </div>
                        }
                    </div>
                    <div class="docs-text-field">
                        <div data-spy="scroll" data-target="#docs-sticky-index" data-offset="0">
                            <article class="docs-body">
                                @if (Model.DocumentLanguageIsDifferent)
                                {
                                    <abp-alert  alert-type="Warning" dismissible="true" class="mb-0">
                                        Document in the language you wanted is not found. Document in the default language is shown.
                                    </abp-alert>
                                }
                                @Html.Raw(Model.Document.Content)
                            </article>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-2 docs-page-index position-relative bg-light">

                <div id="scroll-index" class="docs-inner-anchors mt-2">
                    <h5>@L["InThisDocument"]</h5>
                    <nav id="docs-sticky-index" class="navbar index-scroll">
                    </nav>

                    <div class="row">
                        <div class="col p-0 py-3">
                            <a href="javascript:;" class="scroll-top-btn"><i class="fa fa-chevron-up"></i> @L["GoToTop"]</a>
                        </div>
                    </div>

                </div>
            </div>

        }
        else
        {
            <div class="col-md-9 p-5 bg-white">
                <p>@L["DocumentNotFound"]</p>

                <a href="/">
                    <i class="fa fa-chevron-left"></i>
                    @L["BackToWebsite"]
                </a>
            </div>
        }

    </div>
</div>