<Page>
    <ActionBar id="actionbar">
        <Label id="title" text="---" />
        <ActionItem ios.systemIcon="17" android.systemIcon="ic_menu_play_clip" tap="generate" ios.position="right" />
    </ActionBar>
    <TabView id="tabview" selectedIndexChanged="selectionChanged">
        <TabView.items>
            <TabViewItem title="flex-grid">
                <TabViewItem.view>
                    <ScrollView>
                        <!-- Fix this: style="flex: 1 0; height: 0;"-->
                        <Repeater id="repeaterFlexGrid" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <FlexboxLayout flexDirection="row" flexWrap="wrap" alignItems="center" borderWidth="0 0 1 0" borderColor="#EEEEEE">
                                    <Image src="{{ icon }}" flexGrow="0" flexShrink="1" margin="6 4 4 4" borderWidth="1" borderColor="gray" borderRadius="16" width="32" height="32" />
                                    <Label text="{{ title }}" flexGrow="1" flexShrink="0" width="0" margin="1 4 0 0" />
                                    <Label text="{{ body }}" textWrap="true" width="100%" margin="4 4 6 4" fontSize="11" />
                                    <Image src="~/perf-app/icons/thumbsdown.png" width="18" height="18" margin="4" />
                                    <Label text="{{ up }}" flexGrow="1" flexShrink="0" width="0" fontSize="13" />
                                    <Image src="~/perf-app/icons/thumbsup.png" width="18" height="18" margin="4" />
                                    <Label text="{{ down }}" flexGrow="1" flexShrink="0" width="0" fontSize="13" />
                                </FlexboxLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="grid">
                <TabViewItem.view>
                    <ScrollView>
                        <Repeater id="repeaterGrid" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <GridLayout columns="*, *" rows="auto, auto, auto" borderWidth="0 0 1 0" borderColor="#EEEEEE">
                                    <Image src="{{ icon }}" colSpan="2" horizontalAlignment="left" width="32" height="32" margin="6 4 4 4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
                                    <Label text="{{ title }}" colSpan="2" margin="4 4 0 41" verticalAlignment="center" />
                                    <Label text="{{ body }}" colSpan="2" row="1" textWrap="true" margin="4 4 6 4" fontSize="11" />
                                    <Image src="~/perf-app/icons/thumbsdown.png" row="2" width="18" height="18" margin="4" horizontalAlignment="left" />
                                    <Label text="{{ up }}" row="2" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
                                    <Image src="~/perf-app/icons/thumbsup.png" row="2" col="1" width="18" height="18" margin="4" horizontalAlignment="left" />
                                    <Label text="{{ down }}" row="2" col="1" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
                                </GridLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="flex-stack">
                <TabViewItem.view>
                    <ScrollView>
                        <Repeater id="repeaterFlexStack" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <FlexboxLayout flexDirection="column">
                                    <Image src="{{ icon }}" alignSelf="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
                                    <Label text="{{ title }}" margin="4" />
                                    <Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
                                    <Image src="~/perf-app/icons/thumbsdown.png" width="18" height="18" margin="4" />
                                    <Label text="{{ up }}" fontSize="13" alignSelf="center" />
                                    <Image src="~/perf-app/icons/thumbsup.png" width="18" height="18" margin="4" />
                                    <Label text="{{ down }}" fontSize="13" alignSelf="center" />
                                </FlexboxLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="stack">
                <TabViewItem.view>
                    <ScrollView>
                        <Repeater id="repeaterStack" items="{{ $value }}">
                            <Repeater.itemTemplate>
                                <StackLayout>
                                    <Image src="{{ icon }}" horizontalAlignment="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
                                    <Label text="{{ title }}" margin="4" />
                                    <Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
                                    <Image src="~/perf-app/icons/thumbsdown.png" width="18" height="18" margin="4" />
                                    <Label text="{{ up }}" fontSize="13" horizontalAlignment="center" />
                                    <Image src="~/perf-app/icons/thumbsup.png" width="18" height="18" margin="4" />
                                    <Label text="{{ down }}" fontSize="13" horizontalAlignment="center" />
                                </StackLayout>
                            </Repeater.itemTemplate>
                        </Repeater>
                    </ScrollView>
                </TabViewItem.view>
            </TabViewItem>
        </TabView.items>
    </TabView>
</Page>
