<layout>
  <theme>
    <var key="border" value="2" />
  </theme>

  <macro name="button_style"
    margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
    border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical" />

  <template name="Set">
    <Button macro="button_style" _press="::SetToggle ${handle}">
      <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>
    <div width="400" height="200">
      <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg">
        <label text="Select set to edit" size="48" color="#ffffff" weight="bold" />
        <div width="100%" flex_direction="row">
          <div id="sets">
            <!-- Will populate <Set> tags at runtime -->
          </div>
          <Button macro="button_style" _press="::EditToggle">
            <sprite color="~set_color" width="40" height="40" src="watch/edit.svg" />
          </Button>
        </div>
        <label text="" size="48" color="#ffffff" weight="bold" />
      </rectangle>
    </div>
  </elements>
</layout>