@inherits LayoutComponentBase

<PageTitle>KBS</PageTitle>

<MudRTLProvider RightToLeft="true">
    <MudThemeProvider @ref="_mudThemeProvider" Theme="CustomMudTheme.CustomMudBlazorTheme" @bind-IsDarkMode="_isDark" />
    <MudPopoverProvider />
    <MudDialogProvider />
    <MudSnackbarProvider />
    <MudLayout>
        <!-- AppBar -->
        <MudAppBar Elevation="0" Color="Color.Transparent" Dense="true" Class="py-2" id="top">
            <MudContainer MaxWidth="MaxWidth.Large" Class="d-flex align-center justify-space-between w-100">

                <MudHidden Breakpoint="Breakpoint.SmAndUp">
                    <MudIconButton Class="d-inline"
                                   Icon="@Icons.Material.Filled.Menu"
                                   OnClick="@ToggleDrawer" />
                </MudHidden>

                <div class="d-flex align-center gap-2">
                    <MudLink Href="@(RouteConstants.Main.MainPage)" Underline="Underline.None">
                        <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
                        <MudHidden Breakpoint="Breakpoint.SmAndUp" Invert="true">                            
                            <MudImage ObjectFit="ObjectFit.Cover"
                                      ObjectPosition="ObjectPosition.Center"
                                      Width="32"
                                      Height="32"
                                      Class="rounded-circle"
                                      Src="favicon.png" />
                        </MudHidden>
                        <MudText Typo="Typo.h6" >KBS</MudText>
                        </MudStack>
                    </MudLink>
                </div>

                <div class="d-none d-md-flex align-center gap-10">                    
                    <MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" Class="mud-link">سوالات متداول</MudLink>
                    <MudLink Href="@(RouteConstants.Contact.Index)" Typo="Typo.subtitle1" Class="mud-link">ارتباط با ما</MudLink>
                    <MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" Class="mud-link">درباره ما</MudLink>
                </div>

                <div class="d-flex align-center gap-2">
                    @if (_isAuthenticated)
                    {
                        <MudMenu Icon="@Icons.Material.Filled.Person" Color="Color.Inherit" Size="Size.Medium">
                            <MudMenuItem OnClick="NavigateToProfile">پروفایل</MudMenuItem>
                            <MudDivider />
                            <MudMenuItem OnClick="Logout">خروج از حساب</MudMenuItem>
                        </MudMenu>
                    }
                    else
                    {
                        <MudIconButton Icon="@Icons.Material.Filled.Login" Color="Color.Inherit" OnClick="OpenAuthDialog" />
                    }

                    <MudIconButton OnClick="@ToggleTheme" Edge="Edge.End"
                                   Icon="@(_isDark ? Icons.Material.Filled.DarkMode : Icons.Material.Filled.LightMode)" />
                </div>
            </MudContainer>
        </MudAppBar>

        <!-- Mobile Drawer -->
        <MudDrawer @bind-Open="_drawerOpen" Anchor="Anchor.Right" Elevation="1" Variant="DrawerVariant.Temporary" Class="pa-4">
            <MudStack Spacing="2">
                <MudLink Href="@(RouteConstants.FAQ.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">سوالات متداول</MudLink>
                <MudLink Href="@(RouteConstants.About.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">درباره ما</MudLink>
                <MudLink Href="@(RouteConstants.Contact.Index)" Typo="Typo.subtitle1" OnClick="() => _drawerOpen=false">ارتباط با ما</MudLink>

                <MudDivider Class="my-2" />
                @if (_isAuthenticated)
                {
                    <MudButton Href="/profile" Color="Color.Primary" OnClick="() => _drawerOpen=false">پروفایل</MudButton>
                    <MudButton Variant="Variant.Text" Color="Color.Error" OnClick="() => { _drawerOpen=false; Logout(); }">خروج از حساب</MudButton>
                }
                else
                {
                    <MudButton Color="Color.Primary" OnClick="() => { _drawerOpen=false; OpenAuthDialog(); }">ورود</MudButton>
                }
            </MudStack>
        </MudDrawer>

        <MudMainContent>
            @Body
            <Footer />
        </MudMainContent>

    </MudLayout>
</MudRTLProvider>