<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" data-ng-app="cycle">
  <head th:substituteby="fragment/common :: head">

  </head>
  <body data-ng-controller="DefaultController">
    <div class="wrapper">
      <div th:substituteby="fragment/common :: navigation-logged-in"></div>
      <div class="container-fluid content-container content-inset">
        <div th:substituteby="fragment/common :: breadcrumbs"></div>
        <div data-error-panel></div>
        <div class="row-fluid content-container">
          <div class="span12" data-ng-controller="ConnectorSetupController">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Connector Name</th>
                  <th>Plugin Name</th>
                  <th>Login Mode</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="connectorConfiguration in connectorConfigurations" data-ng-cloak>
                  <td>{{connectorConfiguration.connectorId}}</td>
                  <td>{{connectorConfiguration.name}}</td>
                  <td>{{connectorConfiguration.connectorName}}</td>
                  <td>{{connectorConfiguration.loginMode}}</td>
                  <td>
                    <a data-ng-click="editConnector(connectorConfiguration)" th:text="#{edit}">edit</a>
                    <br />
                    <a data-ng-click="deleteConnector(connectorConfiguration)" th:text="#{delete}">delete</a>
                  </td>
                </tr>
              </tbody>
            </table>
            <a class="btn" data-ng-click="createNew()"><span th:text="#{New}">New</span></a>

            <!-- begin add/edit connector-configuration-dialog -->
            <modal-dialog model="editConnectorConfigurationDialog" ng-cloak>
              <div class="modal hide" data-ng-controller="EditConnectorController" data-ngm-if="editConnectorConfigurationDialog.renderHtml()"> 
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h3 data-ng-show="connectorDialogMode == 'ADD_CONNECTOR'" th:text="#{'Add connector'}"></h3>
                  <h3 data-ng-show="connectorDialogMode == 'EDIT_CONNECTOR'" th:text="#{'Edit connector'}"></h3>
                </div>
                <div class="modal-body">
                  <div data-error-panel></div>
                  <div class="alert alert-error" data-ng-show="connectorTest.state == 'IN_ERROR'">
                    <button type="button" class="close" data-ng-click="connectorTest = null">&times;</button>
                    <span>
                      <strong th:text="#{Invalid Configuration:}"></strong>
                      {{ connectorTest.message }}
                    </span>
                  </div>
                  <div class="alert alert-success" data-ng-show="connectorTest.state == 'OK'">
                    <button type="button" class="close" data-ng-click="connectorTest = null">&times;</button>
                    <span>
                      <strong th:text="#{Valid Configuration:}"></strong>
                      Using the connector worked
                    </span>
                  </div>
                  <form class="form-horizontal" novalidate data-ng-submit="save()" name="editConnectorConfigForm">
                    <fieldset>
                      <div class="control-group">
                        <label class="control-label" for="connectorLabel" 
                               th:text="#{'Connector Name*'}">Connector Name*</label>
                        <div class="controls" style="margin-bottom: 10px;" >
                          <input id="connectorLabel" name="connectorLabel" type="text" class="span8" required ng-model="editConnectorConfiguration.name"/>
                        </div>
                      </div>

                      <div data-ng-show="connectorDialogMode == 'ADD_CONNECTOR'" class="control-group">
                        <label class="control-label" for="connectors" 
                               th:text="#{'Plugin*'}">Plugin*</label>
                        <div class="controls">
                          <select class="span8" data-ng-options="c.name for c in defaultConfigurations" ng-model="blueprint">
                          </select>
                        </div>
                      </div>
                      <div data-ng-show="connectorDialogMode == 'EDIT_CONNECTOR'" class="control-group">
                        <label class="control-label" for="connectors" 
                               th:text="#{'Plugin'}">Plugin</label>
                        <div class="controls" style="margin-bottom: 10px;">
                          <span style="line-height: 30px">{{editConnectorConfiguration.connectorName}}</span>
                        </div>
                      </div>

                      <div class="control-group">
                        <label class="control-label" for="loginMode" 
                               th:text="#{'Login Mode*'}">Login Mode*</label>
                        <div class="controls" style="margin-bottom: 10px;" >
                          <span class="nullable">
                            <select id="loginMode" class="span8" data-required ng-model="editConnectorConfiguration.loginMode">
                              <option value="LOGIN_NOT_REQUIRED">no login required</option>
                              <option value="GLOBAL">credentials provided globally</option>
                              <option value="USER">credentials provided by user</option>
                            </select>
                          </span>
                        </div>
                      </div>
                      
                      <div data-ng-switch data-on="editConnectorConfiguration.loginMode">
                        <div data-ng-switch-when="GLOBAL">
                          <div class="control-group">
                            <label class="control-label" for="userName" 
                                   th:text="#{'User Name*'}">User Name*</label>
                            <div class="controls">
                              <input id="userName" name="userName" type="text" class="span8" required ng-model="editConnectorConfiguration.user"/>
                            </div> 
                          </div>
                          <div ng-switch on="passwordRequired">
                            <div class="control-group" data-ng-switch-when="true">
                              <label class="control-label" for="password" 
                                     th:text="#{'Password*'}">Password*</label>
                              <div class="controls" style="margin-bottom: 10px;" >
                                <input id="password" name="password" type="password" class="span8" required ng-model="editConnectorConfiguration.password"/>
                              </div> 
                            </div>
                            <div class="control-group" ng-switch-when="false">
                              <label class="control-label" for="password" 
                                     data-help  
                                     data-help-text-var="editPasswordText"
                                     data-help-title-var="editPasswordTitle"                                
                                     th:text="#{'Password'}">Password</label>
                              <div class="controls" style="margin-bottom: 10px;" >
                                <input id="password" name="password" type="password" class="span8" ng-model="editConnectorConfiguration.password"/>
                              </div> 
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="control-group">
                        <label class="control-label" for="useImage" 
                               th:text="#{'Use Modeler Image'}"
                               data-help
                               data-help-text-var="useImageText"
                               data-help-title-var="useImageTitle">Use Modeler Image</label>
                        <div class="controls">
                          <input id="useImage" name="useImage" type="checkbox" ng-model="editConnectorConfiguration.useImage"/>
                        </div>
                      </div>
                      
                      <div class="control-group" data-ng-repeat="propertyName in customPropertyNames">
                        <label class="control-label" for="specificField" 
                               data-help
                               data-help-text-var="currentHelpText(propertyName)"
                               data-help-title-var="propertyName">{{propertyNameText(propertyName)}}</label>
                        <div class="controls">
                          <input data-ng-hide="isPropertyPassword(propertyName)" data-ng-required="isPropertyRequired(propertyName)" id="{{propertyName}}" name="specificField" type="text" class="span8" ng-model="editConnectorConfiguration.properties[propertyName]" />
                          <input data-ng-show="isPropertyPassword(propertyName)" data-ng-required="isPropertyRequired(propertyName)" id="{{propertyName}}" name="specificField" type="password" class="span8" ng-model="editConnectorConfiguration.properties[propertyName]"/>
                        </div>
                      </div>
                    </fieldset>
                  </form>
                </div>
                <div class="modal-footer">
                  <button class="btn" data-ng-click="editConnectorConfigurationDialog.close()" th:text="#{Cancel}">Cancel</button>
                  <button class="btn" data-ng-click="test()" data-ng-disabled="!isValid()" data-req-aware="editConnectorConfigForm">Test</button>
                  <button class="btn btn-primary" data-ng-click="save()" data-ng-disabled="!isValid()" th:text="#{Save}" data-req-aware="editConnectorConfigForm">Save</button>
                </div>
              </div>
            </modal-dialog>
            <!-- end add/edit connector-configuration-dialog -->
            
            <!-- begin delete-connector-configuration-dialog -->
            <modal-dialog model="deleteConnectorConfigurationDialog" ng-cloak>
              <div class="modal hide" data-ng-controller="DeleteConnectorConfigurationController" ngm-if="deleteConnectorConfigurationDialog.renderHtml()"> 
                <div class="modal-header">
                  <button data-ng-show="deleteConnectorConfigurationDialog.autoClosable" type="button" class="close" data-dismiss="modal">&times;</button>
                  <h3 th:text="#{'Delete connector configuration'}"></h3>
                </div>
                <div class="modal-body">
                <div data-error-panel></div>
                <div data-ng-switch data-on="state">
                  <div data-ng-switch-when="TO_BE_DONE">
                    <p>
                      <span th:text="#{'Are you sure you would like to delete the connector configuration'}">
                        Are you sure you would like to delete the connector configuration</span>
                      <strong>{{ configuration.name }} ({{ configuration.connectorName }})</strong>?
                    </p>
                    <p th:text="#{'This will invalidate all the connected bpmn models'}">
                      This action invalidates the connected bpmn models, too.
                    </p>
                  </div>
                  <div data-ng-switch-when="SUCCESS">
                    <p> 
                     <span th:text="#{The deletion of the connector configuration was successful.}">
                        The deletion of the connector configuration was successful.
                     </span>
                    </p>
                  </div>
                  <div data-ng-switch-when="FAILURE">
                    <p>
                      <span th:text="#{The deletion of the connector configuration failed.}">
                        The deletion of the connector failed.
                      </span>
                    </p>
                  </div>
                </div>
                </div>
                <div class="modal-footer">
                  <button class="btn"
                          data-ng-show="state == 'TO_BE_DONE'"
                          data-ng-click="deleteConnectorConfigurationDialog.close()">Cancel</button>
                  <button class="btn btn-primary"
                          data-req-aware
                          data-ng-show="state == 'TO_BE_DONE'" 
                          data-ng-click="performConnectorDeletion()">Delete</button>
                  <button class="btn btn-primary"
                          data-req-aware
                          data-ng-show="state == 'SUCCESS' || state == 'FAILURE'" 
                          data-ng-click="deleteConnectorConfigurationDialog.close()">OK</button>
                </div>
              </div>
            </modal-dialog>  
            <!-- end delete-connector-configuration-dialog -->
          </div>
        </div>
      </div>
      <div class="push-down"><!-- // --></div> 
    </div>
    <footer th:substituteby="fragment/common :: footer" />
  </body>
</html>
