<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" id="mainPage">
  <StackLayout orientation="vertical">
    <StackLayout orientation="vertical" backgroundColor="LightGray" paddingTop="5" paddingBottom="5">
      
      <Label text="{{ duration, 'Duration: ' + duration + ' ms' }}" width="180" />
      <Slider minValue="0" maxValue="10000" value="{{ duration }}" margin="0 15" />

      <Label text="{{ iterations, 'Iterations: ' + iterations + ' times' }}" width="180" />
      <Slider minValue="0" maxValue="10" value="{{ iterations }}" margin="0 15" />

      <StackLayout orientation="horizontal" horizontalAlignment="center">
        <Label text="Play Sequentially?"/>
        <Switch marginLeft="10" checked="{{ playSequentially }}"/>
      </StackLayout>
      
      <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">
        <Button text="Out" tap="onSlideOut" width="40" marginLeft="5" marginRight="5" />
        <Button text="In" tap="onSlideIn" width="40" marginLeft="5" marginRight="5" />
        <Button text="Single" tap="onSingle" width="70" marginLeft="5" marginRight="5" />
        <Button text="Cancel" tap="onCancel" width="70" marginLeft="5" marginRight="5" />
      </StackLayout>
      
      <StackLayout orientation="horizontal" marginTop="5" marginBottom="5" horizontalAlignment="center" paddingLeft="5" paddingRight="5">>
        <Button text="Sequence" width="80" marginLeft="5" marginRight="5" tap="onSequence" />
        <Button text="Interrupted" width="80" marginLeft="5" marginRight="5" tap="onInterrupted" />
      </StackLayout>
      
    </StackLayout>
    <AbsoluteLayout id="panel1" backgroundColor="Yellow" width="300" height="190" clipToBounds="true" marginTop="10">
      <Button id="button1" text="Button 1" backgroundColor="White" width="180" height="50" left="60" top="10" tap="onTap" borderWidth="1" borderColor="red" />
      <Button id="button2" text="Button 2" backgroundColor="White" width="180" height="50" left="60" top="70" tap="onTap" borderWidth="1" borderColor="red" />
      <Button id="button3" text="Button 3" backgroundColor="White" width="180" height="50" left="60" top="130" tap="onTap" borderWidth="1" borderColor="red" />
    </AbsoluteLayout>
  </StackLayout>
</Page> 