@layout PageLayout

@page "/notes"

<LayoutMediumContentComponent>
    <WebsiteTitleComponent>Notes</WebsiteTitleComponent>

    <div class="section">
        <div for="noteSection">Section: </div>
        <div style="flex: 1"></div>
        <select @oninput="OnSectionChanged" style="background-color: #36393F; width: 250px; margin-right: 16px;" name="noteSection">
            <option value="All">All</option>

        </select>
    </div>

    <div class="notesContainer">
        @foreach (var note in data) {
            if (note.IsHidden) {
                continue;
            }
            if (selectedSection != "All" && note.Section != selectedSection) {
                continue;
            }
            @if (note.IsPreAlpha) {
                <AlertComponent Type=SeverityType.Warning>
                    <Title>Pre Alpha</Title>
                    <Message>This note refers to content that is in pre-alpha. It won't be accurate in future updates to IGP.</Message>
                </AlertComponent>
            }
            <PaperComponent>
                <div style="display: flex; flex-direction: row;">
                    <span style="font-weight: bold; font-style:italic;">@note.Section</span>
                    <div style="flex: 1"></div>
                    <span style="font-weight: bold; font-style:italic;">Last Updated on @note.LastUpdated</span>
                </div>
                <div>
                    <div id="@note.DEPRECATED_Id()" style="font-weight: bold; font-size: 1.4rem;">@note.Name</div>
                    <div style="white-space:break-spaces;">@((MarkupString)note.Description)</div>
                </div>
            </PaperComponent>
        }
    </div>
</LayoutMediumContentComponent>

<style>
    .section {
        display: flex;
        width: 500px;
        flex-direction: row;
        padding: 4px;
        border: 2px solid black;
        background-color: var(--paper);
        justify-content: center;
        padding: 24px;
        border: 4px solid var(--paper-border);
        box-shadow: 0px 6px var(--paper-border);
    }

    .notesContainer {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .noteContainer {
        padding: 24px;
        border: 2px solid black;
        margin: auto;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--paper);
    }
</style>

@code {
    readonly List<NoteModel> data = NoteModel.Notes.Values.ToList();

    string selectedSection = "All";

    void OnSectionChanged(ChangeEventArgs e) {
        selectedSection = e.Value.ToString();
        StateHasChanged();
    }

}