<?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.ArticleViewPage"
    xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
    BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }">

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

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

            <!--GRID IMAGEN -->
            <StackLayout>
                <Grid Grid.Row="0"
				  Grid.RowSpan="2"
				  Padding="0">

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

                <!-- MAIN HEADER -->
                <Grid
               Grid.Row="0"
               VerticalOptions="EndAndExpand"
			   x:Name="headers" 
			   AnchorX="0"
		       AnchorY="0"
               BackgroundColor="#66000000">

                    <!-- HEADERS -->
                    <Label
					      Text="{ Binding Article.Title }"
					      LineBreakMode="WordWrap"
					      TextColor="#FFFFFFFF"
					      FontSize="Medium"
					      FontAttributes="Bold"
                          HeightRequest="80"
                          Margin="10"
                          HorizontalOptions="CenterAndExpand"
                          VerticalOptions="Center"/>
                </Grid>
            </StackLayout>

            <!--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 }" />

                <!--HEADER INFO-->
                <StackLayout
                    Orientation="Horizontal"
					Grid.Row="0"
					Padding="20,0"
					VerticalOptions="Center"
					Spacing="10">

                    <!--DESCRIPCIÓN (ARTICULO)-->
                    <Label 
                        Text="Articulo" 
						FontSize="14"
						TextColor="{ DynamicResource BaseTextColor }"
						HorizontalOptions="StartAndExpand"
						VerticalTextAlignment="Center"/>

                    <!--DESCRIPCIÓN (FECHA)-->
                    <Label 
						Text="{ Binding Article.Date }"
						FontSize="14"
						TextColor="{ DynamicResource BaseTextColor }"
						HorizontalOptions="End"/>
                </StackLayout>

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

                <!-- TEXT (CUERPO DEL ARTICULO) -->
                <Grid
                    Grid.Row="1"
					Padding="20,20,20,0"
					VerticalOptions="Center"
					RowSpacing="20">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <!-- MAIN PARAGRAPH -->

                    <!-- RESUMEN -->
                    <Label
							Grid.Row="0"
							Text="{ Binding Article.Excerpt }"
							VerticalOptions="Center"
							TextColor="{ DynamicResource BaseTextColor }"
                            FontAttributes="Bold"/>

                    <!-- BODY-->
                    <Label
							Grid.Row="2"
							Text="{ Binding Article.Body }"
							VerticalOptions="Center"
							TextColor="{ DynamicResource BaseTextColor }"/>
                </Grid>
            </Grid>

            <!-- POSTED -->
            <StackLayout
                    Grid.Row="2"
					Orientation="Horizontal"
					VerticalOptions="Fill"
					HorizontalOptions="Center">

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