@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codePaginationDefault">
    <Pagination>
        <PaginationContent>
            <PaginationPrevious OnClick="() => { if (_page1 > 1) _page1--; }" />
            @for (var i = 1; i <= 5; i++)
            {
                var pg = i;
                <PaginationItem IsActive="_page1 == pg" OnClick="() => _page1 = pg">@pg</PaginationItem>
            }
            <PaginationNext OnClick="() => { if (_page1 < 5) _page1++; }" />
        </PaginationContent>
    </Pagination>
</PatternCard>

<PatternCard Label="With Ellipsis" Code="@_codePaginationEllipsis">
    <Pagination>
        <PaginationContent>
            <PaginationPrevious OnClick="() => { if (_page2 > 1) _page2--; }" />
            <PaginationItem IsActive="_page2 == 1" OnClick='() => _page2 = 1'>1</PaginationItem>
            <PaginationItem IsActive="_page2 == 2" OnClick='() => _page2 = 2'>2</PaginationItem>
            <PaginationEllipsis />
            <PaginationItem IsActive="_page2 == 10" OnClick='() => _page2 = 10'>10</PaginationItem>
            <PaginationNext OnClick="() => { if (_page2 < 10) _page2++; }" />
        </PaginationContent>
    </Pagination>
</PatternCard>
</Stack>

@code {
    private int _page1 = 1;

    private int _page2 = 1;

        private string _codePaginationDefault = @"<Pagination>
        <PaginationContent>
            <PaginationPrevious OnClick=""() => _page--"" />
            <PaginationItem IsActive=""true"">1</PaginationItem>
            <PaginationItem>2</PaginationItem>
            <PaginationItem>3</PaginationItem>
            <PaginationNext OnClick=""() => _page++"" />
        </PaginationContent>
    </Pagination>";

        private string _codePaginationEllipsis = @"<Pagination>
        <PaginationContent>
            <PaginationPrevious OnClick=""() => _page--"" />
            <PaginationItem IsActive=""true"">1</PaginationItem>
            <PaginationItem>2</PaginationItem>
            <PaginationEllipsis />
            <PaginationItem>10</PaginationItem>
            <PaginationNext OnClick=""() => _page++"" />
        </PaginationContent>
    </Pagination>";
}
