@page "/components/pagination"

<PageTitle>Pagination — Lumeo</PageTitle>

<PageHeader Title="Pagination" Description="Navigation controls for paging through content." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Paginated lists where data is split across multiple pages</li>
        <li>Search results with many items that benefit from page-by-page navigation</li>
        <li>Table navigation when rows exceed a single view</li>
        <li>Any content set too large to display at once that requires discrete page controls</li>
    </ul>
</div>

<Alert Variant="Alert.AlertVariant.Default" Class="mt-6"
      Title="Mobile tip"
      Description="On narrow screens (375 px and below), long page ranges can overflow. Use the Compact pattern (Previous / page-count label / Next) or reduce the number of visible page items to keep the control within the viewport. The demos below all scroll horizontally if they overflow." />

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <div class="overflow-x-auto">
            <Pagination>
                <PaginationContent>
                    <PaginationPrevious OnClick="@(() => GoToPage(_currentPage - 1))" Disabled="@(_currentPage <= 1)" />
                    @for (int i = 1; i <= _totalPages; i++)
                    {
                        var pageNum = i;
                        <PaginationItem IsActive="@(pageNum == _currentPage)" OnClick="@(() => GoToPage(pageNum))">
                            @pageNum
                        </PaginationItem>
                    }
                    <PaginationNext OnClick="@(() => GoToPage(_currentPage + 1))" Disabled="@(_currentPage >= _totalPages)" />
                </PaginationContent>
            </Pagination>
        </div>
        <Lumeo.Text Size="sm" Color="muted" Class="text-center mt-4">Page @_currentPage of @_totalPages</Lumeo.Text>
    </ComponentDemo>

    <ComponentDemo Title="Compact" Description="Best for mobile — shows only Previous, a &quot;page / total&quot; label, and Next." Code="@_compactCode">
        <Stack Gap="2">
            <Pagination>
                <PaginationContent>
                    <PaginationPrevious OnClick="@(() => GoToPage3(_compactPage - 1))" Disabled="@(_compactPage <= 1)" />
                    <Lumeo.Text As="span" Size="sm" Color="muted" Class="px-3 flex items-center">@_compactPage / @_compactTotal</Lumeo.Text>
                    <PaginationNext OnClick="@(() => GoToPage3(_compactPage + 1))" Disabled="@(_compactPage >= _compactTotal)" />
                </PaginationContent>
            </Pagination>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Size" Description="Control the size of pagination items via a custom class." Code="@_sizeCode">
        <Stack Gap="3">
            <Flex Align="center" Gap="3" Wrap="true">
                <Lumeo.Text Size="sm" Weight="medium">Size:</Lumeo.Text>
                <Segmented @bind-Value="_paginationSize">
                    <SegmentedItem Value="sm">Sm</SegmentedItem>
                    <SegmentedItem Value="md">Md</SegmentedItem>
                    <SegmentedItem Value="lg">Lg</SegmentedItem>
                </Segmented>
            </Flex>
            <div class="overflow-x-auto">
                <Pagination>
                    <PaginationContent>
                        <PaginationPrevious OnClick="@(() => GoToPage4(_sizePage - 1))" Disabled="@(_sizePage <= 1)" />
                        @for (int i = 1; i <= 5; i++)
                        {
                            var pageNum = i;
                            <PaginationItem IsActive="@(pageNum == _sizePage)"
                                            OnClick="@(() => GoToPage4(pageNum))"
                                            Class="@(_paginationSize switch { "sm" => "h-7 w-7 text-xs", "lg" => "h-11 w-11 text-base", _ => "" })">
                                @pageNum
                            </PaginationItem>
                        }
                        <PaginationNext OnClick="@(() => GoToPage4(_sizePage + 1))" Disabled="@(_sizePage >= 5)" />
                    </PaginationContent>
                </Pagination>
            </div>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Ellipsis" Code="@_ellipsisCode">
        <div class="overflow-x-auto">
            <Pagination>
                <PaginationContent>
                    <PaginationPrevious OnClick="@(() => GoToPage2(_currentPage2 - 1))" Disabled="@(_currentPage2 <= 1)" />
                    <PaginationItem IsActive="@(_currentPage2 == 1)" OnClick="@(() => GoToPage2(1))">1</PaginationItem>
                    <PaginationItem IsActive="@(_currentPage2 == 2)" OnClick="@(() => GoToPage2(2))">2</PaginationItem>
                    <PaginationItem IsActive="@(_currentPage2 == 3)" OnClick="@(() => GoToPage2(3))">3</PaginationItem>
                    <PaginationEllipsis />
                    <PaginationItem IsActive="@(_currentPage2 == 8)" OnClick="@(() => GoToPage2(8))">8</PaginationItem>
                    <PaginationItem IsActive="@(_currentPage2 == 9)" OnClick="@(() => GoToPage2(9))">9</PaginationItem>
                    <PaginationItem IsActive="@(_currentPage2 == 10)" OnClick="@(() => GoToPage2(10))">10</PaginationItem>
                    <PaginationNext OnClick="@(() => GoToPage2(_currentPage2 + 1))" Disabled="@(_currentPage2 >= 10)" />
                </PaginationContent>
            </Pagination>
        </div>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="pagination" Level="3" Class="mt-8 scroll-mt-20">Pagination</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The pagination content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="paginationcontent" Level="3" Class="mt-8 scroll-mt-20">PaginationContent</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The pagination items, previous/next buttons, and ellipsis.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="paginationitem" Level="3" Class="mt-8 scroll-mt-20">PaginationItem</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The page number or label content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsActive</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Highlights the item as the current page.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OnClick</TableCell><TableCell Class="font-mono text-xs">EventCallback</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback invoked when the page item is clicked.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="paginationprevious" Level="3" Class="mt-8 scroll-mt-20">PaginationPrevious</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">OnClick</TableCell><TableCell Class="font-mono text-xs">EventCallback</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback invoked when clicked.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the previous button.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="paginationnext" Level="3" Class="mt-8 scroll-mt-20">PaginationNext</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">OnClick</TableCell><TableCell Class="font-mono text-xs">EventCallback</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback invoked when clicked.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the next button.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="paginationellipsis" Level="3" Class="mt-8 scroll-mt-20">PaginationEllipsis</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/data-table" class="text-primary hover:underline">DataTable</a> — Full-featured data table with built-in pagination support</li>
        <li><a href="/components/table" class="text-primary hover:underline">Table</a> — Simple table component to pair with Pagination for paged views</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — Standalone navigation buttons for simpler paging patterns</li>
    </ul>
