<div id="ticketLoadingBar" class="ticketLoadingBar"></div>
<div id="ticketAddon" class="ticketAddon" style="visibility: hidden;">
<div ng-controller="ticketCtrl" id="ticketCtrl">
<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>
<div id="resultMessage" ng-show="(resultMessage.length > 0)"  class="result-message alert {{resultMessageClass}}">
<i class="{{resultMessageClassExt}}"></i>
{{resultMessage}}
<a ng-show="ticketLink && ticketLink.length > 0" href="{{ticketLink}}">{{ticketLabel}}</a>
</div>
<form name="newTicketForm" class="form-horizontal" ng-show="newTicket != null" ng-submit="saveTicket()">
<h3>{{i18n.requestPanelTitle}}</h3>
<div class="control-group">
<h4 class="titleWithBorder ">{{i18n.requestTypeQuestion}}</h4>
</div>
<div class="controls">
<label for="requestTypeIncident">
<span class="uiRadio">
<input type="radio" name="requestType" id="requestTypeIncident" value="INCIDENT" ng-model="newTicket.type">
<span>{{i18n.requestTechnicalChoice}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestTypeInformation">
<span class="uiRadio">
<input type="radio" name="requestType" id="requestTypeInformation" value="INFORMATION" ng-model="newTicket.type">
<span>{{i18n.requestInformationChoice}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestTypeProduct">
<span class="uiRadio">
<input type="radio" name="requestType" id="requestTypeProduct" value="PRODUCT" ng-model="newTicket.type">
<span>{{i18n.requestProductChoice}}</span>
</span>
</label>
</div>
<div ng-show="newTicket.type == 'INCIDENT'">
<div class="control-group">
<h4 class="titleWithBorder ">{{i18n.giveMoreDetails}}</h4>
</div>
<div class="controls">
<label for="reuquetSevirity1Label">
<span class="uiRadio">
<input type="radio" name="requestSeverity" id="reuquetSevirity1Label" value="SEVERITY_1" ng-model="newTicket.severity">
<span class="severity1">{{i18n.reuquetSevirity1Label}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="reuquetSevirity2Label">
<span class="uiRadio">
<input type="radio" name="requestSeverity" id="reuquetSevirity2Label" value="SEVERITY_2" ng-model="newTicket.severity">
<span class="severity2">{{i18n.reuquetSevirity2Label}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="reuquetSevirity3Label">
<span class="uiRadio">
<input type="radio" name="requestSeverity" id="reuquetSevirity3Label" value="SEVERITY_3" ng-model="newTicket.severity">
<span class="severity3">{{i18n.reuquetSevirity3Label}}</span>
</span>
</label>
</div>
</div>
<div ng-show="newTicket.type == 'INFORMATION'">
<div class="control-group">
<h4 class="titleWithBorder ">{{i18n.selectInformationType}}</h4>
</div>
<div class="controls">
<label for="requestCustomerManagement">
<span class="uiRadio">
<input type="radio" name="requestInfoType" id="requestCustomerManagement" value="INFO_1" ng-model="newTicket.infoType">
<span><b>{{i18n.requestINFO_1Prefix}}:</b>&nbsp;{{i18n.requestINFO_1}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestFeatureOrAdministration">
<span class="uiRadio">
<input type="radio" name="requestInfoType" id="requestFeatureOrAdministration" value="INFO_2" ng-model="newTicket.infoType">
<span><b>{{i18n.requestINFO_2Prefix}}:</b>&nbsp;{{i18n.requestINFO_2}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestInstallationInformation">
<span class="uiRadio">
<input type="radio" name="requestInfoType" id="requestInstallationInformation" value="INFO_3" ng-model="newTicket.infoType">
<span><b>{{i18n.requestINFO_3Prefix}}:</b>&nbsp;{{i18n.requestINFO_3}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestProductInformation">
<span class="uiRadio">
<input type="radio" name="requestInfoType" id="requestProductInformation" value="INFO_4" ng-model="newTicket.infoType">
<span><b>{{i18n.requestINFO_4Prefix}}:</b>&nbsp;{{i18n.requestINFO_4}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestRoadmapFeatures">
<span class="uiRadio">
<input type="radio" name="requestInfoType" id="requestRoadmapFeatures" value="INFO_5" ng-model="newTicket.infoType">
<span><b>{{i18n.requestINFO_5Prefix}}:</b>&nbsp;{{i18n.requestINFO_5}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestMaintenanceCalendar">
<span class="uiRadio">
<input type="radio" name="requestInfoType" id="requestMaintenanceCalendar" value="INFO_6" ng-model="newTicket.infoType">
<span><b>{{i18n.requestINFO_6Prefix}}:</b>&nbsp;{{i18n.requestINFO_6}}</span>
</span>
</label>
</div>
<div class="controls">
<label for="requestOtherInformation">
<span class="uiRadio">
<input type="radio" name="requestInfoType" id="requestOtherInformation" value="INFO_7" ng-model="newTicket.infoType">
<span><b>{{i18n.requestINFO_7Prefix}}:</b>&nbsp;{{i18n.requestINFO_7}}</span>
</span>
</label>
</div>
</div>
<div class="control-group" ng-show="newTicket.type == 'PRODUCT'">
<h4 class="titleWithBorder ">{{i18n.cstLabelForm}}</h4>
<div class="alert alert-info cstInfo">
<p><b>{{i18n.productQuestionDescription}}</b></p>
<p class="text-right"><small>{{i18n.customerSuccessTeam}}</small></p>
</div>
</div>
<div class="control-group" ng-show="newTicket.type == 'INFORMATION' && newTicket.infoType">
<h4 class="titleWithBorder ">{{i18n.infoLabelForm}}</h4>
</div>
<div class="control-group" ng-show="newTicket.severity && newTicket.type == 'INCIDENT'">
<h4 class="titleWithBorder ">{{i18n.incidentLabelForm}}</h4>
</div>
<div class="control-group" ng-show="newTicket.severity && newTicket.type == 'INCIDENT'">
<label class="control-label" for="requestEnvironmentScope">{{i18n.requestEnvironmentScope}}</label>
<div class="controls">
<select ng-model="newTicket.environmentId" id="requestEnvironmentScope" name="requestEnvironmentScope"
ng-options="environment.id as environment.name for environment in environments" ng-required="newTicket.type=='INCIDENT'">
<option value=""></option>
</select>
<span ng-show="newTicketForm.requestEnvironmentScope.$error.required">{{i18n.validateSelectEnvironment}}</span>
<button type="button" class="btn btn-primary" ng-click="newEnvironmentForm()">{{i18n.addEnvironment}}</button>
</div>
<span class="warning" ng-show="isOldEnv(newTicket.environmentId)">&#9888;{{i18n.oldEnvironmentLong}} <a href="" ng-click="updateEnvironmentForm()">{{i18n.linkLabel}}</a></span>
</div>
<div class="control-group" ng-show="(newTicket.type == 'INCIDENT' && newTicket.severity) || (newTicket.type == 'INFORMATION' && newTicket.infoType) || newTicket.type == 'PRODUCT'">
<label class="control-label" for="requestTitleLabel">{{i18n.requestTitleLabel}}</label>
<div class="controls">
<input type="text" name="requestTitleLabel" id="requestTitleLabel" placeholder="{{i18n.requestTitleLabel}}" ng-model="newTicket.title" required>
<span ng-show="newTicketForm.requestTitleLabel.$error.required" class="error">{{i18n.validateAddTitle}}</span> {{newTicketForm.requestTitleLabel.$error.required}}
</div>
</div>
<div class="control-group" ng-show="(newTicket.type == 'INCIDENT' && newTicket.severity) || (newTicket.type == 'INFORMATION' && newTicket.infoType) || newTicket.type == 'PRODUCT'">
<label class="control-label" for="requestDescription">{{i18n.requestDescriptionLabel}}</label>
<div class="controls">
<textarea rows="10" cols="50" id="requestDescription" name="requestDescription" ng-model="newTicket.description" placeholder="{{i18n.requestDescriptionLabel}}" required ckEditorDirective></textarea>
<span ng-show="(ckeditorErrorMessage.length > 0)" class="{{ckeditorErrorClass}}">{{i18n.validateAddDescription}}</span>
</div>
</div>
<div class="control-group" ng-show="newTicket.type == 'PRODUCT'">
<label class="control-label" for="startDate">{{i18n.requestCallMeBetween}}</label>
<div class="controls">
<input id="startDate" lang="{{locale}}" format="{{dateFormat}}" placeholder="{{dateFormat}}" type="text" name="startDate" ng-model="newTicket.startDate" />
<span ng-show="startDateErrorMessage.length > 0" class="{{startDateErrorClass}}">{{startDateErrorMessage}}</span>
</div>
</div>
<div class="control-group" ng-show="newTicket.type == 'PRODUCT'">
<label class="control-label" for="endDate">{{i18n.and}}</label>
<div class="controls">
<input id="endDate" lang="{{locale}}" format="{{dateFormat}}"  placeholder="{{dateFormat}}" type="text" name="endDate" ng-model="newTicket.endDate" />
<span ng-show="endDateErrorMessage.length > 0" class="{{endDateErrorClass}}">{{endDateErrorMessage}}</span>
<span ng-show="StartAfterEndDateErrorMessage.length > 0" class="{{StartAfterEndDateErrorClass}}">{{StartAfterEndDateErrorMessage}}</span>
</div>
</div>
<div class="control-group" ng-show="(newTicket.type == 'INCIDENT' && newTicket.severity) || (newTicket.type == 'INFORMATION' && newTicket.infoType)">
<label class="control-label" for="fileToImport">{{i18n.attachement}}</label>
<div class="controls">
<div class="uiAction">
<input type="file" id="fileToImport" accept="*" name="fileToImport" style="display: none;" onchange="angular.element(this).scope().prepareImportFile(this);"  multiple="multiple"/>
<input id="btUpload" class="btn btn-primary input-large" type="button" value="{{i18n.chooseFile}}" onclick="angular.element(this).scope().fileUploadClick();">
<div class="uiIconNotification" style="color: red;">{{i18n.logWarning}}</div>
<div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="importFile in importFiles" ng-bind-html-unsafe="importFile.name" >
{{ importFile.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
<br />
<div class="uiAction">
<button ng-show="!scope.fileUploading && ((newTicket.type == 'INCIDENT' && newTicket.severity) || (newTicket.type == 'INFORMATION' && newTicket.infoType) || newTicket.type == 'PRODUCT')" ng-disabled="submitInProgress" type="submit" class="btn btn-primary input-large">{{i18n.save}}</button>
</div>
</form>
<div class="uiAction">
<button ng-show="newTicket == null" type="button" class="btn input-large" ng-click="initForm()">{{i18n.newTicket}}</button>
</div>
</div>
</div>