<Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Image backup"></Label>
    </ActionBar>
    <TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
      <TabViewItem title="Add images">
        <StackLayout>
          <Button @tap="takePicture" text="Take picture"></Button>...
          <StackLayout v-if="newImages.length" orientation="horizontal">...</StackLayout>
          <RadListView layout="grid" ref="newImages" for="image in newImages">
            <v-template>
              ...
            </v-template>
          </RadListView>
        </StackLayout>
      </TabViewItem>
      <TabViewItem title="Backedup images">
        <StackLayout>
          <Button @tap="fetchAllBackedupImages" text="Get all backedup images"></Button>
          <StackLayout v-if="backedupImages.length" orientation="horizontal">
            ...
          </StackLayout>
          <RadListView layout="grid" ref="backedupImages" for="image in sortedBackedupImages">
            <v-template>...</v-template>
          </RadListView>
        </StackLayout>
      </TabViewItem>
    </TabView>
  </Page>

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}