@page "/packages/{id}/{version?}"
@model PackageModel

@{
    ViewData["Title"] = Model.Found
        ? Model.Package.Id + " " + Model.Package.NormalizedVersionString
        : Model.Package.Id;
}

@if (!Model.Found)
{
    <div>
        <h2>Oops, package not found...</h2>
        <p>Could not find package '@Model.Package.Id'.</p>
        <p>You can try searching on <a href="https://www.nuget.org/packages?q=@Uri.EscapeDataString(Model.Package.Id)" target="_blank" rel="noopener noreferrer">nuget.org</a> package.</p>
        <p>Think there's a problem? Consider taking a look at our <a href="https://loic-sharma.github.io/BaGet/" target="_blank" rel="noopener noreferrer">documentation</a> or asking for help on our <a href="https://github.com/loic-sharma/BaGet/issues" target="_blank" rel="noopener noreferrer">GitHub project</a></p>
    </div>
}
else
{
    <div class="row display-package">
        <aside class="col-sm-1 package-icon">
            <img src="@(Model.IconUrl ?? Url.Content("~/_content/BaGet.Web/images/default-package-icon-256x256.png"))"
                 class="img-responsive"
                 onerror="this.src='@Url.Content("~/_content/BaGet.Web/images/default-package-icon-256x256.png")'"
                 alt="The package icon" />
        </aside>

        <article class="col-sm-8 package-details-main">
            <div class="package-title">
                <h1>
                    @Model.Package.Id

                    <small class="text-nowrap">@Model.Package.NormalizedVersionString</small>
                </h1>
            </div>

            <div class="tabbed-info" x-data="{ tabs: tabs, active: tabs[0] }">
                <ul class="nav">
                    <template x-for="tab in tabs" :key="tab.name">
                        <li x-bind:class="{ active: tab.name === active.name }">
                            <a href="#" x-text="tab.name" @@click="active = tab"></a>
                        </li>
                    </template>
                </ul>

                <div class="content">
                    <div class="script" x-text="`${active.prefix} ${active.content}`"></div>

                    <div class="copy-button">
                        <button class="btn btn-default btn-warning"
                                type="button"
                                data-tottle="popover"
                                data-placement="bottom"
                                data-content="Copied"
                                @@click="window.baget.copyTextToClipboard(active.content.join('\n'), $el)">
                            <i class="ms-Icon ms-Icon--Copy"></i>
                        </button>
                    </div>
                </div>
            </div>

            @{
                ExpandableSection(
                    "Readme",
                    expanded: false,
                    @<div>
                        @if (Model.Readme == null)
                        {
                            <div class="package-description">@Model.Package.Description</div>
                        }
                        else
                        {
                            <div class="package-readme">@Model.Readme</div>
                        }
                    </div>);
            }

            @if (!Model.IsDotnetTemplate && !Model.IsDotnetTool)
            {
                ExpandableSection("Used By", expanded: false,
                    @<div class="package-used-by">
                        @if (!Model.UsedBy.Any())
                        {
                            <p>No packages depend on @Model.Package.Id.</p>
                        }
                        else
                        {
                            <p>Showing the top 20 packages that depend on @Model.Package.Id.</p>
                            <div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th class="col-sm-10">Packages</th>
                                            <th class="col-sm-2">Downloads</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var package in Model.UsedBy)
                                        {
                                            <tr>
                                                <td>
                                                    <a href="@Url.Page("/Package", new { package.Id })">@package.Id</a>
                                                    <div>@package.Description</div>
                                                </td>
                                                <td>
                                                    <i class="ms-Icon ms-Icon--Download" aria-hidden="true"></i>
                                                    <span>@package.TotalDownloads.ToString("N0")</span>
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        }
                    </div>);
            }

            @if (!string.IsNullOrEmpty(Model.Package.ReleaseNotes))
            {
                ExpandableSection("Release Notes", expanded: false,
                    @<div class="package-release-notes">@Model.Package.ReleaseNotes</div>);
            }

            @{ ExpandableSection(
                "Dependencies",
                expanded: false,
                @<div class="dependency-groups">
                    @if (!Model.DependencyGroups.Any())
                    {
                        @:This package has no dependencies.
                    }
                    else
                    {
                        foreach (var group in Model.DependencyGroups)
                        {
                            <h4>
                                <span>@group.Name</span>
                            </h4>

                            <ul class="list-unstyled dependency-group">
                                @if (!group.Dependencies.Any())
                                {
                                    <li>No dependencies.</li>
                                }
                                else
                                {
                                    @foreach (var dependency in group.Dependencies)
                                    {
                                        <li>
                                            <a asp-page="Package"
                                               asp-route-id="@dependency.PackageId"
                                               asp-route-version="@null">
                                                @dependency.PackageId
                                            </a>

                                            <span> @dependency.VersionSpec</span>
                                        </li>
                                    }
                                }
                            </ul>
                        }
                    }
                </div>);
            }

            @{ ExpandableSection("Versions", expanded: true,
                @<div class="version-list" x-data="{ showAll: false }">
                    <table class="table borderless">
                        <thead>
                            <tr>
                                <th>Version</th>
                                <th>Downloads</th>
                                <th>Last updated</th>
                            </tr>
                        </thead>
                        <tbody class="no-border">
                            @for (var i = 0; i < Model.Versions.Count; i++)
                            {
                                var version = Model.Versions[i];
                                var alwaysShow = Json.Serialize(i < DefaultVisibleVersions);

                                <tr class="@(version.Selected ? "bg-info" : "")" x-show="showAll || @alwaysShow">
                                    <td><a asp-page="Package" asp-route-version="@version.Version">@version.Version.ToNormalizedString()</a></td>
                                    <td>@version.Downloads.ToString("N0")</td>
                                    <td>@version.LastUpdated.ToShortDateString()</td>
                                </tr>
                            }
                        </tbody>
                    </table>

                    @if (Model.Versions.Count > DefaultVisibleVersions)
                    {
                        <button type="button" class="link-button" @@click="showAll = !showAll">
                            <i class="ms-Icon" x-bind:class="{ 'ms-Icon--CalculatorAddition': !showAll, 'ms-Icon--CalculatorSubtract': showAll }"></i>
                            <span x-text="showAll ? 'Show less' : 'Show more'"></span>
                        </button>
                    }

                </div>);
            }
        </article>

        <aside class="col-sm-3 package-details-info">
            <div>
                <h2>Info</h2>

                <ul class="list-unstyled ms-Icon-ul">
                    <li>
                        <i class="ms-Icon ms-Icon--History" aria-hidden="true"></i>
                        Last updated @Model.LastUpdated.Humanize()
                    </li>

                    @if (Model.Package.ProjectUrlString != null)
                    {
                        <li>
                            <i class="ms-Icon ms-Icon--Globe"></i>
                            <a href="@Model.Package.ProjectUrlString">Project URL</a>
                        </li>
                    }

                    @if (Model.Package.RepositoryUrlString != null)
                    {
                        <li>
                            <img class="icon" aria-hidden="true" alt="GitHub logo" src="@Url.Content("~/_content/BaGet.Web/images/github-32x32.png")" />
                            <a href="@Model.Package.RepositoryUrlString">Source code</a>
                        </li>
                    }

                    @if (Model.LicenseUrl != null)
                    {
                        <li>
                            <i class="ms-Icon ms-Icon--Certificate"></i>
                            <a href="@Model.LicenseUrl">License</a>
                        </li>
                    }

                    <li>
                        <i class="ms-Icon ms-Icon--CloudDownload"></i>
                        <a href="@Model.PackageDownloadUrl">Download package</a>
                    </li>
                </ul>
            </div>

            <div>
                <h2>Statistics</h2>

                <ul class="list-unstyled ms-Icon-ul">
                    <li>
                        <i class="ms-Icon ms-Icon--Download"></i>
                        @Model.TotalDownloads.ToString("N0") total downloads
                    </li>

                    <li>
                        <i class="ms-Icon ms-Icon--Giftbox"></i>
                        @Model.Package.Downloads.ToString("N0") downloads of current version
                    </li>
                </ul>
            </div>

            @if (Model.Package.Authors.Any())
            {
                <div>
                    <h2>Authors</h2>

                    <p>@string.Join(", ", Model.Package.Authors)</p>
                </div>
            }
        </aside>
    </div>
}

