<Shell x:Class="CrmDemo.AppShell"
        xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:dx="http://schemas.devexpress.com/maui"
        xmlns:views="clr-namespace:CrmDemo.Views"
        xmlns:viewsCust="clr-namespace:CrmDemo.Views.Customers"
        xmlns:viewsProd="clr-namespace:CrmDemo.Views.Products"
        x:Name="appShell">
    <Shell.BackButtonBehavior>
        <BackButtonBehavior TextOverride=""/>
    </Shell.BackButtonBehavior>
    <Shell.Resources>
        <ResourceDictionary>
            <Style TargetType="dx:DXToggleButton" x:Key="ShellItemStyle">
                <Setter Property="BackgroundColor" Value="Transparent" />
                <Setter Property="PressedBackgroundColor" Value="{dx:ThemeColor Key=SecondaryContainer}" />
                <Setter Property="CheckedBackgroundColor" Value="{dx:ThemeColor Key=SecondaryContainer}" />
                <Setter Property="TextColor" Value="{dx:ThemeColor Key=OnSurfaceVariant}" />
                <Setter Property="PressedTextColor" Value="{dx:ThemeColor Key=OnSurfaceVariant}" />
                <Setter Property="CheckedTextColor" Value="{dx:ThemeColor Key=OnSurfaceVariant}" />
                <Setter Property="IconColor" Value="{dx:ThemeColor Key=OnSecondaryContainer}" />
                <Setter Property="CheckedIconColor" Value="{dx:ThemeColor Key=OnSecondaryContainer}" />
                <Setter Property="PressedIconColor" Value="{dx:ThemeColor Key=OnSecondaryContainer}" />
                <Setter Property="IconPlacement" Value="Left" />
                <Setter Property="HorizontalContentAlignment" Value="Start" />
                <Setter Property="Margin" Value="16, 4" />
                <Setter Property="IconIndent" Value="15" />
            </Style>
        </ResourceDictionary>
    </Shell.Resources>
    <Shell.FlyoutHeader>
        <Grid x:Name="flyoutHeader" Padding="0,0,0,10">
            <Grid BackgroundColor="{dx:ThemeColor Key=PrimaryContainer}">
                <dx:DXImage TintColor="{dx:ThemeColor Key=OnPrimaryContainer}" Aspect="AspectFill" Source="crm_background" />
                <dx:DXImage TintColor="{dx:ThemeColor Key=OnPrimaryContainer}" Aspect="Center" Source="crm_foreground" />
            </Grid>
        </Grid>
    </Shell.FlyoutHeader>
    <Shell.ItemTemplate>
        <DataTemplate x:DataType="ShellContent">
            <dx:DXToggleButton Icon="{Binding Icon}" Style="{StaticResource ShellItemStyle}" IsChecked="{Binding IsChecked, Mode=OneWay}"
                HorizontalContentAlignment="Fill" IconWidth="24" IconHeight="24" InputTransparent="True" Padding="18" Margin="12,0">
                <dx:DXDockLayout>
                    <Label dx:DXDockLayout.Dock="Left" Text="{Binding Title}" TextColor="{dx:ThemeColor OnSurfaceVariant}" HorizontalTextAlignment="Start" FontAttributes="Bold" />
                    <Label dx:DXDockLayout.Dock="Right" Text="{Binding Content}" TextColor="{dx:ThemeColor OnSurfaceVariant}" HorizontalTextAlignment="End" FontAttributes="Bold" />
                </dx:DXDockLayout>
            </dx:DXToggleButton>
        </DataTemplate>
    </Shell.ItemTemplate>
    <ShellContent ContentTemplate="{DataTemplate views:HomePage}" Route="Home" Title="Home" Icon="home"/>
    <ShellContent x:Name="customersShellItem" ContentTemplate="{DataTemplate viewsCust:CustomersPage}" Route="Customers" Title="Customers" Icon="customers" />
    <ShellContent x:Name="meetingsShellItem" ContentTemplate="{DataTemplate views:MeetingsPage}" Route="Meetings" Title="Meetings" Icon="meetings" />
    <ShellContent x:Name="employeesShellItem" ContentTemplate="{DataTemplate views:EmployeesPage}" Route="My Team" Title="Team" Icon="team" />
    <ShellContent x:Name="ordersShellItem" ContentTemplate="{DataTemplate views:OrdersPage}" Route="Orders" Title="Orders" Icon="orders" />
    <ShellContent x:Name="productsShellItem" ContentTemplate="{DataTemplate viewsProd:ProductsPage}" Route="Products" Title="Products" Icon="products" />
    <ShellContent ContentTemplate="{DataTemplate views:DashboardsPage}" Route="Dashboards" Title="Dashboards" Icon="dashboards" />
    <ShellContent ContentTemplate="{DataTemplate views:ReportsPage}" Route="Reports" Title="Reports" Icon="reports" />
    <ShellContent ContentTemplate="{DataTemplate views:SettingsPage}" Route="Settings" Title="Settings" Icon="settings" />
</Shell>
