@page "/"
@page "/home"
@attribute [Microsoft.AspNetCore.Authorization.Authorize]

<MudStack class="p-8 w-full h-screen bg-[--mud-palette-background-grey]">
    <MudGrid>
        <MudItem sm="4" lg="2">
            <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
                <MudText Typo="Typo.body1" class="mb-4">تعداد محصولاتــ</MudText>
                <MudText Typo="Typo.h3" Align="Align.Center" class="text-amber-600"><b>1124</b></MudText>
                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
            </MudPaper>
        </MudItem>
        <MudItem sm="4" lg="2">
            <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
                <MudText Typo="Typo.body1" class="mb-4">تعداد بلاگــ ها</MudText>
                <MudText Typo="Typo.h3" Align="Align.Center" class="text-blue-600"><b>845</b></MudText>
                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
            </MudPaper>
        </MudItem>
        <MudItem sm="4" lg="2">
            <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
                <MudText Typo="Typo.body1" class="mb-4">فروش های امروز</MudText>
                <MudText Typo="Typo.h3" Align="Align.Center" class="text-lime-600"><b>125</b></MudText>
                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
            </MudPaper>
        </MudItem>
        <MudItem sm="4" lg="2">
            <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
                <MudText Typo="Typo.body1" class="mb-4">فروش های تایید نشده</MudText>
                <MudText Typo="Typo.h3" Align="Align.Center" class="text-rose-600"><b>10</b></MudText>
                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
            </MudPaper>
        </MudItem>
        <MudItem sm="4" lg="2">
            <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
                <MudText Typo="Typo.body1" class="mb-4">تعداد برنـــدها</MudText>
                <MudText Typo="Typo.h3" Align="Align.Center" class="text-gray-600"><b>125</b></MudText>
                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
            </MudPaper>
        </MudItem>
        <MudItem sm="4" lg="2">
            <MudPaper class="p-3 m-2 rounded-md" Elevation="2">
                <MudText Typo="Typo.body1" class="mb-4">تعداد مشترکین</MudText>
                <MudText Typo="Typo.h3" Align="Align.Center" class="text-purple-600"><b>5632</b></MudText>
                <MudText Typo="Typo.h6" Align="Align.Center" class="mb-4 -mt-1"><b>عدد</b></MudText>
            </MudPaper>
        </MudItem>
    </MudGrid>
    <MudGrid>
        <MudItem md="4">
            <MudStack class="p-2">

                <BaseButtonUi class="w-full rounded-md"
                              Icon="@Icons.Material.Outlined.AddCard"
                              Variant="Variant.Outlined" Color="Color.Default"
                              Content="افزودن محصول جدید" />
            </MudStack>
        </MudItem>

        <MudItem md="4">
            <MudStack class="p-2">

                <BaseButtonUi class="w-full rounded-md"
                              Icon="@Icons.Material.Outlined.AddLink"
                              Variant="Variant.Outlined" Color="Color.Default"
                              Content="افزودن بلاگ جدید" />
            </MudStack>
        </MudItem>

        <MudItem md="4">
            <MudStack class="p-2">

                <BaseButtonUi class="w-full rounded-md"
                              Icon="@Icons.Material.Outlined.AddBusiness"
                              Variant="Variant.Outlined" Color="Color.Default"
                              Content="افزودن برند جدید" />
            </MudStack>
        </MudItem>
    </MudGrid>

    <MudGrid class="mt-3">
        <MudItem sm="12" md="6">
            <MudStack class="m-2">
                <MudText Typo="Typo.h5"><b>سفارشاتــ تایید نشده</b></MudText>
                <MudPaper class="rounded-md p-3" Elevation="2">
                    <MudDataGrid FixedFooter="true" FixedHeader="true" Striped="true"
                                 T="ProductSDto" 
                                 SortMode="@SortMode.None" Groupable="false">
                        <Columns>
                            <PropertyColumn Title="نام محصول" Property="arg => arg.PersianName" />
                            <PropertyColumn Title="دسته بندی" Property="arg => arg.CategoryName" />
                            <PropertyColumn Title="برند" Property="arg => arg.BrandName" />
                            <PropertyColumn Title="قیمتــ" Property="arg => arg.Cost" />
                            <TemplateColumn CellClass="d-flex justify-end">
                                <CellTemplate>
                                    <MudStack Row="true">
                                        <MudIconButton Icon="@Icons.Material.Filled.Edit"
                                                       Size="@Size.Small"
                                                       Variant="@Variant.Outlined"
                                                       Color="@Color.Info" />
                                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                                       Size="@Size.Small"
                                                       Variant="@Variant.Outlined"
                                                       Color="@Color.Error" />
                                    </MudStack>
                                </CellTemplate>
                            </TemplateColumn>
                        </Columns>
                        <PagerContent>
                            <MudStack Row="true" class="w-full">

                                <MudPagination Rectangular="true" Variant="Variant.Filled" class="my-4 mx-auto" />
                            </MudStack>

                        </PagerContent>
                    </MudDataGrid>
                </MudPaper>
            </MudStack>
        </MudItem>

        <MudItem sm="12" md="6">
            <MudStack class="m-2">
                <MudText Typo="Typo.h5"><b>سفارشاتــ ارسال نشده</b></MudText>
                <MudPaper class="rounded-md p-3" Elevation="2">

                </MudPaper>
            </MudStack>
        </MudItem>
    </MudGrid>
</MudStack>