JoshHeaps.Net/JoshHeaps.Net/Pages/Socialism/Index.cshtml

@page "/socialism"
@model JoshHeaps.Net.Pages.Socialism.IndexModel
@{
    ViewData["Title"] = Model.Overview!.Title + " - JoshHeaps.Net";
    Layout = "_Layout";
}

<div class="soc-progress" id="socProgress"></div>

<button class="soc-menu-toggle" id="socMenuToggle" aria-controls="socSidebar" aria-expanded="false">Contents</button>

<div class="soc-shell">
    <partial name="_Nav" model="Model" />

    <div class="soc-main">
        <header class="soc-hero">
            <h1 class="soc-hero-title">@Model.Overview.Title</h1>
            @if (!string.IsNullOrEmpty(Model.Overview.Summary))
            {
                <p class="soc-hero-summary">@Model.Overview.Summary</p>
            }
            @if (Model.Chapters.Count > 0)
            {
                <a class="soc-hero-cta" href="/socialism/@Model.Chapters[0].Slug">Start reading &rarr;</a>
            }
        </header>

        <article class="soc-content">
            @Html.Raw(Model.Overview.HtmlContent)
        </article>

        @if (Model.Chapters.Count > 0)
        {
            <section class="soc-chapters" id="explore">
                <h2 class="soc-chapters-title">Explore the full model</h2>
                @foreach (var group in Model.Chapters.GroupBy(d => d.Section))
                {
                    @if (!string.IsNullOrEmpty(group.Key))
                    {
                        <h3 class="soc-chapters-group">@group.Key</h3>
                    }
                    <div class="soc-card-grid">
                        @foreach (var doc in group)
                        {
                            <a class="soc-card" href="/socialism/@doc.Slug">
                                <span class="soc-card-title">@doc.Title</span>
                                @if (!string.IsNullOrEmpty(doc.Summary))
                                {
                                    <span class="soc-card-summary">@doc.Summary</span>
                                }
                                <span class="soc-card-meta">@doc.ReadingMinutes min read</span>
                            </a>
                        }
                    </div>
                }
            </section>
        }
    </div>

    <partial name="_Toc" model="Model.Overview.Headings" />
</div>

@section Styles {
    <partial name="_Head" />
}