<!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.dashbuilder.client.widgets.resources.i18n.DataSetEditorConstants"/>

  <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">

    <!-- dataSource. -->
    <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.sql_datasource_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <ddwn:DropDownEditor.View ui:field="dataSource" />
      </b:Column>
    </b:Row>

    <!-- dbSchema. -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.sql_schema}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.sql_schema_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <editor:ValueBoxEditor.View ui:field="dbSchema">
          <editor:valuebox>
            <b:TextBox placeholder="{i18n.sql_schema_placeHolder}"/>
          </editor:valuebox>
        </editor:ValueBoxEditor.View>
      </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.sql_source_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <g:FlowPanel>
          <b:RadioButton ui:field='tableButton' name="sourceType" text="{i18n.sql_table}" addStyleNames="{style.sourceSelectorButton} "/>
          <b:RadioButton ui:field='queryButton' name="sourceType" text="{i18n.sql_query}" addStyleNames="{style.sourceSelectorButton} "/>
        </g:FlowPanel>
      </b:Column>
    </b:Row>


    <!-- Table / Query. -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_9" offset="MD_3">

        <g:FlowPanel ui:field="dbTablePanel">
          <editor:ValueBoxEditor.View ui:field="dbTable">
            <editor:valuebox>
              <b:TextBox placeholder="{i18n.sql_table_placeHolder}"/>
            </editor:valuebox>
          </editor:ValueBoxEditor.View>
        </g:FlowPanel>

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

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