@using MudBlazor.Internal
<MudText Typo="Typo.h4" Class="mb-4">Lista Produktów</MudText>

    <MudExpansionPanels Class="mb-4">
        <MudExpansionPanel Icon="@Icons.Material.Filled.FilterList"
                           Text="Filtry"
                           Expanded="true">
            <MudGrid>
                <MudItem xs="12" sm="6" md="4">
                    <MudTextField @bind-Value="filterRequest.Search"
                                  Label="Szukaj"
                                  Placeholder="Nazwa, Kod, EAN..."
                                  Immediate="true"
                                  DebounceInterval="500"
                                  OnDebounceIntervalElapsed="SearchProducts"
                                  Clearable="true"/>

                </MudItem>

                <MudItem xs="12" sm="6" md="4">
                    <MudTextField @bind-Value="filterRequest.Name"
                                  Label="Nazwa produktu"
                                  Immediate="true"
                                  DebounceInterval="500"
                                  OnDebounceIntervalElapsed="SearchProducts"
                                  Clearable="true"/>
                </MudItem>

                <MudItem xs="12" sm="6" md="4">
                    <MudTextField @bind-Value="filterRequest.Code"
                                  Label="Kod produktu"
                                  Immediate="true"
                                  DebounceInterval="500"
                                  OnDebounceIntervalElapsed="SearchProducts"
                                  Clearable="true"/>
                </MudItem>

                <MudItem xs="12" sm="6" md="4">
                    <div style="display: flex; gap: 8px; align-items: flex-end;">
                        <div style="flex: 1;">
                            <MudTextField @bind-Value="filterRequest.Ean"
                                          Label="EAN"
                                          Immediate="true"
                                          DebounceInterval="500"
                                          OnDebounceIntervalElapsed="SearchProducts"
                                          Clearable="true"/>
                        </div>
                        @if (ScannerService.IsAvailable)
                        {
                            <MudIconButton Icon="@Icons.Material.Filled.CameraAlt"
                                           Color="Color.Primary"
                                           OnClick="OnScannerClick"
                                           Variant="Variant.Filled"
                                           Size="Size.Medium"
                                           Title="Skanuj kod EAN"/>
                        }
                    </div>

                </MudItem>

                <MudItem xs="12" sm="6" md="4">
                    <MudButton Variant="Variant.Outlined"
                               OnClick="ClearFilters"
                               StartIcon="Icons.Material.Filled.Clear">
                        Wyczyść filtry
                    </MudButton>
                </MudItem>
            </MudGrid>
        </MudExpansionPanel>
    </MudExpansionPanels>

    <MudDivider Class="my-4"></MudDivider>
    
    <MudTable Items="products.Items"
              Dense="true"
              Hover="true"
              Loading="isLoading"
              LoadingProgressColor="Color.Info">
        <HeaderContent>
            <MudTh>Nazwa</MudTh>
            <MudTh>Kod</MudTh>
            <MudTh>EAN</MudTh>
            <MudTh>Akcje</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Nazwa">@context.Name</MudTd>
            <MudTd DataLabel="Kod">@context.Code.Trim()</MudTd>
            <MudTd DataLabel="EAN"></MudTd>
            <MudTd DataLabel="Akcje">
                <MudIconButton Icon="@Icons.Material.Filled.Edit"
                               Size="Size.Small"
                               OnClick="() => EditProduct(context.Id)"/>
                <MudIconButton Icon="@Icons.Material.Filled.Delete"
                               Size="Size.Small"
                               Color="Color.Error"
                               OnClick="() => DeleteProduct(context.Id)"/>
            </MudTd>
        </RowTemplate>
        <NoRecordsContent>
            <MudText>Brak produktów do wyświetlenia</MudText>
        </NoRecordsContent>
        <LoadingContent>
            Ładowanie...
        </LoadingContent>
    </MudTable>

    @if (products.TotalCount > 0)
    {
        <MudGrid Class="mt-4" AlignItems="Center.Center">
            <MudItem xs="12" sm="6">
                <MudText Typo="Typo.body2">
                    Wyniki @((products.Page - 1) * products.PageSize + 1) - @Math.Min(products.Page * products.PageSize, products.TotalCount)
                    z @products.TotalCount
                </MudText>
            </MudItem>
            <MudItem xs="12" sm="6" Class="d-flex justify-end">
                <MudPagination Count="products.TotalPages"
                               Selected="products.Page"
                               SelectedChanged="OnPageChanged"
                               ShowFirstButton="true"
                               ShowLastButton="true"/>
            </MudItem>
        </MudGrid>
    }