<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
    </div>
    <h1 translate>Import motions</h1>
  </div>
</div>

<div class="details">

  <div class="block row">
    <div class="title">
      <h3 translate>Select a CSV file
    </div>
    <div class="block right import">
      <label class="label" for="inputSeparator" translate>Separator</label>
      <input type="text" ng-model="separator" ng-change="setSeparator()" ng-init="separator=separator" id="inputSeparator">
      <br>
      <label class="label" for="selectEncoding" translate>Encoding</label>
      <select ng-model="encoding" ng-options="enc as enc for enc in encodingOptions"
          ng-selected="setEncoding()" ng-init="encoding=encoding" id="selectEncoding"></select>
      <ng-csv-import
          content="csv.content"
          header="csv.header"
          header-visible="csv.headerVisible"
          separator="csv.separator"
          separator-visible="csv.separatorVisible"
          result="csv.result"
          encoding="csv.encoding"
          encoding-visible="csv.encodingVisible"></ng-csv-import>
    </div>
  </div>

  <h4 translate>Please note:</h4>
  <ul>
      <li><translate>Required comma or semicolon separated values with these column header names in the first row</translate>:<br>
          <code>identifier, title, text, reason, submitter, category</code>
      <li translate>Identifier, reason, submitter and category are optional and may be empty.
      <li translate>Only double quotes are accepted as text delimiter (no single quotes).
      <li><a id="downloadLink" href="" ng-click="downloadCSVExample()" translate>Download CSV example file</a>
  </ul>

  <div ng-if="csv.result">
    <h3 translate>Preview</h3>
    <table class="table table-striped table-bordered table-condensed">
      <thead>
        <tr>
          <th>
          <th>#
          <th translate>Identifier
          <th translate>Title
          <th translate>Text
          <th translate>Reason
          <th translate>Submitter
          <th translate>Category</th>
      <tbody ng-repeat="motion in motions">
        <tr>
          <td class="minimum"
              ng-class="{ 'text-danger': motion.importerror, 'text-success': motion.imported }">
            <span ng-if="motion.importerror">
              <i class="fa fa-exclamation-triangle fa-lg"></i>
            </span>
            <span ng-if="!motion.importerror && !motion.imported">
              <i class="fa fa-check-circle-o fa-lg"></i>
            </span>
            <span ng-if="motion.imported">
              <i class="fa fa-check-circle fa-lg"></i>
            </span>
          <td>
            {{ $index + 1 }}
          <td ng-class="{ 'text-danger': motion.identifier_error }">
            <span ng-if="motion.identifier_error" title="{{ motion.identifier_error | translate }}">
              <i class="fa fa-exclamation-triangle pointer"></i>
            </span>
            {{ motion.identifier }}
          <td ng-class="{ 'text-danger': motion.title_error }">
            <span ng-if="motion.title_error" title="{{ motion.title_error | translate }}">
              <i class="fa fa-exclamation-triangle"></i>
            </span>
            {{ motion.title }}
          <td ng-class="{ 'text-danger': motion.text_error }">
            <span ng-if="motion.text_error" title="{{ motion.text_error | translate }}">
              <i class="fa fa-exclamation-triangle"></i>
            </span>
            {{ motion.text | limitTo:80 }}{{ motion.text.length > 80 ? '...' : '' }}
          <td>{{ motion.reason | limitTo:80 }}{{ motion.reason.length > 80 ? '...' : '' }}
          <td ng-class="{ 'text-warning': motion.submitter_create }">
            <span ng-if="motion.submitter_create" title="{{ motion.submitter_create | translate }}" class="pointer">
              <i class="fa fa-plus-circle"></i>
            </span>
            {{ motion.submitter }}
          <td ng-class="{ 'text-warning': motion.category_create }">
            <span ng-if="motion.category_create" title="{{ motion.category_create | translate }}" class="pointer">
              <i class="fa fa-plus-circle"></i>
            </span>
            {{ motion.category }}
    </table>

    <div class="text-danger">
      <div ng-repeat="motion in motionsFailed = (motions | filter:{importerror:true})"></div>
      <i class="fa fa-exclamation-triangle"></i>
      {{ motionsFailed.length }}
      <translate>motions will be not imported.</translate>
    </div>
    <div>
      <div ng-repeat="motion in motionsPassed = (motions | filter:{importerror:false})"></div>
      <i class="fa fa-check-circle-o fa-lg"></i>
      {{ motions.length - motionsFailed.length }}
      <translate>motions will be imported.</translate>
    </div>
    <div ng-repeat="motion in motionsImported = (motions | filter:{imported:true})"></div>
    <div ng-if="motionsImported.length > 0" class="text-success">
      <hr class="smallhr">
      <i class="fa fa-check-circle fa-lg"></i>
      {{ motionsImported.length }}
      <translate>motions were successfully imported.</translate>
    </div>

    <div class="spacer">
      <button ng-click="clear()" class="btn btn-default" translate>
        Clear preview
      </button>
      <button ng-if="!csvImporting" ng-click="import()" class="btn btn-primary" translate>
        Import {{ motions.length - motionsFailed.length }} motions
      </button>
    </div>
    <div class="spacer">
      <a ng-if="csvimported" ui-sref="motions.motion.list" class="btn btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to motions overview</translate>
      </a>
    </div>
  </div>
</div>
