<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
	xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="inutralia.Views.RecipeDetailView"
	xmlns:local="clr-namespace:inutralia;assembly=inutralia"
	xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
	xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
   	xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
    BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }"
    Title="{Binding Title}">

    <StackLayout>
        <ScrollView 
        x:Name="outerScrollView">

            <Grid x:Name="layeringGrid" RowSpacing="0" VerticalOptions="FillAndExpand" >

                <Grid.RowDefinitions>
                    <RowDefinition Height="240" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="80" />
                </Grid.RowDefinitions>

                <!--GRID IMAGEN -->

                <Grid Grid.Row="0" 
                      Grid.RowSpan="2" 
                      Padding="0" 
                      BackgroundColor="Black">

                    <!-- MAIN IMAGE -->
                    <ffimageloading:CachedImage
                    x:Name="img"
					Source="{ Binding Recipe.Image }"
					Aspect="AspectFill"
					BackgroundColor="Black"
                    HeightRequest="270"
                    WidthRequest="200"
					HorizontalOptions="FillAndExpand"
					VerticalOptions="Start"
					Opacity=".8"/>
                </Grid>

                <!--GRID CUERPO DEPUES DE LA IMAGEN -->
                <Grid Grid.Row="1" BackgroundColor="{ DynamicResource BasePageColor }">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="60" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="80" />
                    </Grid.RowDefinitions>

                    <!--HEADER BACKGROUND-->
                    <BoxView Grid.Row="0" BackgroundColor="{ DynamicResource ArticleHeaderBackgroundColor }" />

                    <StackLayout Orientation="Horizontal" Grid.Row="0" Padding="20">

                        <!--HEADER INFO-->
                        <StackLayout Orientation="Horizontal" Grid.Row="0" HorizontalOptions="StartAndExpand">
                            <Label Text="{ x:Static local:IoniciconsFont.IosTimeOutline }"   FontSize="Large" TextColor="{ DynamicResource BaseTextColor }" HorizontalOptions="Center"   Style="{StaticResource FontIcon}"/>
                            <Label Text="{ Binding Recipe.Time , StringFormat='{0:N} min' }" FontSize="Small" TextColor="{ DynamicResource BaseTextColor }" HorizontalOptions="Center"/>
                        </StackLayout>

                        <StackLayout Orientation="Horizontal" Grid.Row="0" HorizontalOptions="EndAndExpand">
                            <!--DESCRIPCIÓN (FECHA)-->
                            <Label Text="{ x:Static local:IoniciconsFont.Fork }"                          FontSize="Large" TextColor="{ DynamicResource BaseTextColor }" HorizontalOptions="Center"              Style="{StaticResource FontIcon}"/>
                            <Label Text="{ Binding Recipe.Difficulty, StringFormat='Dificultad : {0:N}'}" FontSize="Small" TextColor="{ DynamicResource BaseTextColor }" HorizontalOptions="Center"/>
                        </StackLayout>
                    </StackLayout>

                    <!-- SEPARATOR (CAJA EN LA QUE SE INCLUYEN LAS DOS VARIABLES ANTERIORES (ARTICULO Y FECHA)) -->
                    <BoxView Grid.Row="0" VerticalOptions="End" Style="{ StaticResource Horizontal1ptLineStyle}" />

                    <!--************************* MAIN PARAGRAPH *************************-->

                    <!-- TEXT (CUERPO DE LA RECETA) -->
                    <Grid Grid.Row="1" Padding="20,20,20,0" VerticalOptions="Center">

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

                        <!--++++++++++++++++++ RESUMEN ++++++++++++++++++++++-->

                        <Label Grid.Row="0" Text="{ Binding Recipe.ExcerptQuotes }" Margin="0,20" VerticalOptions="Fill" HorizontalOptions="Center" TextColor="{ DynamicResource BaseTextColor }"  FontAttributes="Italic,Bold"  x:Name="Excerpt"/>

                        <!--++++++++++++++++++ FIN RESUMEN ++++++++++++++++++++++-->



                        <!--++++++++++++++++++ INGREDIENTES ++++++++++++++++++++++-->

                        <!-- INGREDIENTE CABECERA -->
                        <StackLayout Orientation="Horizontal" BackgroundColor="#FF62b9ae"  Grid.Row="1"  Margin="0,5" Padding="10,5,10,5">

                            <Label HorizontalOptions="Start"
                           FontSize="50"
                           Text="{ x:Static local:IoniciconsFont.IosNutrition }"
                           Style="{StaticResource FontIcon}"
                           TextColor="#FFFFFFFF"/>

                            <Label Text=" Ingredientes (4 personas)" VerticalOptions="Center" TextColor="#FFFFFFFF"/>
                        </StackLayout>

                        <!--INGREDIENTE CUERPO-->
                        <ListView
			            SeparatorVisibility="None"
			            Grid.Row="2" 
			            ItemsSource="{Binding Recipe.Ingredients}"
                        x:Name="listTable"
                        HasUnevenRows="False"
                        Footer=""
                        RowHeight="30"
                        ItemTapped="UnSelectedItem"
                        VerticalOptions="FillAndExpand">

                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <StackLayout Orientation="Horizontal" HorizontalOptions="Fill">
                                            <Label Text="{Binding Name     , StringFormat='-{0:N}'}"  />
                                            <Label Text="{Binding Cuantity , StringFormat='({0:N})'}" />
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                        <!--++++++++++++++++++FIN INGREDIENTES++++++++++++++++++++++-->
                        <Label/>
                        <Label/>

                        <!--++++++++++++++++++ PREPARACIÓN ++++++++++++++++++++++-->
                        <!--CABECERA-->
                        <StackLayout Orientation="Horizontal" BackgroundColor="#FF62b9ae"  Grid.Row="3"  Margin="0,5" Padding="10,5,10,5">

                            <Label HorizontalOptions="Start"
                               FontSize="50"
                               Text="{ x:Static local:IoniciconsFont.ErlenmeyerFlaskBubbles }"
                               Style="{StaticResource FontIcon}"
                               TextColor="#FFFFFFFF"/>

                            <Label Text="Preparación" VerticalOptions="Center" TextColor="#FFFFFFFF"/>
                        </StackLayout>

                        <!-- CUERPO -->
                        <Label
                        Grid.Row="4"
						Text="{ Binding Recipe.Description }"
						VerticalOptions="Center"
						TextColor="{ DynamicResource BaseTextColor }"/>

                        <!--++++++++++++++++++ FIN PREPARACIÓN ++++++++++++++++++++++-->


                        <!--++++++++++++++++++ TABLA INFORMACIÓN NUTRICIONAL ++++++++++++++++++++++-->

                        <!-- CABECERA  -->
                        <StackLayout Orientation="Horizontal" BackgroundColor="#FF62b9ae"  Grid.Row="5"  Margin="0,5" Padding="10,5,10,5">

                            <Label                                         
						HorizontalOptions="Start"
                        FontSize="50"
                        Text="{ x:Static local:IoniciconsFont.IosInformation }"
                        Style="{StaticResource FontIcon}"
                        TextColor="#FFFFFFFF"/>

                            <Label                       
						Text="Información nutricional por ración"
						VerticalOptions="Center"
						TextColor="#FFFFFFFF"/>
                        </StackLayout>

                        <!-- TABLA -->
                        <!-- INFORMATION CUERPO-->
                        <Grid
                        HorizontalOptions="StartAndExpand"
                        Grid.Row="6">

                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <!-- COLUMN 1 (ENERGÍA)-->
                            <Label
                            Grid.Column="0"
                            Grid.Row="0"
                            Text="Energía"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>
                            <Label                            
                            Grid.Column="1"
                            Margin="30,0"
                            Grid.Row="0"
                            Text="{Binding Recipe.Energy}"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>


                            <!-- COLUMN 2 (PROTEINAS)-->
                            <Label
                            Grid.Column="0"
                            Grid.Row="1"
                            Text="Proteinas"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>
                            <Label                            
                            Grid.Column="1"
                            Margin="30,0"
                            Grid.Row="1"
                            Text="{Binding Recipe.Protein}"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>


                            <!-- COLUMN 3 (HIDRATOS DE CARBONO)-->
                            <Label
                            Grid.Column="0"
                            Grid.Row="2"
                            Text="Hidratos de Carbono"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>
                            <Label                            
                            Grid.Column="1"
                            Grid.Row="2"
                            Margin="30,0"
                            Text="{Binding Recipe.Carbohydrates}"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>


                            <!-- COLUMN 4 (LÍQUIDOS)-->
                            <Label
                            Grid.Column="0"
                            Grid.Row="3"
                            Text="Líquidos"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>
                            <Label                            
                            Grid.Column="1"
                            Grid.Row="3"
                            Margin="30,0"
                            Text="{Binding Recipe.Lipids}"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>

                            <!-- COLUMN 5 (FIBRA)-->
                            <Label
                            Grid.Column="0"
                            Grid.Row="4"
                            Text="Fibra"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>
                            <Label                            
                            Grid.Column="1"
						    Grid.Row="4"
                            Margin="30,0"
                            Text="{Binding Recipe.Fiber}"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>


                            <!-- COLUMN 6 (COLESTEROL)-->
                            <Label
                            Grid.Column="0"
                            Grid.Row="5"
                            Text="Colesterol"
                            VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>
                            <Label                            
                            Grid.Column="1"
                            Grid.Row="5"
                            Margin="30,0"
                            Text="{Binding Recipe.Cholesterol}"
						    VerticalOptions="Center"
						    TextColor="{ DynamicResource BaseTextColor }"/>
                        </Grid>
                        <!--++++++++++++++++++ FIN INFORMACIÓN ++++++++++++++++++++++-->

                    </Grid>
                </Grid>
            </Grid>
        </ScrollView>

        <!-- POSTED -->
        <StackLayout        
                  Padding="0,0,0,5"
				  Orientation="Horizontal"
				  VerticalOptions="FillAndExpand"    
				  HorizontalOptions="Center">

            <Label 
                        Text="Publicado por : "
						TextColor="{ DynamicResource AccentColor }"
						VerticalTextAlignment="Center"
                        HorizontalOptions="End"/>
            <Image 
                        Source="inutralia.png"
                        HorizontalOptions="End"/>
        </StackLayout>
    </StackLayout>
</ContentPage>