<form id="csv-import">
  <label for="fileInput" translate>CSV file</label>
  <div id="fileInput" class="file-select">
    <div class="form-control">
      <label for="csvFileSelector">
        <i class="fa fa-upload"></i>
        <span ng-if="selectedFile">{{ selectedFile }}</span>
        <span ng-if="!selectedFile" translate>Select a file</span>
      </label>
      <a href class="pull-right clear-file" ng-if="selectedFile" ng-click="clearFile()">
        <i class="fa fa-times" title="{{ 'Deselect file' | translate }}"></i>
      </a>
    </div>
    <input id="csvFileSelector" type="file" value="" accept="{{ accept }}">
    <p class="help-block">
      <translate translate-context="special filetypes in a file open dialog">Accepted file types</translate>:
      {{ accept }}
    </p>
  </div>

  <div class="form-group">
    <label for="selectEncoding" translate>Encoding</label>
    <select class="form-control" ng-model="$parent.encoding" ng-if="encodingOptions.length > 1" ng-change="parse()"
      id="selectEncoding" ng-options="enc for enc in encodingOptions"></select>
  </div>
  <div class="form-group">
    <label for="inputDelimiter" translate>Separator</label>
    <input type="text" class="form-control" ng-model="delimiter" ng-change="parse()" id="inputDelimiter">
    <p class="help-block help-block-big" ng-if="autodelimiter">
      <translate>Autodetection</translate>:
      {{ autodelimiter }}
    </p>
    <p class="help-block" ng-if="!autodelimiter" translate>Leave empty for autodetection of the separator.</p>
  </div>
</form>
