<h1 translate>Administration - Load Loadfile</h1>

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

<div class="loadingIndicator" style="height: 200px; width: 600px;" ng-show="isLoading" translate>Opening loadfile...</div>

<div class="loadingIndicator" style="height: 200px; width: 600px;" ng-show="isProcessing" translate>Processing loadfile operations ({{currOperation}} / {{totalOperations}})...</div>

<label>
  <span translate>Loadfile URL (if stored on SharePoint): </span>
  <input type="text" ng-model="loadfileURL" size="90"> <button ng-click="addLoadfileURL(loadfileURL)" ng-disabled="!loadfileURL" translate>Add</button>
</label> <br>

<label>
  <span translate>Loadfile files (if stored on your computer): </span>
  <input type="file" onchange="angular.element(this).scope().filesChanged(this)" multiple />
</label> <br>

<ul ng-if="loadfiles && loadfiles.length > 0">
  <li ng-repeat="loadfile in loadfiles">
    {{loadfile.name}}
    <i class="fa fa-chevron-up icon-as-button" title="{{ 'Move loadfile up to load earlier' | translate }}" ng-click="moveLoadfile(loadfile, -1)"></i>
    <i class="fa fa-chevron-down icon-as-button" title="{{ 'Move loadfile down to load later' | translate }}" ng-click="moveLoadfile(loadfile, 1)"></i>
    <i class="fa fa-trash icon-as-button" title="{{ 'Remove loadfile from load list' | translate }}" ng-click="removeLoadfile(loadfile)"></i>
  </li>
</ul>

<div style="color: red; margin-top: 30px;"><input type="checkbox" ng-model="warningAccepted"> <span translate>I am aware that this action has the potential to modify a large part of Dashboard data, destroying existing work, and cannot be undone.</span></div> <br>

<div><button ng-click="processLoadfiles()" ng-disabled="isLoading || isProcessing || !hasAccess || !warningAccepted || !loadfiles || loadfiles.length == 0" translate>Load Loadfile</button></div>

<ul ng-if="loadLog && loadLog.length > 0">
  <li ng-repeat="log in loadLog" class="loadfile_log_{{log.type}}">{{log.entry}}</li>
</ul>