<!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:editor="urn:import:org.dashbuilder.common.client.editor"
             xmlns:ddwn="urn:import:org.dashbuilder.common.client.editor.list">

  <ui:with field="i18n" type="org.jbpm.dashboard.renderer.client.panel.i18n.DashboardConstants"/>

  <ui:style>
    .sourceSelectorButton {
      float: left;
      margin-right: 10px;
    }
    .queryBox {
      height: 200px;
    }
    .row {
      margin-bottom: 5px;
    }
    .attr {
      float: left;
      margin-right: 5px;
    }
  </ui:style>

  <b:Container fluid="true">

    <!-- source -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.sql_datasource}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.remote_datasource_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <editor:ValueBoxEditor.View ui:field="dataSource">
          <editor:valuebox>
            <b:TextBox />
          </editor:valuebox>
        </editor:ValueBoxEditor.View>
      </b:Column>
    </b:Row>
    
    <!-- server template id -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.server_template}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.remote_server_template_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <ddwn:DropDownEditor.View ui:field="serverTemplateId" />
      </b:Column>
    </b:Row>
    
    <!-- target -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.query_target}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.remote_query_target_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <ddwn:DropDownEditor.View ui:field="queryTarget" />
      </b:Column>
    </b:Row>

    <!-- Source selector (table or query). -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.sql_source}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.remote_source_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">

        <g:FlowPanel ui:field="dbSQLPanel">
          <editor:ValueBoxEditor.View ui:field="dbSQL">
            <editor:valuebox>
              <b:TextArea placeholder="{i18n.remote_query_placeHolder}" addStyleNames="{style.queryBox}"/>
            </editor:valuebox>
          </editor:ValueBoxEditor.View>
        </g:FlowPanel>

      </b:Column>
    </b:Row>
    
  </b:Container>
  
</ui:UiBinder>