<?xml version="1.0" encoding="utf-8"?>

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
             x:Class="InABox.Mobile.MobileButtonStrip">

    
    <ContentView.Content>
        <ScrollView Orientation="Horizontal">
            
            <StackLayout Orientation="Horizontal"  
                x:Name="_list"
                BackgroundColor="{Binding Source={RelativeSource Self}, Path=BackgroundColor}"
                HeightRequest="40">
                <BindableLayout.ItemTemplate>
                    <DataTemplate x:DataType="mobile:MobileButtonStripItem">
                        
                        <mobile:MobileCard 
                            BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileButtonStrip}}, Path=BorderColor}"
                            BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileButtonStrip}}, Path=UnselectedBackgroundColor}">

                            <mobile:MobileCard.Triggers>
                                <DataTrigger TargetType="mobile:MobileCard" Binding="{Binding Selected}" Value="True">
                                    <Setter Property="BackgroundColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileButtonStrip}}, Path=SelectedBackgroundColor}" />
                                </DataTrigger>
                            </mobile:MobileCard.Triggers>
                        
                            <Label
                                x:Name="_label"
                                Text="{Binding Text}"
                                FontSize="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileButtonStrip}}, Path=FontSize}"
                                FontAttributes="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileButtonStrip}}, Path=FontAttributes}"
                                HorizontalTextAlignment="Center"
                                VerticalTextAlignment="Center"
                                BackgroundColor="Transparent"
                                TextColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileButtonStrip}}, Path=UnselectedForegroundColor}"
                                Margin="5,0">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="DoTap" />
                                </Label.GestureRecognizers>
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label" Binding="{Binding Selected}" Value="True">
                                        <Setter Property="TextColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileButtonStrip}}, Path=SelectedForegroundColor}" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                        </mobile:MobileCard>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>

        </ScrollView>
        
    </ContentView.Content>
    
</ContentView>