<?xml version="1.0"?>
<root
  xmlns="http://panopainter.com/layout.xsd"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
>

  <layout id="color-picker">
    <border>
      <!--<border width="300" height="30" color=".2 .2 .2 .9" dir="row" align="center">
          <node grow="1" width="10" align="center">
            <text id="title" text="Color Picker"/>
          </node>
          -->
      <!--<combobox justify="flex-end" pad="5" margin="0 5 0 0" text="Triangle" combo-list="Triangle,Square" default="0"/>-->
      <!--
        </border>-->
      <border width="100%" color=".4" pad="10" dir="col">
        <colorwheel id="wheel" width="100%" aspect-ratio="1"/>
        <border color=".3" pad="5" dir="row" margin="10 0 0 0">
          <border id="color-cur" height="30" grow="1" color="1"/>
          <border id="color-old" height="30" grow="1" color="0" margin="0 10 0 0"/>
          <border id="color-old1" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
          <border id="color-old2" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
          <border id="color-old3" height="30" grow="0.5" color="0" margin="0 2 0 0"/>
          <border id="color-old4" height="30" grow="0.5" color="0"/>
        </border>
        <!--HSV-->
        <border pad="5" color=".3" margin="10 0 0 0">
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20">
              <text text="H"/>
            </node>
            <slider-h id="hsv-h" width="10" grow="1" value="1"/>
          </node>
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20">
              <text text="S"/>
            </node>
            <slider-h id="hsv-s" width="10" grow="1" value="1"/>
          </node>
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20">
              <text text="V"/>
            </node>
            <slider-h id="hsv-v" width="10" grow="1" value="1"/>
          </node>
        </border>
        <!--RGB-->
        <border pad="5" color=".3" margin="10 0 0 0">
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20">
              <text text="R"/>
            </node>
            <slider-h id="rgb-r" width="10" grow="1" value="1"/>
          </node>
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20">
              <text text="G"/>
            </node>
            <slider-h id="rgb-g" width="10" grow="1" value="1"/>
          </node>
          <node width="100%" pad="2" height="20" dir="row" align="center">
            <node width="20">
              <text text="B"/>
            </node>
            <slider-h id="rgb-b" width="10" grow="1" value="1"/>
          </node>
        </border>
        <!--HEX-->
        <border pad="5" color=".3" margin="10 0 0 0">
          <node width="100%" pad="2" height="30" dir="row" align="center">
            <node margin="0 10 0 0">
              <text text="Hex"/>
            </node>
            <text id="txt-hex" text="#FFFFFF" align="center" pad="5" grow="1" height="30" color="1"/>
            <button id="btn-hex-copy" text="Copy" width="60" height="100%"/>
            <button id="btn-hex-paste" text="Paste" width="60" height="100%"/>
          </node>
        </border>
      </border>
      <!--<node height="33" dir="row" align="flex-end" justify="flex-end">
          <button id="btn-ok" text="Reset" width="60" height="30" margin="0 10 0 0"/>
          <button id="btn-select" text="Select color" width="100" height="30"/>
        </node>-->
    </border>
  </layout>

  <!-- PANEL COLOR PICKER -->
  <layout id="tpl-panel-color">
    <node min-width="100" height="100" margin="0 0 10 0" rtl="ltr">
      <border id="title" height="30" color=".4" align="center" justify="center">
        <text text="Colors" color="1 1 1 1"/>
      </border>
      <border color=".4" pad="5" dir="row" height="10" grow="1">
        <color-quad id="quad" color="1 0 0 1" height="100%" grow="1"/>
        <node width="30" dir="col" pad="0 0 0 5">
          <slider-hue id="hue"/>
        </node>
      </border>
    </node>
  </layout>

</root>
