<div class="documents-add-layer row">
    <div class="col-md-3">
        <div class="documetns-types">
            <div class="documents-header">
                {{'documents.headers.DOCUMENT_TYPES' | translate}}
            </div>
            <div class="document-types-list">
              <div class="document-type-row {{getTypeRowClass(docType)}}"
                   ng-click="selectType(docType)"
                   ng-repeat="docType in documentTypes">
                   <span ng-if="hasInfo(docType)">*</span>
                  {{docType.type}}
              </div>
            </div>
            <div class="document-type-row add-type-layer">
                <input type="text"
                        ng-model="documentNewType"
                        placeholder="{{'documents.headers.TYPE' | translate}}"/>
                <div ng-click="addNewType()" class="btn btn-primary">
                    {{'documents.buttons.ADD_TYPE' | translate}}
                </div>
            </div>
        </div>
    </div>

    <form id="upload-new-doc-container" name="form" class="col-md-4">
        <div>
            <label>{{'documents.headers.DOCUMENT_NAME' | translate}}: </label>
            <input id="new-doc-name"
                    type="text"
                    placeholder="{{'documents.headers.DOCUMENT_NAME' | translate}}"
                    ng-model="documentName" />
        </div>

        <div ngf-drop="uploadFile($file)"
            ng-model="files"
            ngf-drag-over-class="'dragover'"
            ngf-select="uploadFile($file)"
            ngf-pattern="'.pdf,.docx,.doc,.xlsx,.xls,.odt,.ods'"
            ngf-max-size="20MB"
            class="drop-box">{{'documents.headers.SELECT_DOCUMENT' | translate}}</div>
    </form>
</div>

<div class="row">
    <div class="col-md-3">
      <div ng-if="hasInfo(selectedType)" class="alert alert-info doc-type-info">
          <span class="glyphicon glyphicon-info-sign"></span>
          {{selectedType.type}}: {{ 'documents.messages.TYPE_INFO_' + selectedType.idDocumentType | translate }}
      </div>
        <div class="alert alert-info doc-type-info">
            <span class="glyphicon glyphicon-info-sign"></span>
            {{ 'documents.messages.TYPE_INFO' | translate }}
        </div>
    </div>
</div>
