<h1 translate ng-show="id === -1 && (datafile.dataFile === undefined || datafile.dataFile === '')">Administration - New Datafile</h1>
<h1 translate ng-show="id !== -1 || (datafile.dataFile !== undefined && datafile.dataFile !== '')">Administration - Datafile &quot;{{datafile.dataFile}}&quot;</h1>

<div class="error" ng-if="errMessage" >{{errMessage | translate}}</div>

<div class="loadingIndicator" style="width: 1200px; height: 500px;" ng-show="loading" translate>Loading datafile definition...</div>

<form name="datafileForm" class="admin-datafile-form">
  <div>
    <label><span translate>Datafile identifier: </span> <input type="text" ng-model="datafile.dataFile" size="40" required ng-pattern="/^[a-zA-Z0-9_-]+$/"></label> <br>
    <label><span translate>Datafile URL: </span> <input type="text" ng-model="datafile.fileName" size="120" required></label> <br>
    <label><span translate>Column separator: </span> <input type="text" ng-model="datafile.dataFileFormat.separator" size="2" maxsize="3" required></label><br>
  </div>

  <table class="admin-datafile-columns-table">
    <thead>
      <tr>
        <th translate>Source Column</th>
        <th translate>Display Name</th>
        <th translate>Keyword</th>
        <th class="center-content" translate>Format</th>
        <th class="center-content" translate>Color*</th>
        <th class="center-content" translate>Is Key</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="col in datafile.dataFileFormat.columns">
        <td><input type="text" ng-model="col.source" size="30" required></td>
        <td><input type="text" ng-model="col.display" size="30" required></td>
        <td><input type="text" ng-model="col.keyword" size="30" required ng-pattern="/^[a-zA-Z0-9_-]+$/"></td>
        <td class="center-content"><select ng-model="col.format" ng-options="value for value in columnFormats" required></select></td>
        <td class="center-content"><input type="text" ng-model="col.color" size="10" ng-pattern="/^|#[0-9a-f]{3,6}$/"></td>
        <td class="center-content"><input type="checkbox" ng-model="col.isKey"></td>
        <td class="center-content">
          <i class="fa fa-trash icon-as-button" title="{{ 'Remove column definition' | translate }}" ng-click="removeColumn(col)"></i>
          <i class="fa fa-chevron-up icon-as-button" title="{{ 'Move column up (changes order in charts etc.)' | translate }}" ng-click="moveColumn(col, -1)"></i>
          <i class="fa fa-chevron-down icon-as-button" title="{{ 'Move column down (changes order in charts etc.)' | translate }}" ng-click="moveColumn(col, 1)"></i>
        </td>
      </tr>
      <tr>
        <td colspan="6" ng-click="addColumn()"><i class="fa fa-plus" title="{{ 'Add column definition' | translate }}" aria-hidden="true"></i> <span translate>Add new column definition</span></td>
      </tr>
    </tbody>
  </table>

  <p translate>*) Specifying a color is only required if you want to overwrite the standard color palette for this column. In this case you need to specify it in RGB hex format (<code>#ffffff</code>), otherwise you can leave this field empty.</p>

  <p class="error" ng-if="noKey()" translate>You need to specify at least one column that will form the primary key for uniquely identifying entries in your datafile.</p>

  <div class="vertical-margins">
    <button ng-click="saveChanges()" ng-disabled="datafileForm.$pristine || !datafileForm.$valid || !hasAccess || isLoading || isProcessing || errMessage || noKey()" translate>Save changes to datafiles definition</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button ng-click="cancelChanges()" ng-show="id !== -1" ng-disabled="datafileForm.$pristine || !hasAccess || isLoading || isProcessing" translate>Cancel changes</button>
  </div>


  <div class="vertical-margins" ng-show="id !== -1">
    <button ng-click="deleteDatafile()" ng-disabled="!hasAccess || isLoading || isProcessing || errMessage" translate>Delete datafile definition</button>
  </div>
</form>