<Page
    x:Class="Breda_Tour.RouteSelectScreen.RouteExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Breda_Tour.RouteSelectScreen"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c="using:Breda_Tour.CustomControls"
    xmlns:data="using:Breda_Tour.Data"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <c:DefaultTopBar Grid.Row="0" Header="Routevoorbeeld"/>

        <StackPanel Grid.Row="1">
            <StackPanel Orientation="Horizontal" Margin="10,10,0,0">
                <TextBlock Text="Route informatie" FontSize="16"/>
                <Button x:Name="StartButton" Visibility="Collapsed" Click="Button_Click" Margin="120,0,0,0" >
                    <TextBlock Text="Start Route"/>
                </Button>
            </StackPanel>
            <TextBlock x:Name="RouteBlok" FontSize="16" Margin="10,0,0,0"/>
            <ProgressRing x:Name="ProgressRing" Height="40" Width="40" IsActive="True" HorizontalAlignment="Left" Margin="20,0,0,0" Foreground="Black"/>
            <TextBlock x:Name="Loopblok" FontSize="16" Margin="10,0,0,0" />
            <TextBlock x:Name="WaypointsBlok" FontSize="16" Margin="10,0,0,10"/>

        </StackPanel>
        <StackPanel Grid.Row="2">
            <Image Source="ms-appx:///Assets/Map.png" Width="360"  />
        </StackPanel>

        <ListView Grid.Row="3" Margin="10,0,0,0" x:Name="Waypoints" ItemsSource="{x:Bind route.Waypoints}" IsItemClickEnabled="True" ItemClick="Waypoints_OnItemClick">
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListView.ItemTemplate >
                <DataTemplate x:DataType="data:Waypoint">
                    <TextBlock Text="{x:Bind Title}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>