</div>

@code {
    private int _currentPage = 1;
    private int _totalPages = 5;
    private int _currentPage2 = 3;
    private int _compactPage = 1;
    private int _compactTotal = 20;

    private void GoToPage(int page)
    {
        if (page >= 1 && page <= _totalPages)
            _currentPage = page;
    }

    private void GoToPage2(int page)
    {
        if (page >= 1 && page <= 10)
            _currentPage2 = page;
    }

    private void GoToPage3(int page)
    {
        if (page >= 1 && page <= _compactTotal)
            _compactPage = page;
    }

    private string _paginationSize = "md";
    private int _sizePage = 1;

    private void GoToPage4(int page)
    {
        if (page >= 1 && page <= 5)
            _sizePage = page;
    }

    private string _sizeCode = @"<Segmented @bind-Value=""_paginationSize"">
    <SegmentedItem Value=""sm"">Sm</SegmentedItem>
    <SegmentedItem Value=""md"">Md</SegmentedItem>
    <SegmentedItem Value=""lg"">Lg</SegmentedItem>
</Segmented>

<Pagination>
    <PaginationContent>
        <PaginationPrevious OnClick=""@(() => GoToPage(_currentPage - 1))"" Disabled=""@(_currentPage <= 1)"" />
        @for (int i = 1; i <= 5; i++)
        {
            var page = i;
            <PaginationItem IsActive=""@(page == _currentPage)""
                            OnClick=""@(() => GoToPage(page))""
                            Class=""@(_paginationSize switch { \""sm\"" => \""h-7 w-7 text-xs\"", \""lg\"" => \""h-11 w-11 text-base\"", _ => \""\""  })"">
                @page
            </PaginationItem>
        }
        <PaginationNext OnClick=""@(() => GoToPage(_currentPage + 1))"" Disabled=""@(_currentPage >= 5)"" />
    </PaginationContent>
</Pagination>

@code {
    private string _paginationSize = ""md"";
    private int _currentPage = 1;
}";

    private string _defaultCode = @"<Pagination>
    <PaginationContent>
        <PaginationPrevious OnClick=""@(() => GoToPage(_currentPage - 1))""
                           Disabled=""@(_currentPage <= 1)"" />
        @for (int i = 1; i <= _totalPages; i++)
        {
            var page = i;
            <PaginationItem IsActive=""@(page == _currentPage)""
                           OnClick=""@(() => GoToPage(page))"">
                @page
            </PaginationItem>
        }
        <PaginationNext OnClick=""@(() => GoToPage(_currentPage + 1))""
                       Disabled=""@(_currentPage >= _totalPages)"" />
    </PaginationContent>
</Pagination>

@code {
    private int _currentPage = 1;
    private int _totalPages = 5;

    private void GoToPage(int page)
    {
        if (page >= 1 && page <= _totalPages)
            _currentPage = page;
    }
}";

    private string _compactCode = @"<Pagination>
    <PaginationContent>
        <PaginationPrevious OnClick=""@(() => GoToPage(_currentPage - 1))"" Disabled=""@(_currentPage <= 1)"" />
        <Lumeo.Text As=""span"" Size=""sm"" Color=""muted"" Class=""px-3 flex items-center"">@_currentPage / @_totalPages</Lumeo.Text>
        <PaginationNext OnClick=""@(() => GoToPage(_currentPage + 1))"" Disabled=""@(_currentPage >= _totalPages)"" />
    </PaginationContent>
</Pagination>";

    private string _ellipsisCode = @"<Pagination>
    <PaginationContent>
        <PaginationPrevious OnClick=""..."" />
        <PaginationItem IsActive=""true"">1</PaginationItem>
        <PaginationItem>2</PaginationItem>
        <PaginationItem>3</PaginationItem>
        <PaginationEllipsis />
        <PaginationItem>8</PaginationItem>
        <PaginationItem>9</PaginationItem>
        <PaginationItem>10</PaginationItem>
        <PaginationNext OnClick=""..."" />
    </PaginationContent>
</Pagination>";
}
