@using Model.Website
<div class="sectionContainer">
    <div class="sectionHeader">
        <div class="sectionTitle">
            @Section.Name
        </div>
    </div>

    @foreach (var childPage in Children) {
        if (childPage.IsPrivate.Equals("True")) {
            continue;
        }
        <NavLinkComponent Page=childPage></NavLinkComponent>
    }
</div>

<style>
    .sectionContainer {
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: flex-start;
        position: relative;
        margin-top: 12px;
        padding: 18px;
        width: 300px;
        margin-left: 4px;
    }

    .sectionHeader {
        bottom: 100%;
        position: absolute;
        top: 0px;
        left: -8px;
        padding-right: 12px;
        padding-left: 4px;
        width: 100%;
        display: flex;
        line-height: 0px;
    }

    .sectionTitle {
        font-weight: bold;
        padding-right: 8px;
        margin-top: -2px;
        white-space: pre;
    }
</style>

@code {

    [Parameter]
    public WebSectionModel? Section { get; set; }

    [Parameter]
    public List<WebPageModel>? Children { get; set; }

}