<?xml version="1.0" encoding="utf-8" ?>
<Border xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:controls="clr-namespace:MauiBrokenBindings.Pages.Controls"
        xmlns:models="clr-namespace:MauiBrokenBindings.Models"
        xmlns:fonts="clr-namespace:Fonts"
        xmlns:pageModels="clr-namespace:MauiBrokenBindings.PageModels"
        xmlns:shimmer="clr-namespace:Syncfusion.Maui.Toolkit.Shimmer;assembly=Syncfusion.Maui.Toolkit"
        x:Class="MauiBrokenBindings.Pages.Controls.ProjectCardView"
        SemanticProperties.Description="{Binding AccessibilityDescription}"
        Style="{StaticResource CardStyle}"
        MinimumHeightRequest="250"
        x:DataType="models:Project">
    <shimmer:SfShimmer
        BackgroundColor="Transparent"
        IsActive="{Binding IsBusy, Source={RelativeSource AncestorType={x:Type pageModels:MainPageModel}}, x:DataType=pageModels:IProjectTaskPageModel}">
        <shimmer:SfShimmer.CustomView>
            <VerticalStackLayout Spacing="15">
                <BoxView 
                    CornerRadius="48"
                    WidthRequest="24"
                    HeightRequest="24"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"
                    Style="{StaticResource ShimmerCustomViewStyle}"/>
                <BoxView 
                    HeightRequest="24"
                    Style="{StaticResource ShimmerCustomViewStyle}"/>
                <BoxView 
                    HeightRequest="48"
                    Style="{StaticResource ShimmerCustomViewStyle}"/>
                <BoxView 
                    HeightRequest="24"
                    Margin="0, 12"
                    Style="{StaticResource ShimmerCustomViewStyle}"/>
            </VerticalStackLayout>
        </shimmer:SfShimmer.CustomView>
        <shimmer:SfShimmer.Content>
            <VerticalStackLayout Spacing="15">
                <Image HorizontalOptions="Start" Aspect="Center">
                    <Image.Source>
                        <FontImageSource 
                    Glyph="{Binding Icon}" 
                    FontFamily="{x:Static fonts:FluentUI.FontFamily}" 
                    Color="{AppThemeBinding Light={StaticResource DarkOnLightBackground}, Dark={StaticResource LightOnDarkBackground}}"
                    Size="{StaticResource IconSize}"/>
                    </Image.Source>
                </Image>
                <Label Text="{Binding Name}" TextColor="{AppThemeBinding Light={StaticResource Gray600}, Dark={StaticResource Gray400}}" FontSize="14" TextTransform="Uppercase"/>
                <Label Text="{Binding Description}" LineBreakMode="WordWrap"/>
                <FlexLayout Wrap="Wrap" Direction="Row" AlignItems="Start" JustifyContent="Start" BindableLayout.ItemsSource="{Binding Tags}">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="models:Tag">
                            <controls:TagView />
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>
            </VerticalStackLayout>
        </shimmer:SfShimmer.Content>
    </shimmer:SfShimmer>
</Border>