<Template>
  <SetVariable name="BtnType"><Variable name="TopRegion_BtnType"/></SetVariable>
  <SetVariable name="BtnSize">square</SetVariable>

  <WidgetGroup>
    <Layout>horizontal</Layout>
    <SizePolicy>min,min</SizePolicy>
    <Children>
      <WidgetGroup>
        <ObjectName>DeckRateSeparatorCompact</ObjectName>
        <Layout>horizontal</Layout>
        <SizePolicy>min,me</SizePolicy>
        <Children/>
        <!-- this is sized and styled in css -->
       </WidgetGroup>

      <WidgetGroup>
        <ObjectName>BpmRateTapContainer</ObjectName>
        <Layout>vertical</Layout>
        <SizePolicy>min,min</SizePolicy>
        <Children>

          <WidgetGroup><!-- BPM + rate + Tap overlay-->
            <ObjectName>BpmTapContainer</ObjectName>
            <Layout>stacked</Layout>
            <Size>60f,40f</Size>
            <Children>
              <!-- In order to make the bpm display tappable, we use an old-style
              widget group and put the bpm pushbutton on top of the display. -->
              <PushButton>
                <TooltipId>bpm_tap_visual_bpm</TooltipId>
                <ObjectName>BpmTap</ObjectName>
                <SizePolicy>me,me</SizePolicy>
                <NumberStates>1</NumberStates>
                <Connection>
                  <ConfigKey><Variable name="Group"/>,bpm_tap</ConfigKey>
                  <EmitOnPressAndRelease>true</EmitOnPressAndRelease>
                </Connection>
              </PushButton>
              <WidgetGroup><!-- BPM + rate -->
                <ObjectName>AlignCenter</ObjectName>
                <Layout>vertical</Layout>
                <SizePolicy>me,me</SizePolicy>
                <Children>
                  <Number>
                    <ObjectName>BpmText</ObjectName>
                    <TooltipId>visual_bpm</TooltipId>
                    <Size>-1me,22f</Size>
                    <NumberOfDigits>2</NumberOfDigits>
                    <Connection>
                      <ConfigKey><Variable name="Group"/>,visual_bpm</ConfigKey>
                    </Connection>
                  </Number>
                  <NumberRate>
                    <TooltipId>rate_display</TooltipId>
                    <ObjectName>RateText</ObjectName>
                    <Channel><Variable name="ChanNum" /></Channel>
                    <NumberOfDigits>2</NumberOfDigits>
                  </NumberRate>
                </Children>
              </WidgetGroup><!-- BpmContainer + Tap overlay -->
            </Children>
          </WidgetGroup><!-- BpmContainer -->

          <WidgetGroup><Size>0min,0me</Size></WidgetGroup>

          <WidgetGroup>
            <ObjectName>RateControls</ObjectName>
            <SizePolicy>min,min</SizePolicy>
            <Layout>horizontal</Layout>
            <Children>
              <!-- Rate controls with Sync button -->
              <WidgetGroup>
                <ObjectName>AlignCenter</ObjectName>
                <SizePolicy>min,min</SizePolicy>
                <Layout>vertical</Layout>
                <Children>
                  <WidgetGroup>
                    <ObjectName>SyncBoxCompact</ObjectName>
                    <Layout>horizontal</Layout>
                    <SizePolicy>min,min</SizePolicy>
                    <Children>
                      <PushButton>
                        <TooltipId>sync_enabled</TooltipId>
                        <ObjectName>SyncDeck</ObjectName>
                        <Size>40f,22f</Size>
                        <NumberStates>2</NumberStates>
                        <RightClickIsPushButton>true</RightClickIsPushButton>
                        <Connection>
                          <ConfigKey><Variable name="Group"/>,sync_enabled</ConfigKey>
                          <ButtonState>LeftButton</ButtonState>
                        </Connection>
                        <Connection>
                          <ConfigKey><Variable name="Group"/>,sync_leader</ConfigKey>
                          <ButtonState>RightButton</ButtonState>
                        </Connection>
                      </PushButton>
                      <PushButton>
                        <TooltipId>sync_leader</TooltipId>
                        <ObjectName>SyncLeader</ObjectName>
                        <Size>22f,22f</Size>
                        <NumberStates>3</NumberStates>
                        <Connection>
                          <ConfigKey><Variable name="Group"/>,sync_leader</ConfigKey>
                          <ButtonState>LeftButton</ButtonState>
                        </Connection>
                      </PushButton>
                    </Children>
                  </WidgetGroup>

                  <WidgetGroup><!-- Rate slider + range displays -->
                    <ObjectName>RateSliderBoxCompactSync</ObjectName>
                    <Layout>stacked</Layout>
                    <SizePolicy>max,me</SizePolicy>
                    <Children>

                      <WidgetGroup><!-- Rate slider + center indicator -->
                        <Size>54f,81f</Size>
                        <Children>
                          <Label>
                            <ObjectName>RateCenter</ObjectName>
                            <Size>5f,5f</Size>
                            <Pos>2,39</Pos>
                            <Connection>
                              <ConfigKey><Variable name="Group"/>,rate_set_default</ConfigKey>
                              <BindProperty>highlight</BindProperty>
                            </Connection>
                          </Label>
                          <SliderComposed>
                            <ObjectName>RateSlider</ObjectName>
                            <Size>40f,79f</Size>
                            <Pos>5,2</Pos>
                            <TooltipId>rate</TooltipId>
                            <Handle scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="SliderScheme"/>/sliders/knob_pitch_deck.svg</Handle>
                            <Slider scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="SliderScheme"/>/sliders/slider_pitch_deck_compact_sync.svg</Slider>
                            <Horizontal>false</Horizontal>
                            <BarWidth><Variable name="BarWidth"/></BarWidth>
                            <BarMargins><Variable name="BarMarginPitch"/></BarMargins>
                            <BarColor><Variable name="BarColorPitch"/></BarColor>
                            <BarRoundCaps>true</BarRoundCaps>
                            <BarAxisPos>20.0</BarAxisPos>
                            <BarUnipolar>false</BarUnipolar>
                            <Connection>
                              <ConfigKey><Variable name="Group"/>,rate</ConfigKey>
                            </Connection>
                          </SliderComposed>
                        </Children>
                      </WidgetGroup><!-- Rate slider + center indicator -->

                      <WidgetGroup><!-- Rate range indicators -->
                        <SizePolicy>min,me</SizePolicy>
                        <Layout>vertical</Layout>
                        <Children>
                          <SingletonContainer>
                            <ObjectName>RateRangeDisplayTop<Variable name="ChanNum"/></ObjectName>
                          </SingletonContainer>
                          <WidgetGroup><Size>0min,0me</Size></WidgetGroup>
                          <SingletonContainer>
                            <ObjectName>RateRangeDisplayBottom<Variable name="ChanNum"/></ObjectName>
                          </SingletonContainer>
                        </Children>
                      </WidgetGroup><!-- Rate range indicators -->
                    </Children>
                  </WidgetGroup><!-- Rate slider + range displays -->
                </Children>
                <Connection>
                  <ConfigKey persist="true">[LateNight],show_sync_button_compact</ConfigKey>
                  <BindProperty>visible</BindProperty>
                </Connection>
              </WidgetGroup><!-- Rate controls with Sync button -->

              <WidgetGroup><!-- Rate controls (no Sync button) -->
                <ObjectName>RateSliderBoxCompact</ObjectName>
                <SizePolicy>max,min</SizePolicy>
                <Layout>stacked</Layout>
                <Children>
                  <WidgetGroup><!-- Rate slider + center indicator -->
                    <ObjectName></ObjectName>
                    <Size>54f,97f</Size>
                    <Children>
                      <Label>
                        <ObjectName>RateCenter</ObjectName>
                        <Size>5f,5f</Size>
                        <Pos>2,47</Pos>
                        <Connection>
                          <ConfigKey><Variable name="Group"/>,rate_set_default</ConfigKey>
                          <BindProperty>highlight</BindProperty>
                        </Connection>
                      </Label>

                      <SliderComposed>
                        <ObjectName>RateSlider</ObjectName>
                        <Size>40f,95f</Size>
                        <Pos>5,2</Pos>
                        <TooltipId>rate</TooltipId>
                        <Handle scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="SliderScheme"/>/sliders/knob_pitch_deck.svg</Handle>
                        <Slider scalemode="STRETCH_ASPECT">skins:LateNight/<Variable name="SliderScheme"/>/sliders/slider_pitch_deck_compact.svg</Slider>
                        <Horizontal>false</Horizontal>
                        <BarWidth><Variable name="BarWidth"/></BarWidth>
                        <BarMargins><Variable name="BarMarginPitch"/></BarMargins>
                        <BarColor><Variable name="BarColorPitch"/></BarColor>
                        <BarRoundCaps>true</BarRoundCaps>
                        <BarAxisPos>20.0</BarAxisPos>
                        <BarUnipolar>false</BarUnipolar>
                        <Connection>
                          <ConfigKey><Variable name="Group"/>,rate</ConfigKey>
                        </Connection>
                      </SliderComposed>
                    </Children>
                  </WidgetGroup><!-- Rate slider + center indicator -->

                  <WidgetGroup><!-- Rate range indicators -->
                    <SizePolicy>min,me</SizePolicy>
                    <Layout>vertical</Layout>
                    <Children>
                      <SingletonContainer>
                        <ObjectName>RateRangeDisplayTop<Variable name="ChanNum"/></ObjectName>
                      </SingletonContainer>
                      <WidgetGroup><Size>0min,0me</Size></WidgetGroup>
                      <SingletonContainer>
                        <ObjectName>RateRangeDisplayBottom<Variable name="ChanNum"/></ObjectName>
                      </SingletonContainer>
                    </Children>
                  </WidgetGroup><!-- Rate range indicators -->
                </Children>
                <Connection>
                  <ConfigKey persist="true">[LateNight],show_sync_button_compact</ConfigKey>
                  <Transform><Not/></Transform>
                  <BindProperty>visible</BindProperty>
                </Connection>
              </WidgetGroup><!-- Rate controls (no Sync button) -->
            </Children>
          </WidgetGroup><!-- RateControls -->

          <WidgetGroup><Size>0min,0me</Size></WidgetGroup>

        </Children>
      </WidgetGroup>
    </Children>
    <Connection>
      <ConfigKey persist="true">[Skin],show_rate_controls_compact</ConfigKey>
      <BindProperty>visible</BindProperty>
    </Connection>
  </WidgetGroup>
</Template>
