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


  <!-- key: str, value: str -->
  <template name="BoolFlag">
    <div flex_direction="row" gap="4">
      <label text="${key}" />
      <label weight="bold" text="${value}" />
    </div>
  </template>

  <!-- name, checked, flag_* -->
  <template name="Cell">
    <rectangle macro="group_box">
      <CheckBox id="checkbox" text="${name}" checked="${checked}" />
      <div flex_direction="row" gap="8">
        <BoolFlag key="Active:" value="${flag_active}" />
        <BoolFlag key="Focused:" value="${flag_focused}" />
        <BoolFlag key="IO active:" value="${flag_io_active}" />
        <BoolFlag key="Overlay:" value="${flag_overlay}" />
        <BoolFlag key="Primary:" value="${flag_primary}" />
        <BoolFlag key="Visible:" value="${flag_visible}" />
      </div>
    </rectangle>
  </template>

  <elements>
    <TabTitle translation="MONADO_RUNTIME" icon="dashboard/monado.svg" />
    <label translation="DISPLAY_BRIGHTNESS" />
    <Slider id="slider_brightness" width="300" height="24" min_value="0" max_value="140" />

    <label translation="LIST_OF_PROCESSES" />
    <div id="list_parent" flex_direction="column" gap="8">
      <!-- filled at runtime -->
    </div>

  </elements>
</layout>