<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:views="clr-namespace:inutralia.Views;assembly=inutralia"
             x:Class="inutralia.Views.TrivialGameView"
             Title="{Binding Title}">

    <!-- Contenedor principal -->
    <StackLayout VerticalOptions="FillAndExpand">

        <!-- Contenedor pregunta (visible cuando la partida no ha terminado) -->
        <StackLayout VerticalOptions="Fill" IsVisible="{Binding IsNotComplete}">

            <!-- MAIN IMAGE -->
            <ffimageloading:CachedImage x:Name="img"
					                    Source="{ Binding CurrentQuestion.Image }"
					                    Aspect="AspectFit"
					                    BackgroundColor="Black"
					                    HorizontalOptions="Center"
					                    VerticalOptions="Start"
					                    Opacity=".8"/>

            <!-- Pregunta -->
            <Label HorizontalOptions="FillAndExpand"
                   VerticalOptions="Start"
                   HorizontalTextAlignment="Center"
                   Text="{Binding CurrentQuestion.Text}"
                   BackgroundColor="{ DynamicResource ComplementColor }"
                   TextColor="{DynamicResource CustomNavBarTextColor }" />

            <!-- Opciones -->
            <ListView SeparatorVisibility="Default"
                      SeparatorColor="{ DynamicResource ListViewSeparatorColor }"
                      Footer=""
                      ItemsSource="{Binding CurrentQuestion.Options}"
                      VerticalOptions="EndAndExpand"
                      ItemTapped="ItemTapped"
                      HasUnevenRows="True"                   
                      x:Name="listOptions">

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ContentView>
                                <StackLayout Padding="10,10,10,10">
                                    <Label Text="{Binding .}" />
                                </StackLayout>
                            </ContentView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

        <!-- Contenedor resultado (visible cuando la partida ha terminado) -->
        <StackLayout VerticalOptions="FillAndExpand" IsVisible="{Binding IsComplete}"  Padding="8,8,8,8" Margin="8,8,8,8">

            <!--titulo campos de cada partida-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  BackgroundColor="{DynamicResource ComplementColor}" Padding="8,8,8,8" Margin="0,20,0,0" Grid.Row="1">
                <Label Text="Fecha" HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource CustomNavBarTextColor}" />
                <Label Text="Respuestas" HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource CustomNavBarTextColor}" />
                <Label Text="Puntuación" HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource CustomNavBarTextColor}" />
            </StackLayout>

            <!-- Resumen -->
            <views:TrivialGameItemTemplate BindingContext="{Binding Game}" />

            <!-- Resultados -->
            <!--Título listado de resultados-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"  BackgroundColor="#FF62b9ae" Padding="8,8,8,8" >
                <Label Text="Resumen de resultados" HorizontalOptions="CenterAndExpand" TextColor="{DynamicResource CustomNavBarTextColor}" />
            </StackLayout>

            <!--preguntas y acierto o fallo-->
            <ListView SeparatorVisibility="Default"
                      SeparatorColor="{ DynamicResource ListViewSeparatorColor }"
                      ItemsSource="{Binding Results}"
                      ItemTapped="Results_ItemTapped"
                      HasUnevenRows="True"
                      x:Name="listResults">

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <views:TrivialGameResultTemplate/>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </StackLayout>
</ContentPage>
    