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

  <layout id="tpl-layer">
    <border height="40" border-color="1" thickness="1" color=".4" dir="row" margin="1 0 1 0">
      
      <node dir="row" height="40" width="100">
        <node width="40" pad="1">
          <checkbox id="cb" icon="data/ui/check-layer-visibility.png"/>
        </node>
        <node width="1" grow="1" justify="center" pad="5">
          <text id="label" text="Layer"/>
        </node>
      </node>

    </border>
  </layout>

  <layout id="tpl-film">
    <border height="40" dir="row" color=".7" margin="1" pad="2" grow="1">
      <!--frames list-->
    </border>
  </layout>

  <layout id="tpl-panel-animation">
    <node margin="0 0 10 0" rtl="ltr" grow="1" dir="col">
      
      <scroll pad="0 5 0 5" color=".4" grow="1" shrink="1">
        <node grow="1" dir="row">
          <node color=".3" id="layers" width="100" dir="col-reverse" justify="flex-end" margin="20 5 0 0"></node>
          <scroll id="hscroll" scroll-dir="h" color=".6" grow="1" shrink="1" dir="col" margin="0 0 5 0">
            <border color=".4">
              <timeline id="timeline" height="20"/>
            </border>
            <node id="frames" dir="col-reverse" justify="flex-end" flood-events="1"></node>
          </scroll>
        </node>
      </scroll>
    
      <border height="40" color=".5" dir="row" align="center" flood-events="1">
        
        <button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
          <icon width="30" icon="add"/>
        </button-custom>
        <button-custom id="btn-duplicate" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
          <icon width="30" icon="page_copy"/>
        </button-custom>
        <button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
          <icon width="30" icon="bin_closed"/>
        </button-custom>
        <button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_up"/>
        </button-custom>
        <button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="bullet_arrow_down"/>
        </button-custom>
        <button-custom id="btn-left" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="resultset_previous"/>
        </button-custom>
        <button-custom id="btn-right" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
          <icon width="30" icon="resultset_next"/>
        </button-custom>

        <node grow="1" dir="row" justify="center">
          <border pad="5" align="center" margin="0 10 0 0" dir="row" color=".3">
            <text id="frame-index" text="15/20" margin="0 3 0 0"/>
          </border>
          <button-custom id="btn-prev" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
            <icon width="30" icon="control_start"/>
          </button-custom>
          <button-custom id="btn-play" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
            <icon width="30" icon="control_play"/>
          </button-custom>
          <button-custom id="btn-next" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
            <icon width="30" icon="control_end"/>
          </button-custom>
          <border pad="5" align="center" margin="0 0 0 10" dir="row" color=".3">
            <combobox id="fps" text="25" width="35" height="20" combo-list="5,10,15,20,25,30"/>
            <text text="fps" margin="0 2 0 5"/>
          </border>
          <border pad="5" align="center" margin="0 0 0 10" dir="row" color=".3">
            <combobox id="onion" text="1" width="35" height="20" default="1" combo-list="0,1,2,3,4,5"/>
            <text text="onion" margin="0 2 0 5"/>
          </border>
        </node>
        
        <button-custom id="btn-more" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
          <icon width="30" icon="resultset_next"/>
        </button-custom>
      
      </border>
    </node>
  </layout>

</root>
