<div class="helpdeskCreate">
    <div class="helpdeskLeftCol">
        <div class="helpdeskCategoryIconBox">
            <div ng-class="vm.mainCategory.icon"></div>
            <div class="helpdeskCategoryIconText">{{vm.mainCategory.name}}</div>
        </div>
    </div>
    <div class="helpdeskRightCol">
        <ng-form class="helpdeskCreateForm" name="createTicketForm" id="createTicketForm">
            <div class="form-group" ng-if="vm.mainCategory.subCategories && vm.mainCategory.subCategories.length>0">
                <label>{{"Category" | translate}}</label>
                <select class="form-control helpdeskSelect" ng-change="vm.categoryChanged()" ng-model="vm.ticket.category" ng-options="subCategory.name for subCategory in vm.mainCategory.subCategories"></select>
            </div>
            <div class="form-group">
                <label>{{'Title*' | translate}}</label>
                <input type="text" class="form-control" ng-required="true" ng-model="vm.ticket.title">
            </div>
            <div class="form-group" ng-show="vm.currentUserIsSuperSupporter">
                <label>{{'Create ticket on behalf of other person' | translate}}</label>
                <div wizdom365-Principalpicker mode="users" allowmultiple="false" principals="vm.onBehalfOf" add-fn="vm.addOnBehalfOfUser(principal)"></div>
            </div>
            <!-- Metadata (including priority and notifyByEmail) -->
            <formly-field ng-repeat="metadata in vm.customMetadataDefinitions"
                          options="metadata.definition"
                          form-value="vm.ticket.metadata[metadata.name]"
                          class="formly-field"
                          ng-class="vm.trim(metadata.name)"
                          form-id="'createTicketForm'"
                          index="$index"
                          ng-hide="metadata.definition.hide">
            </formly-field>
            <!-- File upload -->
            <div class="form-group fileuploadSection">
                <label>{{"Files relevant for the ticket" | translate}}</label>
                <div ng-repeat="file in vm.ticket.files" class="fileRepeater">
                    <a ng-href="{{file.path}}" target="_blank">{{file.originalFilename}}</a>
                    <i class="ms-Icon ms-Icon--ChromeClose" ng-click="vm.removeFile(file)" title="{{'Remove' | translate}}"></i>
                </div>
                <div ng-show="vm.filesAreUploading">{{"Files are uploading, please wait" | translate}}</div>
                <div file-uploader
                     class="fileUploader"
                     ng-hide="vm.filesAreUploading"
                     module="helpdesk"
                     allow-Multiple="true"
                     on-File-Upload-Started="vm.FileUploadStarted"
                     on-File-Upload-Completed="vm.FileUploadCompleted">
                </div>
            </div>
            <!-- Features -->
            <!--
            <div class="form-group">
                <label>{{"Features" | translate}}</label>
                <div class="specialLinkSection">
                    <div class="specialLink"><i class="ms-Icon ms-Icon--Link" title="{{'Show direct link' | translate}}"></i><span class="linkText">{{'Show direct link' | translate}}</span></div>
                </div>
            </div>
            -->
            <!-- Main buttons -->
            <div class="helpdeskButtonRow text-right">
                <button type="button" class="btn btn-default margin-right-5" ng-disabled="vm.submit.working || vm.filesAreUploading" ng-click="vm.cancel();">{{"Cancel" | translate}}</button>
                <button type="button" class="btn btn-primary" ng-disabled="vm.submit.working || vm.filesAreUploading" ng-click="vm.submit(createTicketForm);">{{"Create" | translate}}</button>
            </div>
        </ng-form>
    </div>
</div>

