<layout>
  <include src="theme.xml" />

  <theme>
    <var key="border" value="2" />
    <var key="kbd_color" value="#a6da95" />
    <var key="set_color" value="#cad3f5" />

    <var key="clock0_color" value="#cad3f5" />
    <var key="clock0_size" value="46" />
    <var key="clock0_date_size" value="14" />
    <var key="clock0_dow_size" value="14" />
    <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="button_style"
    margin="2" overflow="hidden" box_sizing="border_box"
    border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
    align_items="center" justify_content="center" />

  <template name="Device">
    <div id="dev_${idx}" margin="2" display="none">
      <sprite id="dev_${idx}_sprite" width="32" height="32" src="${src}" />
      <!-- div margin_top="10" margin_left="-31" -->
      <div position="absolute" margin_top="6" margin_left="4">
        <label _source="battery" _device="${idx}" size="18" shadow="#000000" weight="bold" />
      </div>
    </div>
  </template>

  <template name="Overlay">
    <Button macro="button_style" padding="4" id="overlay_${idx}" text="WLX-${idx}" tooltip="WATCH.TOGGLE_FOR_CURRENT_SET" _press="::EditModeOverlayToggle ${idx}" />
  </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="~set_color" src="watch/set2.svg" />
      <div position="absolute" margin_top="9">
        <label text="${display}" size="24" color="#00050F" weight="bold" />
      </div>
    </Button>
  </template>

  <!-- Elements with id="norm_*" show in normal mode. -->
  <!-- Elements with id="edit_*" show in edit mode. -->
  <elements>
    <div width="460" height="260" padding="30" interactable="0" flex_direction="column">
      <div padding="2" flex_direction="row" id="devices" interactable="0" >
        <!-- Src here may be changed, but maintain order: HMD, Left, Right, Tracker -->
        <Device src="watch/hmd.svg" idx="0" />
        <Device src="watch/controller_l.svg" idx="1" />
        <Device src="watch/controller_r.svg" idx="2" />
        <Device src="watch/track.svg" idx="3" />
        <!-- Will populate additional <Device> tags at runtime -->
      </div>
      <rectangle height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="#000000c0" border_color="~color_accent" border="2" round="8" justify_content="space_between">
        <div flex_direction="row" id="norm_pane">
          <div flex_direction="column" padding="4">
            <label text="23:59" _source="clock" _display="time" color="~clock0_color" size="~clock0_size" weight="bold" />
            <div padding="2" gap="2" flex_direction="column">
              <label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
              <label text="Tuesday" _source="clock" _display="dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
            </div>
          </div>
          <div width="10" height="100%" />
          <div flex_direction="column" padding="4">
            <!-- Timezone names here are only placeholders. Set your timezones via ~/.config/wlxoverlay/conf.d -->
            <div padding="2" />
            <label text="Paris" _source="clock" _display="name" _timezone="0" color="~clock_alt1_color" size="~clock_alt_tz_size" weight="bold" />
            <label text="23:59" _source="clock" _display="time" _timezone="0" color="~clock_alt1_color" size="~clock_alt_size" weight="bold" />
            <div padding="2" />
            <label text="New York" _source="clock" _display="name" _timezone="1" color="~clock_alt2_color" size="~clock_alt_tz_size" weight="bold" />
            <label text="23:59" _source="clock" _display="time" _timezone="1" color="~clock_alt2_color" size="~clock_alt_size" weight="bold" />
          </div>
          <div flex_direction="column" padding="4">

          </div>
        </div>
        <div flex_direction="column" id="edit_pane" display="none" >
          <div flex_direction="column" padding="4" align_items="center" justify_content="center">
            <label text="Overlays can now be moved and tuned individually." />
            <label text="Control which overlays are visible on this set:" />
          </div>
          <div flex_direction="row" flex_wrap="wrap" padding="4" align_items="center" justify_content="center" id="toolbox">
            <Button macro="button_style" padding="4" translation="Keyboard" tooltip="WATCH.TOGGLE_FOR_CURRENT_SET" _press="::OverlayToggle kbd" />
            <!-- Will populate additional <Overlay> tags at runtime -->
          </div>
        </div>
        <div flex_direction="row">
          <div id="norm_dash">
            <Button macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top" id="norm_dash">
              <sprite color="~set_color" width="40" height="40" src="watch/home.svg" />
            </Button>
          </div>
          <div id="edit_delete" display="none">
            <Button macro="button_style" _press="::EditModeDeleteDown" _release="::EditModeDeleteUp" tooltip="LONG_PRESS_TO_DELETE_SET" tooltip_side="top" border_color="~color_danger_translucent" color="~color_danger_5" color2="~color_danger_1" >
              <sprite color="~set_color" width="40" height="40" src="edit/delete.svg" />
            </Button>
          </div>
          <div id="sets">
            <Set idx="0" display="1" />
            <!-- Will populate additional <Set> tags at runtime -->
          </div>
          <div id="edit_add" display="none">
            <Button macro="button_style" _press="::EditModeAddSet" tooltip="WATCH.ADD_NEW_SET" tooltip_side="top">
              <sprite color="~set_color" width="40" height="40" src="edit/add.svg" />
            </Button>
          </div>
          <Button macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="top">
            <sprite color="~set_color" width="40" height="40" src="watch/edit.svg" />
          </Button>
        </div>
      </rectangle>
    </div>
  </elements>
</layout>
