<div class="kisProcess">
  <div class="col-md-12 kis-process-tmargin">
    <div class="col-md-12" style="font-size:16px;">
      <center>
        <label translate>portals.process.title</label>
      </center>
    </div>
  </div>

  <br />

  <div class="top-pad">
    <label class="right-pad">
      <input
        type="checkbox"
        ng-model="processtabs.autorefresh"
        ng-change="changedRefresh()"
      />
      {{ 'process.process.refreshauto' | translate }}
    </label>
  </div>

  <div class="col-md-12  kis-process-tmargin">
    <div class="col-md-12">
      <center>
        <div
          bs-active-pane="processtabs.activeTab"
          ng-model="processtabs.activeTab"
          bs-tabs
        >
          <div
            ng-repeat="tab in processtabs"
            title="{{ tab.title | translate }}"
            bs-pane
          ></div>
        </div>
      </center>
    </div>
  </div>

  <div class="tableprocess col-md-12">
    <div class="alert-process">
      <div
        class="alert alert-info"
        ng-show="(processtabs.activeTab == 0 && currentFormData.mbtiles && currentFormData.mbtiles.length == 0) ||
                      (processtabs.activeTab == 1 && currentFormData.docx && currentFormData.docx.length == 0)"
      >
        <!-- processtabs.activeTab == 1 && currentFormData.gpkg && currentFormData.gpkg.length == 0) || -->
        <translate>portals.process.nodata</translate>
      </div>
    </div>

    <div
      style="max-height:400px;overflow-y:auto;margin-bottom:50px;"
      ng-show="(processtabs.activeTab == 0 && currentFormData.mbtiles && currentFormData.mbtiles.length > 0) ||
                (processtabs.activeTab == 1 && currentFormData.gpkg && currentFormData.gpkg.length > 0) ||
                (processtabs.activeTab == 2 && currentFormData.docx && currentFormData.docx.length > 0)"
    >
      <div class="col-xs-12">
        <table
          ng-table="tableParamsProcess"
          class="table table-striped table-hover"
          style="max-height:300px;overflow-y:auto;"
        >
          <thead>
            <tr>
              <th colspan="3">
                <button
                  class="btn btn-primary btn-xs"
                  ng-click="refreshallLists('frombtn')"
                >
                  <i class="fa fa-refresh"></i>
                </button>
                <translate>datatable.actions</translate>
              </th>
              <th colspan="4"><translate>process.process.file</translate></th>
              <th colspan="3"><translate>process.process.etat</translate></th>
              <th colspan="2">
                <translate>process.process.progress</translate>
              </th>
              <th colspan="4">
                <translate>process.process.creation</translate>
              </th>
              <th colspan="3"><translate>process.process.end</translate></th>
              <th colspan="3">
                {{ processtabs.activeTab == 0 || processtabs.activeTab == 1 ? (
                'process.process.total' | translate ) : (
                'docxprocess.docxprocess.total' | translate ) }}
              </th>
              <th colspan="4"><translate>process.process.taille</translate></th>
            </tr>
          </thead>
          <tbody>
            <tr
              style="text-align: center;"
              ng-repeat="process in $data"
              ng-class="{ 'success': process.etat == 'FINISHED' ,
                              'info' : process.etat == 'RUNNING' ,
                              'danger' : process.etat == 'FAILED' , 'active': process.$selected  }"
              ng-click="selectProcess($index);"
            >
              <td colspan="3">
                <div class="btn-group">
                  <button
                    class="btn btn-danger btn-xs btn-group-item"
                    ng-click="removeProcess($index)"
                  >
                    <i class="fa fa-trash"></i>
                  </button>
                  <button
                    class="btn btn-primary btn-xs btn-group-item"
                    ng-disabled="process.etat !== 'FINISHED' "
                    ng-show="processtabs.activeTab != 2"
                    ng-click="showQrProcess($index)"
                  >
                    <i class="fa fa-qrcode"></i>
                  </button>
                  <button
                    class="btn btn-primary btn-xs btn-group-item"
                    ng-disabled="process.etat !== 'FINISHED' "
                    ng-click="downloadProcess($index)"
                  >
                    <i class="fa fa-download"></i>
                  </button>
                </div>
              </td>
              <td colspan="4">{{ process.file }}</td>
              <td colspan="3">
                <translate>process.process.{{ process.etat }}</translate>
              </td>
              <td colspan="2">{{ process.progress }}</td>
              <td colspan="4">
                {{ process.creation | date:'dd MMM yyyy HH:mm' }}
              </td>
              <td colspan="3">{{ process.end | date:'dd MMM yyyy HH:mm' }}</td>
              <td colspan="3">{{ process.total }}</td>
              <td colspan="4">{{ process.taille | number : 2 }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