@if (Model.Found)
{
    <script type="text/javascript">
        let tabs = [
            @if (Model.IsDotnetTemplate)
            {
                <text>
                {
                    name: ".NET CLI",
                    prefix: ">",
                    content: ["dotnet new --install @Model.Package.Id::@Model.Package.NormalizedVersionString"],
                },
                </text>
            }
            else if (Model.IsDotnetTool)
            {
                <text>
                {
                    name: ".NET CLI",
                    prefix: ">",
                    content: ["dotnet tool install --global @Model.Package.Id --version @Model.Package.NormalizedVersionString"],
                },
                </text>
            }
            else
            {
                <text>
                {
                    name: ".NET CLI",
                    prefix: ">",
                    content: ["dotnet add package @Model.Package.Id --version @Model.Package.NormalizedVersionString"],
                },
                {
                    name: "PackageReference",
                    prefix: "",
                    content: ["<PackageReference Include=\"@Model.Package.Id\" Version=\"@Model.Package.NormalizedVersionString\" />"]
                },
                {
                    name: "Paket CLI",
                    prefix: ">",
                    content: ["paket add @Model.Package.Id --version @Model.Package.NormalizedVersionString"]
                },
                {
                    name: "Package Manager",
                    prefix: "PM>",
                    content: ["Install-Package @Model.Package.Id -Version @Model.Package.NormalizedVersionString"]
                }
                </text>
            }
        ];
    </script>
}

@functions {

    private const int DefaultVisibleVersions = 5;

    private void ExpandableSection(string title, bool expanded, Func<object, IHtmlContent> template)
    {
        <div class="expandable-section" x-data="{ expanded: @Json.Serialize(expanded) }">
            <h2>
                <button type="button" class="link-button" @@click="expanded = !expanded">
                    <i x-bind:class="{ 'ms-Icon--ChevronDown': expanded, 'ms-Icon--ChevronRight': !expanded }"
                       class="ms-Icon">
                    </i>
                    <span>@title</span>
                </button>
            </h2>

            <div x-show="expanded">@template(null)</div>
        </div>
    }
}
