<layout>
  <theme>
    <var key="clock0_size" value="46" />
    <var key="clock0_date_size" value="16" />
    <var key="clock0_dow_size" value="16" />
    <var key="clock_alt1_color" value="#8bd5ca" />
    <var key="clock_alt2_color" value="#b7bdf8" />
    <var key="clock_alt_size" value="24" />
    <var key="clock_alt_tz_size" value="14" />
  </theme>

  <macro name="decorative_rect"
    padding="8" color="~color_bg"
    border="2" border_color="~color_accent" round="8" />

  <macro name="button_style"
    padding="8"
    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
    align_items="center" justify_content="center" />

  <template name="Device">
    <rectangle macro="decorative_rect" padding_top="4" padding_bottom="4" align_items="center" gap="8">
      <sprite width="32" height="32" src_builtin="${src}" />
      <label _source="battery" _device="${idx}" size="24" weight="bold" />
    </rectangle>
  </template>

  <template name="Hmd">
    <Device idx="${idx}" src="watch/hmd.svg" />
  </template>
  <template name="LeftHand">
    <Device idx="${idx}" src="watch/controller_l.svg" />
  </template>
  <template name="RightHand">
    <Device idx="${idx}" src="watch/controller_r.svg" />
  </template>
  <template name="Tracker">
    <Device idx="${idx}" src="watch/track.svg" />
  </template>

  <template name="Screen">
    <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
      <sprite width="38" height="38" color="~color_text" src_builtin="edit/screen.svg" />
      <div position="absolute" margin_top="-7" margin_left="-1">
        <label text="${display}" size="18" color="~color_faded_20" weight="bold" />
      </div>
    </Button>
  </template>
  <template name="Panel">
    <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
      <sprite width="38" height="38" color="~color_text" src_builtin="edit/panel.svg" />
    </Button>
  </template>
  <template name="Mirror">
    <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
      <sprite width="38" height="38" color="~color_text" src_builtin="edit/mirror.svg" />
      <div position="absolute" margin_top="5" margin_left="13">
        <label text="${display}" size="20" color="~color_faded_20" weight="bold" />
      </div>
    </Button>
  </template>
  <template name="App">
    <Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">  
      <sprite width="38" height="38" color="~color_text" src_ext="${icon}" />
    </Button>
  </template>
    
  <template name="Set">
    <Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
      <sprite width="40" height="40" color="~color_text" src_builtin="watch/set2.svg" />
      <div position="absolute" margin_top="9">
        <label text="${display}" size="24" color="#00050F" weight="bold" />
      </div>
    </Button>
  </template>

  <template name="Clock">
    <div gap="12" flex_direction="column" padding="4">
      <div flex_direction="column" >
        <label text="11:22 PM" _source="clock" _display="time" color="~color_text" size="~clock0_size" weight="bold" align="center" />
        <div padding_left="2" gap="16" flex_direction="row" justify_content="center">
          <label text="Tue" _source="clock" _display="dow_short" color="~color_text" size="~clock0_dow_size" weight="bold" />
          <label text="22/2/2022" _source="clock" _display="date" color="~color_text" size="~clock0_date_size" weight="bold" />
        </div>
      </div>
      <div flex_direction="row" gap="8" justify_content="space_around">
        <!-- Timezone names here are only placeholders. Set your timezones via ~/.config/wayvr/conf.d -->
        <div flex_direction="column">
          <label text="Paris" _source="clock" _display="name" _timezone="0" color="~clock_alt1_color" size="~clock_alt_tz_size" weight="bold" align="center" />
          <label text="23:59" _source="clock" _display="time" _timezone="0" color="~clock_alt1_color" size="~clock_alt_size" weight="bold" align="center" />
        </div>
        <div flex_direction="column">
          <label text="New York" _source="clock" _display="name" _timezone="1" color="~clock_alt2_color" size="~clock_alt_tz_size" weight="bold" align="center" />
          <label text="23:59" _source="clock" _display="time" _timezone="1" color="~clock_alt2_color" size="~clock_alt_size" weight="bold" align="center" />
        </div>
      </div>
    </div>
  </template>

  <template name="VerticalSeparator">
    <rectangle width="2" height="100%" color="~color_accent" />
  </template>

  <elements>
    <!-- padding="32" is required there (to make room for tooltips) -->
    <div
      padding="32" interactable="0"
      flex_direction="column" gap="8">
      <!-- Top elements (device battery levels) -->
      <div id="devices_root" interactable="0" gap="6" width="100%" max_width="400" flex_direction="row" flex_wrap="wrap">
        <!-- Will populate tags at runtime -->
        <!-- These are examples for uidev -->
        <Hmd idx="0" />
        <LeftHand idx="1" />
        <RightHand idx="2" />
        <Tracker idx="3" />
      </div>

      <!-- All other elements inside the container -->
      <div flex_direction="column" gap="8" min_width="300">
        <rectangle macro="decorative_rect" flex_direction="row" gap="8" justify_content="space_evenly">
          <!-- Clock, date and various timezones -->
          <div id="clock_root">
            <Clock />
          </div>

          <!-- Four buttons -->
          <div flex_direction="column" gap="8">
            <div gap="8">
              <Button id="btn_keyboard" macro="button_style" _press="::OverlayToggle kbd" tooltip="EDIT_MODE.KEYBOARD" tooltip_side="left">
                <sprite src_builtin="watch/keyboard.svg" width="40" height="40" />
              </Button>
              <Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="left">
                <sprite color="~color_text" width="40" height="40" src="watch/edit.svg" />
              </Button>
            </div>
            <div gap="8">
              <Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left">
                <sprite width="40" height="40" color="~color_text" src="watch/recenter.svg" />
              </Button>
              <Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left">
                <sprite width="40" height="40" color="~color_text" src="watch/fix-floor.svg" />
              </Button>
            </div>
          </div>
        </rectangle>

        <!-- Bottom buttons -->
        <div flex_direction="row" gap="8">
          <div gap="4">
            <Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top">
              <sprite color="~color_text" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
            </Button>
          </div>
          <VerticalSeparator />
          <div id="sets_root" gap="4">
            <!-- Will populate tags at runtime -->
            <!-- These are examples for uidev -->
            <Set idx="0" display="1" />
            <Set idx="1" display="2" />
          </div>
          <div id="panels_root" gap="4" display="none">
            <!-- Will populate tags at runtime -->
            <!-- These are examples for uidev -->
            <Screen idx="0" display="H1" name="HDMI-A-1" />
            <Screen idx="1" display="D2" name="DP-2"/>
          </div>
        </div>
      </div>
    </div>
  </elements>
</layout>
