<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="@Context.GetLink("/assets/styles.css")" rel="stylesheet" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap" rel="stylesheet" />

        <link rel="apple-touch-icon" sizes="180x180" href="@Context.GetLink("/assets/favicons/apple-touch-icon.png")">
        <link rel="icon" type="image/png" sizes="32x32" href="@Context.GetLink("/assets/favicons/favicon-32x32.png")">
        <link rel="icon" type="image/png" sizes="16x16" href="@Context.GetLink("/assets/favicons/favicon-16x16.png")">

        @{
            string title = Document.ContainsKey(Keys.Title) ? $"Spectre.Console - {Document.GetString(Keys.Title)}" : "Spectre.Console";
            string description = Document.ContainsKey(Constants.Description) ? Document.GetString(Constants.Description) : "Spectre.Console is a .NET Standard 2.0 library that makes it easier to create beautiful console applications";
            var card = Outputs.FirstOrDefault(i => i.GetString("DocId") == Model.Id.ToString());
            var urlBase = $"https://{Document.GetString(Keys.Host)}/";
        }
        <title>@title</title>
        <meta name="description" content="@description" />

        @if(card != null){
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="og:title" content="@title" />
            <meta name="og:description" content="@description" />
            <meta name="og:image" content="@(urlBase + card.Destination)" />
        }

    </head>
    <body class="antialiased text-gray-600 min-h-full flex flex-col  bg-gray-50">
        <header class="flex-none text-sm font-medium bg-gradient-to-b from-gray-200 to-gray-100 ring-1 ring-gray-900 ring-opacity-5 shadow py-2 md:py-4">
            <nav class="flex flex-row container mx-auto items-center">
                <a class="flex flex-row  items-center" href="@Context.GetLink("/")">
                    <img id="logo" class="w-auto h-10 md:h-12" height="48" width="48" src="@Context.GetLink("/assets/logo.svg")" alt="Spectre.Console">
                    <span class="text-lg md:text-2xl font-light ml-2 lg:ml-4 font-mono tracking-tighter">Spectre.Console</span>
                </a>
                <div class="ml-auto">
                    <ul class="flex flex-row">
                        <li>
                            <a class="flex flex-row items-center text-red-700" href="https://github.com/sponsors/patriksvensson">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <title>Sponsor</title>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                </svg>
                                <span class="hidden sm:block">Sponsor</span>
                            </a>
                        </li>
                        <li class="ml-4">
                            <a class="flex flex-row items-center text-gray-600" href="https://github.com/spectreconsole/spectre.console">
                                <svg role="img" class="h-6 w-6 mr-2"  stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <title>GitHub icon</title>
                                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                                <span class="hidden sm:block">GitHub</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <main class="container mx-auto pt-4 md:pt-8 w-full">
            <div class="flex flex-col-reverse lg:flex-row">
                <nav class="flex-none font-light text-sm xl:text-base sm:mr-16 mt-8 pt-6 lg:mt-0 lg:pt-0 border-t border-gray-300 lg:border-t-0">
                @{
                    IDocument root = OutputPages["index.html"].First();
                    <div class="text-xl @(Document.IdEquals(root) ? "font-bold" : null)">
                            @if(root.ShowLink())
                            {
                                @Html.DocumentLink(root)
                            }
                            else
                            {
                                @root.GetTitle()
                            }
                    </div>

                    @foreach (IDocument document in OutputPages.GetChildrenOf(root).OrderBy(i => i.GetInt("Order")).OnlyVisible())
                    {
                        if(string.IsNullOrWhiteSpace(document.GetTitle()))
                        {
                            continue;
                        }

                        DocumentList<IDocument> documentChildren = OutputPages.GetChildrenOf(document);
                        <div class="text-blue-700 mt-4">
                            @if(document.ShowLink())
                            {
                                @Html.DocumentLink(document)
                            }
                            else
                            {
                                @document.GetTitle()
                            }
                        </div>

                        @if (documentChildren.OnlyVisible().Any())
                        {
                            <div class="ml-2 flex flex-row flex-wrap lg:flex-col border-separate">
                                @foreach (IDocument child in documentChildren.OnlyVisible())
                                {
                                    <div class="mt-2 mr-4 @(Document.IdEquals(child) ? "font-bold" : null)">
                                        @Html.DocumentLink(child)
                                    </div>
                                }
                            </div>
                        }
                    }
                }
                </nav>
                <article class="flex-1 min-w-0">
                    <header class="text-gray-800 mb-4">
                        <h1 class="text-4xl font-extrabold">@(Document.GetString(Keys.Title) ?? Document.GetTitle())</h1>
                        @RenderSection("subheading", required: false)
                    </header>
                    <div class="prose max-w-none prose-sm lg:prose lg:max-w-none 2xl:prose-xl 2xl:max-w-none text-gray-700 font-light">
                        @RenderBody()
                    </div>
                </article>
            </div>
        </main>

        <footer class="py-4 md:py-8 mt-8 bg-gray-100 text-sm border-t border-gray-200">
            <div class="container">
                <div class="flex flex-row">
                    <span>© @DateTime.Today.Year Patrik Svensson, Phil Scott</span>
                    <span class="ml-auto">@VersionUtilities.GetVersion()</span>
                </div>
            </div>
        </footer>


    <script>
        // adapted from https://www.w3schools.com/howto/howto_js_filter_table.asp
        function search(input, searchTarget, columnIndex) {
            // Declare variables
            var filter, table, tr, td, i, txtValue;
            filter = input.value.toUpperCase();
            table = document.getElementById(searchTarget);
            tr = table.getElementsByTagName("tr");

            // Loop through all table rows, and hide those who don't match the search query
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[columnIndex];
                if (td) {
                    txtValue = td.textContent || td.innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
        }
    </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" integrity="sha512-YBk7HhgDZvBxmtOfUdvX0z8IH2d10Hp3aEygaMNhtF8fSOvBZ16D/1bXZTJV6ndk/L/DlXxYStP8jrF77v2MIg==" crossorigin="anonymous"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-zc7WDnCM3aom2EziyDIRAtQg1mVXLdILE09Bo+aE1xk0AM2c2cVLfSW9NrxE5tKTX44WBY0Z2HClZ05ur9vB6A==" crossorigin="anonymous"></script>
        <script src="@Context.GetLink("/assets/asciinema-player.js")"></script>
    </body>
</html>