<div id="csLoadingBar" class="csLoadingBar"></div>
<div id="csAddon" class="csAddon" style="visibility: hidden;">
  <div ng-controller="csCtrl" id="csCtrl">
    <div id="resultMessage" ng-show="(resultMessage.length > 0)" class="result-message alert {{resultMessageClass}}">
      <i class="{{resultMessageClassExt}}"></i>
      {{resultMessage}}
      <a ng-href="{{returnLink}}" ng-show="returnLink && returnLink.length > 0">{{i18n.returnToTicketForm}}</a>
    </div>
    <div ng-show="environments.length && environments.length > 0 && !showForm">
      <h4 class="titleWithBorder">{{i18n.environments}}</h4>
      <table id="environmentsTable" class="table uiGrid table-hover table-striped">
        <thead>
          <tr>
            <th>{{i18n.environmentName}}</th>
            <th>{{i18n.action}}</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="environment in environments">
            <td>{{environment.name}}</td>
            <td class="center actionContainer">
              <a data-placement="bottom" rel="tooltip" class="actionIcon" data-original-title="{{i18n.edit}}" ng-click="editEnvironment(environment)">
                <i class="uiIconEditStyle uiIconLightGray"></i>
              </a>
              <a data-placement="bottom" rel="tooltip" class="actionIcon" data-original-title="{{i18n.delete}}" ng-click="deleteEnvironment(environment)">
                <i class="uiIconDeleteUser uiIconLightGray"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
      <button type="button" class="btn button-newserver" ng-click="editEnvironment()">{{i18n.createEnvironment}}</button>
    </div>
    <div id="environmentForm" ng-show="!environments.length || environments.length == 0 || showForm">
      <form name="newEnvironmentForm" class="form-horizontal" ng-submit="saveEnvironment()">
        <h3>{{i18n.serverEnvironmentDetails}}</h3>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentLabel}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputName">{{i18n.environmentName}}</label>
          <div class="controls">
            <input type="text" name="inputName" id="inputName" placeholder="{{i18n.label}}" ng-model="newEnvironment.name" required>
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="defaultEnvironment">{{i18n.environmentDefaultLabel}}</label>
          <div class="controls">
            <input type="checkbox" name="defaultEnvironment" id="defaultEnvironment" ng-model="newEnvironment.defaultEnvironment">
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentType">{{i18n.environmentType}}</label>
          <div class="controls">
            <select name="inputEnvironmentType" id="inputEnvironmentType" ng-model="newEnvironment.typeId" convert-to-number
                    required>
              <option value="" selected></option>
              <option ng-repeat="envType in types['EnvType']" value="{{envType.id}}">{{envType.label}}</option>
              <option value="-1">{{i18n.environmentOther}}</option>
            </select>
            <input type="text" name="typeOtherName" id="typeOtherName" ng-show="newEnvironment.typeId == -1" placeholder="{{i18n.environmentTypeOtherName}}" ng-model="newEnvironment.typeOtherName">
          </div>
        </div>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentProductInformation}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputProductVersion">{{i18n.version}}</label>
          <div class="controls">
            <input type="text" name="inputProductVersion" id="inputProductVersion" placeholder="{{i18n.version}}" ng-model="newEnvironment.productVersion" required>
          </div>
        </div>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentOSInformation}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentOS">{{i18n.name}}</label>
          <div class="controls">
            <select name="inputEnvironmentOS" id="inputEnvironmentOS" ng-model="newEnvironment.osId">
              <option value=""></option>
              <option ng-repeat="osType in types['OSType']" value="{{osType.id}}">{{osType.label}}</option>
              <option value="-1">{{i18n.environmentOther}}</option>
            </select>
            <input type="text" name="inputEnvironmentOSOther" id="inputEnvironmentOSOther" ng-show="newEnvironment.osId == -1" ng-model="newEnvironment.osOtherName">
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentOSVersion">{{i18n.version}}</label>
          <div class="controls">
            <input type="text" name="inputEnvironmentOSVersion" id="inputEnvironmentOSVersion" placeholder="{{i18n.version}}" ng-model="newEnvironment.osVersion">
          </div>
        </div>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentJavaInformation}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentJVMVendor">{{i18n.vendor}}</label>
          <div class="controls">
            <select name="inputEnvironmentJVMVendor" id="inputEnvironmentJVMVendor" ng-model="newEnvironment.jvmVendorId">
              <option value=""></option>
              <option ng-repeat="jvmType in types['JVMType']" value="{{jvmType.id}}">{{jvmType.label}}</option>
              <option value="-1">{{i18n.environmentOther}}</option>
            </select>
            <input type="text" name="inputEnvironmentJVMVendorOther" id="inputEnvironmentJVMVendorOther" ng-show="newEnvironment.jvmVendorId == -1" ng-model="newEnvironment.jvmVendorOtherName">
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentJVMVersion">{{i18n.version}}</label>
          <div class="controls">
            <input type="text" name="inputEnvironmentJVMVersion" id="inputEnvironmentJVMVersion" placeholder="{{i18n.version}}" ng-model="newEnvironment.jvmVersion">
          </div>
        </div>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentASInformation}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentASName">{{i18n.name}}</label>
          <div class="controls">
            <select name="inputEnvironmentASName" id="inputEnvironmentASName" ng-model="newEnvironment.asId">
              <option value=""></option>
              <option ng-repeat="asType in types['ASType']" value="{{asType.id}}">{{asType.label}}</option>
              <option value="-1">{{i18n.environmentOther}}</option>
            </select>
            <input type="text" name="inputEnvironmentASNameOther" id="inputEnvironmentASNameOther" ng-show="newEnvironment.asId == -1" ng-model="newEnvironment.asOtherName">
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentASVersion">{{i18n.version}}</label>
          <div class="controls">
            <input type="text" name="inputEnvironmentASVersion" id="inputEnvironmentASVersion" placeholder="{{i18n.version}}" ng-model="newEnvironment.asVersion">
          </div>
        </div>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentDBInformation}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentDBName">{{i18n.name}}</label>
          <div class="controls">
            <select name="inputEnvironmentDBName" id="inputEnvironmentDBName" ng-model="newEnvironment.dbId">
              <option value=""></option>
              <option ng-repeat="dbType in types['DBType']" value="{{dbType.id}}">{{dbType.label}}</option>
              <option value="-1">{{i18n.environmentOther}}</option>
            </select>
            <input type="text" name="inputEnvironmentDBNameOther" id="inputEnvironmentDBNameOther" ng-show="newEnvironment.dbId == -1" ng-model="newEnvironment.dbOtherName">
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentDBVersion">{{i18n.version}}</label>
          <div class="controls">
            <input type="text" name="inputEnvironmentDBVersion" id="inputEnvironmentDBVersion" placeholder="{{i18n.version}}" ng-model="newEnvironment.dbVersion">
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentDBEncoding">{{i18n.encoding}}</label>
          <div class="controls">
            <input type="text" name="inputEnvironmentDBEncoding" id="inputEnvironmentDBEncoding" placeholder="{{i18n.encodingLabel}}" ng-model="newEnvironment.dbEncoding">
          </div>
        </div>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentSSOTitle}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentSSO">{{i18n.inputEnvironmentSSO}}</label>
          <div class="controls">
            <select name="inputEnvironmentSSO" id="inputEnvironmentSSO" ng-model="newEnvironment.ssoId">
              <option value=""></option>
              <option ng-repeat="ssoType in types['SSOType']" value="{{ssoType.id}}">{{ssoType.label}}</option>
              <option value="-1">{{i18n.environmentOther}}</option>
            </select>
            <input type="text" name="inputEnvironmentSSOOther" id="inputEnvironmentSSOOther" ng-show="newEnvironment.ssoId == -1" ng-model="newEnvironment.ssoOtherName">
          </div>
        </div>
        <div class="control-group">
          <h4 class="titleWithBorder ">{{i18n.environmentMoreInformationTitle}}</h4>
        </div>
        <div class="control-group">
          <label class="control-label" for="inputEnvironmentMoreInformation">{{i18n.moreInformationLabel}}</label>
          <div class="controls">
            <textarea type="text" name="inputEnvironmentMoreInformation" id="inputEnvironmentMoreInformation" placeholder="{{i18n.moreInformationPlaceHolder}}" ng-model="newEnvironment.moreInformation"></textarea>
          </div>
        </div>
        <div id="environmentSaveAs" class="control-group">
          <button type="submit" class="btn btn-primary" >{{i18n.save}}</button>
          <button type="button" class="btn" ng-click="showForm = false">{{i18n.cancel}}</button>
        </div>
      </form>
    </div>
  </div>
</div>