<?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"
             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>