<?xml version="1.0" encoding="UTF-8"?>

<!-- Esta es la página con el listado de menus genericos.
     Tiene una lista con las siguientes características:
        - Utiliza un ViewModel (paradigma MVVM) como BindingContext
        - Muestra el listado de los menús genéricos
        - Actualiza el listado al deslizar hacia abajo (pull-to-refresh)
        - Tiene menú contextual (slide-right en iOS, mantener pulsado en Android)
          con un botón para borrar una notificación
-->

<!-- Importante: La página necesita x:Name para poder referenciarla en la descripción
     de los elementos del menú contextual
-->
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:app="clr-namespace:inutralia;assembly=inutralia"
             xmlns:views="clr-namespace:inutralia.Views;assembly=inutralia"
             xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"            
             x:Class="inutralia.Views.GenericListView"
             BackgroundColor="White"
             Title="Menus Saludables"
>

      <StackLayout VerticalOptions="FillAndExpand">

        <!-- Este es el componente para el listado. Primero configura de dónde obtiene los datos 
             y el método al que llamar cuando se hace tap en un elemento de la lista. Luego
             configura el pull-to-refresh. Por último algunas opciones de visionado y gestión
             de memoria
        -->

        <ListView x:Name="ListView"
                  
                  ItemsSource="{Binding Generics}"
                  ItemTapped="ItemTapped" 
                  VerticalOptions="FillAndExpand"
                  SeparatorVisibility="None"
                  SeparatorColor="Transparent"
                  Footer=""
                  
                  BackgroundColor="Transparent"
                  CachingStrategy="RecycleElement"                 
                  HasUnevenRows="false">

            <ListView.RowHeight>
                <OnIdiom x:TypeArguments="x:Int32">
                    <OnIdiom.Phone>
                        <OnPlatform x:TypeArguments="x:Int32" 
                                        iOS="115"
                                        Android="105"/>
                    </OnIdiom.Phone>

                    <OnIdiom.Tablet>
                        <OnPlatform x:TypeArguments="x:Int32" 
                                        iOS="163"
                                        Android="195"/>
                    </OnIdiom.Tablet>
                </OnIdiom>
            </ListView.RowHeight>

            <!-- Aquí se configura el template para cada elemento de la lista -->
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout 
                            BackgroundColor="{Binding . , Converter={StaticResource ListBgConverter}, ConverterParameter={x:Reference ListView} }"
                            Spacing="20" 
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand" 
                            Orientation="Horizontal" >
                            
                            <Grid 
                                BackgroundColor="#33000000"
                                WidthRequest="80" 
                                HorizontalOptions="Start" 
                                VerticalOptions="FillAndExpand">
                                
                                <Grid.WidthRequest>
                                    <OnIdiom x:TypeArguments="x:Double"
                                             Phone="80"
                                             Tablet="100"/>
                                </Grid.WidthRequest>
                                
                                <Label 
                                    Text="{ x:Static app:IoniciconsFont.IosListOutline }" 
                                    FontSize="40" 
                                    Style="{StaticResource FontIcon}"
                                    HorizontalOptions="Center"
                                    VerticalOptions="Center"
                                    TextColor="White"
                                    />
                            </Grid>
                            
                            <StackLayout VerticalOptions="Center" Spacing="2" >
                                
                                <Label Text="{Binding Title}"
                                       FontSize="{artina:OnOrientationDouble 
                                                    PortraitPhone=18,
                                                    LandscapePhone=18,
                                                    PortraitTablet=30,
                                                    LandscapeTablet=30 }"
                                       TextColor="{ DynamicResource InverseTextColor }" />
                            </StackLayout>
                            
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>
