<img src="img/loader.gif" ng-show="!document && isEdit()" />

<div ng-show="document || !isEdit()">
  <form name="documentForm" class="form-horizontal">
    <div class="form-group" ng-class="{ 'has-error': !documentForm.title.$valid }">
      <label class="col-sm-2 control-label" for="inputTitle">Title</label>
      <div class="col-sm-10">
        <input required ng-maxlength="100" class="form-control" type="text" id="inputTitle"
          placeholder="Title" name="title" ng-model="document.title" autocomplete="off"
          typeahead="document for document in getTitleTypeahead($viewValue) | filter: $viewValue"
          typeahead-wait-ms="200" ng-disabled="fileIsUploading" />
      </div>
    </div>
    <div class="form-group" ng-class="{ 'has-error': !documentForm.description.$valid }">
      <label class="col-sm-2 control-label" for="inputDescription">Description</label>
      <div class="col-sm-10">
        <textarea ng-maxlength="4000" class="form-control" rows="5" id="inputDescription"
          name="description" ng-model="document.description" ng-disabled="fileIsUploading"></textarea>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="inputCreateDate">Creation date</label>
      <div class="col-sm-10">
        <input type="text" id="inputCreateDate" ng-readonly="true" datepicker-popup="yyyy-MM-dd" class="form-control"
          ng-model="document.create_date" starting-day="1" show-weeks="false" ng-disabled="fileIsUploading" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="inputLanguage">Language</label>
      <div class="col-sm-10">
        <select class="form-control" id="inputLanguage" ng-model="document.language" ng-disabled="fileIsUploading">
          <option value="fra">French</option>
          <option value="eng">English</option>
          <option value="jpn">Japanese</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="inputFiles">New files</label>
      <div class="col-sm-6">
        <file class="form-control" id="inputFiles" multiple="multiple" ng-model="newFiles"
          accept="image/png,image/jpg,image/jpeg,image/gif,application/pdf" ng-disabled="fileIsUploading"></file>
      </div>
      <div class="col-sm-4" ng-if="orphanFiles.length > 0">
        + {{ orphanFiles.length }} file{{ orphanFiles.length > 1 ? 's' : '' }}
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label" for="inputTags">Tags</label>
      <div class="col-sm-10">
        <select-tag tags="document.tags" ref="inputTags" ng-disabled="fileIsUploading"></select-tag>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary" ng-disabled="!documentForm.$valid || fileIsUploading" ng-click="edit()">{{ isEdit() ? 'Edit' : 'Add' }}</button>
        <button type="submit" class="btn btn-default" ng-click="cancel()" ng-disabled="fileIsUploading">Cancel</button>
      </div>
    </div>
  </form>
  
  <div class="row" ng-show="fileIsUploading">
    <h4>Uploading files...</h4>
    <div class="col-md-6"><progressbar value="fileProgress" class="progress-info active"></progressbar></div>
  </div>
  
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert>
</div>