<layout>
  <include src="t_tab_title.xml" />
  <include src="../t_group_box.xml" />
  <include src="../t_dropdown_button.xml" />

  <template name="SettingsGroupBox">
    <rectangle macro="group_box" id="${id}" flex_grow="1">
      <GroupBoxTitle translation="${translation}" src_builtin="${icon}" />
    </rectangle>
  </template>

  <template name="CheckBoxSetting">
    <CheckBox id="${id}" text="${text}" translation="${translation}" checked="${checked}" tooltip="${tooltip}" />
  </template>

  <template name="SliderSetting">
    <label text="${text}" translation="${translation}" />
    <Slider id="${id}" width="250" height="24" min_value="${min}" max_value="${max}" step="${step}" value="${value}" tooltip="${tooltip}" />
  </template>

  <template name="SelectSetting">
    <label text="${text}" translation="${translation}" tooltip="${tooltip}" />
    <RadioGroup id="${id}" />
  </template>

  <template name="SelectOption">
    <RadioBox text="${text}" translation="${translation}" value="${value}" tooltip="${tooltip}" />
  </template>

  <template name="DangerButton">
    <Button id="${id}" color="#AA3333" height="32" tooltip="${translation}_HELP" padding="4" gap="8">
      <sprite src_builtin="${icon}" height="24" width="24" />
      <label align="left" translation="${translation}" weight="bold" min_width="200" />
    </Button>
  </template>

  <template name="AutostartApp">
    <div id="${id}_root" flex_direction="row">
      <Button id="${id}" color="#AA3333" height="24" padding="4" margin_top="-2" margin_bottom="-2">
        <sprite src_builtin="dashboard/close.svg" height="20" width="20" />
      </Button>
      <div padding_left="8">
        <label align="left" text="${text}" weight="bold" overflow="hidden" />
      </div>
    </div>
  </template>

  <elements>
    <TabTitle translation="SETTINGS" icon="dashboard/settings.svg" />
    <div gap="4">
      <Tabs id="tabs">
        <Tab name="look_and_feel" translation="APP_SETTINGS.LOOK_AND_FEEL" sprite_src_builtin="dashboard/palette.svg" />
        <Tab name="features" translation="APP_SETTINGS.FEATURES" sprite_src_builtin="dashboard/options.svg" />
        <Tab name="controls" translation="APP_SETTINGS.CONTROLS" sprite_src_builtin="dashboard/controller.svg" />
        <Tab name="misc" translation="APP_SETTINGS.MISC" sprite_src_builtin="dashboard/blocks.svg" />
        <Tab name="autostart_apps" translation="APP_SETTINGS.AUTOSTART_APPS" sprite_src_builtin="dashboard/apps.svg" />
        <Tab name="troubleshooting" translation="APP_SETTINGS.TROUBLESHOOTING" sprite_src_builtin="dashboard/cpu.svg" />
      </Tabs>
      <div flex_wrap="wrap" justify_content="stretch" gap="4" id="settings_root" width="100%" />
    </div>
  </elements>
</layout>