<!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:common="urn:import:org.dashbuilder.common.client.widgets">

  <ui:with field="i18n" type="org.dashbuilder.client.widgets.resources.i18n.DataSetEditorConstants"/>
  
  <ui:style>
    .inline {
      margin-right: 5px;
    }
    .row {
      margin-bottom: 5px;
    }
    .attr {
      float: left;
      margin-right: 5px;
    }
  </ui:style>
  
  <b:Container fluid="true">

    <!-- File path. -->
    <b:Row ui:field="filePathRow" addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.csv_filePath}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.csv_filePath_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <g:HorizontalPanel width="100%">
          <g:cell width="1%" verticalAlignment="MIDDLE">
            <b:Popover container="body" showDelayMs="1000" content="{i18n.csv_URL_description}" title="{i18n.csv_useFileURL}" placement="BOTTOM">
              <b:Button icon="CLOUD_UPLOAD" type="DEFAULT" ui:field="useFileURLButton" size="EXTRA_SMALL" addStyleNames="{style.inline}"/>
            </b:Popover>
          </g:cell>
          <g:cell width="99%" verticalAlignment="MIDDLE">
            <g:IsWidget ui:field="filePathView"/>
          </g:cell>
        </g:HorizontalPanel>
      </b:Column>
    </b:Row>

    <!-- File URL. -->
    <b:Row ui:field="fileURLRow" addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.csv_URL}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.csv_URL_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <g:HorizontalPanel width="100%">
          <g:cell width="1%" verticalAlignment="MIDDLE">
            <b:Popover container="body" showDelayMs="1000" content="{i18n.csv_filePath_description}" title="{i18n.csv_useFilePath}" placement="BOTTOM">
              <b:Button icon="FILE" type="DEFAULT" ui:field="useFilePathButton" size="EXTRA_SMALL" addStyleNames="{style.inline}"/>
            </b:Popover>
          </g:cell>
          <g:cell width="99%" verticalAlignment="MIDDLE">
            <editor:ValueBoxEditor.View ui:field="fileURLView">
              <editor:valuebox>
                <b:TextBox placeholder="{i18n.csv_URL_placeholder}" />
              </editor:valuebox>
            </editor:ValueBoxEditor.View>
          </g:cell>
        </g:HorizontalPanel>
      </b:Column>
    </b:Row>

    <!-- Separator character. -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.csv_sepChar}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.csv_sepChar_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <editor:ValueBoxEditor.View ui:field="sepCharView">
          <editor:valuebox>
            <common:CharacterBox alignment="CENTER" visibleLength="1" placeholder="{i18n.csv_sepChar_placeholder}"/>
          </editor:valuebox>
        </editor:ValueBoxEditor.View>
      </b:Column>
    </b:Row>

    <!-- Quote character. -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.csv_quoteChar}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.csv_quoteChar_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <editor:ValueBoxEditor.View ui:field="quoteCharView">
          <editor:valuebox>
            <common:CharacterBox alignment="CENTER" visibleLength="1" placeholder="{i18n.csv_quoteChar_placeholder}"/>
          </editor:valuebox>
        </editor:ValueBoxEditor.View>
      </b:Column>
    </b:Row>

    <!-- Escape character. -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.csv_escapeChar}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.csv_escapeChar_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <editor:ValueBoxEditor.View ui:field="escCharView">
          <editor:valuebox>
            <common:CharacterBox alignment="CENTER" visibleLength="1" placeholder="{i18n.csv_escapeChar_placeholder}"/>
          </editor:valuebox>
        </editor:ValueBoxEditor.View>
      </b:Column>
    </b:Row>

    <!-- Date pattern. -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.csv_datePattern}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.csv_datePattern_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <editor:ValueBoxEditor.View ui:field="datePatternView">
          <editor:valuebox>
            <b:TextBox placeholder="{i18n.csv_datePattern_placeholder}"/>
          </editor:valuebox>
        </editor:ValueBoxEditor.View>
      </b:Column>
    </b:Row>

    <!-- Number pattern. -->
    <b:Row addStyleNames="{style.row}">
      <b:Column size="MD_3">
        <g:HTML text="{i18n.csv_numberPattern}" addStyleNames="{style.attr}"/>
        <b:Tooltip isAnimated="true" placement="BOTTOM" title="{i18n.csv_numberPattern_description}">
          <b:Icon type="QUESTION_CIRCLE" />
        </b:Tooltip>
      </b:Column>
      <b:Column size="MD_9">
        <editor:ValueBoxEditor.View ui:field="numberPatternView">
          <editor:valuebox>
            <b:TextBox placeholder="{i18n.csv_numberPattern_placeholder}"/>
          </editor:valuebox>
        </editor:ValueBoxEditor.View>
      </b:Column>
    </b:Row>
    
  </b:Container>
  
</ui:UiBinder>