Scrollable

@using Microsoft.AspNetCore.Components.Web
@using Spectre.Console
@using RazorConsole.Components

<Panel Title="Use tab to change focus and arrow up/down + num keys to scroll" Border="BoxBorder.Rounded" Expand>

    <Scrollable Items="@GetAlphabetData()" PageSize="3">
        <Rows>
            <SpectreTable Title="Custom realization" Border="TableBorder.Rounded" BorderColor="@_tableColor"
                          @onfocus="OnFocusTable" @onfocusout="OnFocusOutTable"
                          @onkeydown="context.KeyDownEventHandler">
                <SpectreTHead>
                    <SpectreTR>
                        <SpectreTH Align="Justify.Left">N</SpectreTH>
                        <SpectreTH Align="Justify.Center">Letter</SpectreTH>
                    </SpectreTR>
                </SpectreTHead>
                <SpectreTBody>
                    @foreach (var item in context)
                    {
                        <SpectreTR>
                            <SpectreTD>
                                <Markup Content="@item.Number.ToString()" Foreground="@item.Color"/>
                            </SpectreTD>
                            <SpectreTD>
                                <Markup Content="@item.Letter" Foreground="@item.Color"/>
                            </SpectreTD>
                        </SpectreTR>
                    }
                </SpectreTBody>
            </SpectreTable>
            <Markup Content=@($"Page: {context.CurrentOffset + 1} / {context.PagesCount}")/>
        </Rows>
    </Scrollable>

    <Markup Content="   "/> @*Spaces beteween panels*@

    <Scrollable Scrollbar="new()" Items="@GetAlphabetData()" PageSize="3">
        <SpectreTable Title="Table" Border="TableBorder.Rounded" Expand>
            <SpectreTHead>
                <SpectreTR>
                    <SpectreTH Align="Justify.Left">N</SpectreTH>
                    <SpectreTH Align="Justify.Center">Letter</SpectreTH>
                </SpectreTR>
            </SpectreTHead>
            <SpectreTBody>
                @foreach (var item in context)
                {
                    <SpectreTR>
                        <SpectreTD>
                            <Markup Content="@item.Number.ToString()" Foreground="@item.Color"/>
                        </SpectreTD>
                        <SpectreTD>
                            <Markup Content="@item.Letter" Foreground="@item.Color"/>
                        </SpectreTD>
                    </SpectreTR>
                }
            </SpectreTBody>
        </SpectreTable>

        <Markup Content=@($"Page: {context.CurrentOffset + 1} / {context.PagesCount}")/>
    </Scrollable>

    <Markup Content="   "/>

    <Scrollable Scrollbar="new()" Items="@GetAlphabetData()" PageSize="6">
        <Panel Border="BoxBorder.Rounded" Title="Panel" Expand>
            <ol start="@(context.CurrentOffset + 1)">
                @foreach (var item in context)
                {
                    <li>
                        <Markup Content=@($"{item.Letter}") Foreground="@item.Color"/>
                    </li>
                }
            </ol>
        </Panel>

        <Markup Content=@($"Page: {context.CurrentOffset + 1} / {context.PagesCount}")/>
    </Scrollable>

    <Markup Content="   "/>

    <Rows>
        <Markup Content="Not embedded"/>
        <Markup Content="(full container height)" Decoration="Decoration.Italic"/>
        <Scrollable Scrollbar="new()" Items="@GetAlphabetData()" PageSize="6">
            <ol start="@(context.CurrentOffset + 1)">
                @foreach (var item in context)
                {
                    <li>
                        <Markup Content=@($"{item.Letter}") Foreground="@item.Color"/>
                    </li>
                }
            </ol>

            <Markup Content=@($"Page: {context.CurrentOffset + 1} / {context.PagesCount}")/>
        </Scrollable>
    </Rows>
</Panel>

@code {
    private Color _tableColor = Color.White;

    record Item(int Number, string Letter, Color Color);

    private IReadOnlyList<(int Number, string Letter, Color Color)> GetAlphabetData()
    {
        return
        [
            (1, "A", Color.Yellow),
            (2, "B", Color.Red),
            (3, "C", Color.Aqua),
            (4, "D", Color.Orange1),
            (5, "E", Color.Chartreuse1),
            (6, "F", Color.Magenta1),
            (7, "G", Color.Green3),
            (8, "H", Color.Blue),
            (9, "I", Color.Purple),
            (10, "J", Color.Gold1),
            (11, "K", Color.Turquoise2),
            (12, "L", Color.HotPink),
            (13, "M", Color.Lime),
            (14, "N", Color.LightCoral),
            (15, "O", Color.SkyBlue1)
        ];
    }


    private void OnFocusTable(FocusEventArgs e)
    {
        _tableColor = Color.Aqua;
    }

    private void OnFocusOutTable(FocusEventArgs e)
    {
        _tableColor = Color.White;
    }

}