<!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="ProfileController">
            <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 data-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-show="connectorConfiguration.loginMode == 'USER' && !showEditAction(connectorConfiguration)" data-ng-click="addConnectorCredentials(connectorConfiguration)" th:text="#{add credentials}">add credentials</a>
                    <a data-ng-show="connectorConfiguration.loginMode == 'USER' && showEditAction(connectorConfiguration)" data-ng-click="editConnectorCredentials(connectorConfiguration)" th:text="#{edit credentials}">edit credentials</a>
                  </td>
                </tr>
                <tr ng-show="!connectorConfigurations.length">
                  <td colspan="5">
                    No connectors configured
                  </td>
                </tr>
              </tbody>
            </table>

            <a class="btn" data-ng-click="changePassword()"><span th:text="#{Change Account Password}">Change Account Password</span></a>

            <!-- begin add/edit user-specific-connector-credentials-dialog -->
            <modal-dialog model="connectorCredentialsDialog" ng-cloak>
              <div class="modal hide" data-ng-controller="EditConnectorCredentials" data-ngm-if="connectorCredentialsDialog.renderHtml()"> 
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h3 data-ng-show="mode == 'ADD'" th:text="#{'Add user credentials'}"></h3>
                  <h3 data-ng-show="mode == 'EDIT'" th:text="#{'Edit user credentials'}"></h3>
                </div>
                <div class="modal-body">
                  <div data-error-panel></div>
                  <div class="alert alert-error" data-ng-show="credentialsTest.state == 'IN_ERROR'">
                    <button type="button" class="close" data-ng-click="credentialsTest = null">&times;</button>
                    <span>
                      <strong th:text="#{Invalid Credentials:}"></strong>
                      {{ credentialsTest.message }}
                    </span>
                  </div>
                  <div class="alert alert-success" data-ng-show="credentialsTest.state == 'OK'">
                    <button type="button" class="close" data-ng-click="credentialsTest = null">&times;</button>
                    <span>
                      <strong th:text="#{Valid Credentials:}"></strong>
                      Using the connector worked
                    </span>
                  </div>
                  <form class="form-horizontal" novalidate data-ng-submit="save()" name="editConnectorCredentialsForm">
                    <fieldset>
                      <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 data-ng-model="editCredentials.username"/>
                        </div> 
                      </div>
                      <div class="control-group">
                        <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 data-ng-model="editCredentials.password"/>
                        </div> 
                      </div>
                    </fieldset>
                  </form>
                </div>
                <div class="modal-footer">
                  <button class="btn" data-ng-click="connectorCredentialsDialog.close()" th:text="#{Cancel}">Cancel</button>
                  <button class="btn" data-ng-click="test()" data-ng-disabled="!isValid()" th:text="#{Test}" data-req-aware="editConnectorCredentialsForm">Test</button>
                  <button class="btn btn-primary" data-ng-click="save()" data-ng-disabled="!isValid()" th:text="#{Save}" data-req-aware="editConnectorCredentialsForm">Save</button>
                </div>
              </div>
            </modal-dialog>
            <!-- end add/edit user-specific-connector-credentials-dialog -->

            <!-- begin change-password-dialog -->
            <modal-dialog model="changePasswordDialog" ng-cloak>
              <div class="modal hide" data-ng-controller="ChangePasswordController" data-ngm-if="changePasswordDialog.renderHtml()"> 
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h3 th:text="#{'Change Password'}"></h3>
                </div>
                <div class="modal-body">
                  <div data-error-panel></div>
                  <div class="alert alert-error" data-ng-show="passwordChange.state == 'ERROR'">
                    <button type="button" class="close" data-ng-click="passwordChange.state = null">&times;</button>
                    <span>
                      <strong th:text="#{Changing the password failed}"></strong>
                      Your credentials could not be changed. Please try again.
                    </span>
                  </div>
                  <div class="alert alert-success" data-ng-show="passwordChange.state == 'SUCCESS'">
                    <span>
                      <strong th:text="#{Password changed}"></strong>
                      Your new credentials are now valid.
                    </span>
                  </div>
                  <form ng-show="!passwordChange.state" class="form-horizontal" novalidate data-ng-submit="save()" name="changePasswordForm">
                    <fieldset>
                      <div class="control-group" ng-class="errorClass(changePasswordForm.oldPassword)">
                        <label class="control-label" for="oldPassword" 
                               th:text="#{'Old Password'}">Old Password</label>
                        <div class="controls">
                          <input id="oldPassword" name="oldPassword" required type="password" class="span6" data-ng-model="passwordChange.data.oldPassword" />
                        </div>
                      </div>
                      <div class="control-group" ng-class="errorClass(changePasswordForm.repetition)">
                        <label class="control-label" for="password" 
                               th:text="#{'New Password'}">New Password</label>
                        <div class="controls">
                          <input id="password" name="password" type="password" class="span6" data-ng-model="passwordChange.data.newPassword" />
                        </div>
                      </div>
                      <div class="control-group" ng-class="errorClass(changePasswordForm.repetition)">
                        <label class="control-label" for="password-repetition" 
                               th:text="#{'New Password (repeated)'}">New Password (repeated)</label>
                        <div class="controls">
                          <input id="password-repetition" name="repetition" type="password" required class="span6" matches="passwordChange.data.newPassword" data-ng-model="passwordChange.newPasswordRepetition"/>
                          <p class="help-block" ng-show="changePasswordForm.repetition.$error.matches">Password and repetition do not match</p>
                        </div>
                      </div>
                    </fieldset>
                  </form>
                </div>
                <div class="modal-footer">
                  <button class="btn" data-ng-click="changePasswordDialog.close()" th:text="#{Cancel}">Cancel</button>
                  <button class="btn btn-primary" data-ng-click="save()" data-ng-disabled="!isValid(changePasswordForm)" th:text="#{Change}" data-req-aware="changePasswordForm">Change</button>
                </div>
              </div>
            </modal-dialog>
            <!-- end change-password-dialog -->
          </div>
        </div>
      </div>
      <div class="push-down"><!-- // --></div> 
    </div>
    <footer th:substituteby="fragment/common :: footer" />
  </body>
</html>
