<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:b="urn:import:org.gwtbootstrap3.client.ui"
             xmlns:d="urn:import:org.dashbuilder.displayer.client">

  <ui:with field="i18n" type="org.dashbuilder.client.resources.i18n.AppConstants"/>

  <ui:style>
    .panel {
      padding: 5px;
    }
    .listBox {
      width: 150px;
    }
  </ui:style>

  <g:FlowPanel>
    <g:FlowPanel ui:field="messagePanel">
      <b:Jumbotron>
        <b:Heading text="{i18n.metrics_cluster_messages_heading}" size="H2" />
      </b:Jumbotron>
    </g:FlowPanel>
    <g:HorizontalPanel ui:field="mainPanel" visible="false">
      <g:FlowPanel ui:field="leftPanel" styleName="{style.panel}" />
      <g:FlowPanel styleName="{style.panel}">
        <g:HorizontalPanel>
          <g:FlowPanel styleName="{style.panel}" ui:field="centerPanel" >
            <g:Label text="{i18n.metrics_cluster_metricselector_label}"/>
            <g:ListBox ui:field="metricSelector" styleName="{style.listBox}"/>
          </g:FlowPanel>
          <g:FlowPanel styleName="{style.panel}">
            <g:Label text="{i18n.metrics_cluster_chartselector_label}"/>
            <g:ListBox ui:field="chartTypeSelector" styleName="{style.listBox}"/>
          </g:FlowPanel>
        </g:HorizontalPanel>
        <g:FlowPanel ui:field="metricChartPanel" styleName="{style.panel}"/>
        <d:Displayer ui:field="metricsTable"/>
      </g:FlowPanel>
      <g:FlowPanel ui:field="rightPanel" styleName="{style.panel}" />
    </g:HorizontalPanel>
  </g:FlowPanel>

</ui:UiBinder>