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

  <elements>
    <div
      id="root"
      new_pass="1"
      width="100%"
      height="100%"
      flex_direction="column"
    >
      <!-- Top black bar -->
      <rectangle
        position="relative"
        color="#000000"
        round="4"
        width="100%" height="48"
      >

        <!-- Shine effect at the top -->
        <rectangle position="absolute" width="100%" height="2" round="4" color="#ffffff55" />

        <!-- Top bar contents -->
        <div gap="16" align_items="center">
          <!-- Back button -->
          <Button id="but_back" width="48" height="48" color="#ffffff00" border_color="#ffffff00">
            <sprite src="dashboard/back.svg" width="24" height="24" />
          </Button>

          <!-- Title -->
          <label id="popup_title" weight="bold" size="18" />
        </div>
      </rectangle>

      <!-- Content -->
      <rectangle width="100%" height="100%"
        color="#010310ee"
        color2="#062a5eee"
        gradient="vertical"
        padding="16"
        id="content">
      </rectangle>
    </div>
  </elements>
</layout>