<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>
      </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>
                <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>