<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <TabView>
    <TabView.items>
      <TabViewItem title="List">
        <TabViewItem.view>
          <ListView items="{{ redditItems }}" isScrolling="{{ isScrolling }}" itemTap="listViewItemTap" loadMoreItems="listViewLoadMoreItems">
            <ListView.itemTemplate>
              <!-- Binding in template property of an component will use the bindingContext provided by the component. -->
              <GridLayout columns="auto, *, auto" rows="auto, 25">
                <Image src="{{ thumbnailImage }}" class="thumbnail" rowSpan="2"/>
                <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
                <Label text="{{ author ? 'by ' + author : '' }}" class="author" col="1" row="1" />
                <Label text="{{ num_comments ? num_comments + ' comments' : '' }}" class="comments" col="2" row="1" />
              </GridLayout>
              <!-- End of tempplate. -->
            </ListView.itemTemplate>
          </ListView>
        </TabViewItem.view>
      </TabViewItem>
      <TabViewItem title="About">
        <TabViewItem.view>
          <StackLayout>
            <Image margin="10" src="~/cuteness.io/res/telerik-logo.png" />
            <Label margin="10" textWrap="true" text="{{ aboutText }}" />
          </StackLayout>
        </TabViewItem.view>
      </TabViewItem>
    </TabView.items>
  </TabView>
</Page>
