<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->
<script id='redback/user-edit-tmpl' type='text/html'>
  <div id="edit-user-details-pills">
    <ul id="edit_user_details_pills_headers" class="nav nav-pills" data-target="#edit-user-details-pills-content">
      <li class="active" id="user-view-detail-li">
        <a data-toggle="tab" href="#user-create-div">${$.i18n.prop('edit')}</a>
      </li>
      <li id="user-edit-roles-edit-li">
        <a data-toggle="tab" href="#user-edit-roles-edit">${$.i18n.prop('effective.roles.edit')}</a>
      </li>
    </ul>
    <div class="pill-content" id="edit-user-details-pills-content">
      <div id="user-create-div" class="active pill-pane">
        <div class="row-fluid">
          <div class="span8 columns">
            <form id="user-create" class="well form-horizontal" data-bind="submit: save">
              <fieldset id="user-create-fieldset">
                <div class="control-group">
                  <label class="control-label" for="username">${$.i18n.prop('username')}</label>

                  <div class="controls" id="username-div">
                    {{if $data.username.length>0}}
                    <span class="uneditable-input">${$data.username}</span>
                    {{else}}
                    <input type="text" id="username" name="username" size="30" class="required"
                           data-bind="value: username"/>
                    {{/if}}
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>

                  <div class="controls">
                    <input type="text" id="fullname" name="fullname" size="30" class="required"
                           data-bind="value: fullName"/>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="password">${$.i18n.prop('password')}</label>

                  <div class="controls">
                    <input type="password" id="password" name="password" class="required" data-bind="value: password"/>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="confirmPassword">${$.i18n.prop('confirm.password')}</label>

                  <div class="controls">
                    <input type="password" id="confirmPassword" name="confirmPassword"
                           data-bind="value: confirmPassword"/>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="email">${$.i18n.prop('email.address')}</label>

                  <div class="controls">
                    <input type="text" id="email" name="email" class="required email" data-bind="value: email"/>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="validated">${$.i18n.prop('validated')}</label>

                  <div class="controls">
                    <input type="checkbox" id="validated" name="validated" data-bind="checked: validated"/>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="locked">${$.i18n.prop('locked')}</label>

                  <div class="controls">
                    <input type="checkbox" id="locked" name="locked" data-bind="checked: locked"/>
                  </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="passwordChangeRequired">${$.i18n.prop('user.change.password.required')}</label>

                  <div class="controls">
                    <input type="checkbox" id="passwordChangeRequired" name="passwordChangeRequired"
                           data-bind="checked: passwordChangeRequired"/>
                  </div>
                </div>
              </fieldset>
              <button data-bind="click: saveUser" class="btn" id="user-create-form-register-button">
                ${$.i18n.prop('save')}
              </button>
              <button class="btn" id="user-create-form-cancel-button">${$.i18n.prop('cancel')}</button>
            </form>
          </div>
          <div class="span4 columns" id="user-edit-roles">
            <div id="user-edit-roles-view"></div>
          </div>
        </div>
      </div>

      <div id="user-edit-roles-edit" class="pill-pane">
        roles edit
      </div>
    </div>
  </div>
</script>

<script id="user_view_roles_list_tmpl" type="text/html">
  <div class="page-header">
    <h3>${$.i18n.prop('effective.roles')}</h3>
  </div>
  <div>
    <ul>
      {{each $data.user.assignedRoles}}
      <li>${$value}</li>
      {{/each}}
    </ul>
  </div>
</script>

<script id="user_edit_roles_tmpl" type="text/html">

  <div>
    {{each $data.applicationRoles}}
    <div class="page-header">
      <h3>${$value.name}</h3>
    </div>
    <blockquote>
      <p>${$value.description}</p>
    </blockquote>
    <ul>
      {{each $value.globalRoles}}
      <li><input type="checkbox" value="${$value}" data-bind="checked: user.assignedRoles">&nbsp;${$value}</input></li>
      {{/each}}
    </ul>

    {{if roleTemplates}}
    <table class="bordered-table">
      <thead>
      <tr>
        <th>&nbsp;</th>
        {{each roleTemplates}}
        <th>${$value.namePrefix}</th>
        {{/each}}
      </tr>
      </thead>
      <tbody>
      {{each resources}}
      {{var curResource = $value}}
      <tr>
        <td>${curResource}</td>
        {{each roleTemplates}}
        <td><input type="checkbox" value="${$value.namePrefix}${$value.delimiter}${curResource}"
                   data-bind="checked: user.assignedRoles"/></td>
        {{/each}}
      </tr>
      {{/each}}
      </tbody>
    </table>
    {{/if}}

    {{/each}}

    <button class="btn" data-bind="click:updateUserRoles">${$.i18n.prop('update')}</button>

  </div>
</script>

<script id='ko_usersGrid_grid' type='text/html'>

  <thead>
    <tr>
      {{each(i, columnDefinition) columns}}
      <th>${columnDefinition.headerText}
        <button id="users-header-${columnDefinition.rowText}" class="btn">
          ${$.i18n.prop('users.sort.generic')}
        </button>
      </th>
      {{/each}}
      <th>${$.i18n.prop('edit')}</th>
      <th>${$.i18n.prop('delete')}</th>
      <th>${$.i18n.prop('user.list.locked')}</th>
      <th>${$.i18n.prop('user.change.password.required')}</th>
    </tr>
    <tr>
      {{each(i, columnDefinition) columns}}
      <th>
        {{if columnDefinition.filter }}
        <input type="text" class="twitter-typeahead" id="users-grid-filter-auto-${columnDefinition.rowText}"
               placeholder="${$.i18n.prop('users.grid.filter')}"/>
        {{/if}}
      </th>
      {{/each}}
      <th></th>
      <th></th>
      <th>
        <div class="btn-group" style="vertical-align: top; padding-bottom: 9px;">
          <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
            Filter
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#" class="cursor-hand" data-bind="click: clearFilters">${$.i18n.prop('users.grid.filter.all')}</a></li>
            <li><a href="#" class="cursor-hand" data-bind="click: filterLocked">${$.i18n.prop('users.grid.filter.locked')}</a></li>
            <li><a href="#" class="cursor-hand" data-bind="click: filterNonLocked">${$.i18n.prop('users.grid.filter.not.locked')}</a></li>
          </ul>
        </div>
      </th>
      <th>
        <div class="btn-group" style="vertical-align: top; padding-bottom: 9px;">
          <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
            Filter
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#" class="cursor-hand" data-bind="click: clearFilters">${$.i18n.prop('users.grid.filter.all')}</a></li>
            <li><a href="#" class="cursor-hand" data-bind="click: filterPasswordChangeRequired">${$.i18n.prop('users.grid.filter.pwd.change.required')}</a></li>
            <li><a href="#" class="cursor-hand" data-bind="click: filterPasswordChangeNotRequired">${$.i18n.prop('users.grid.filter.pwd.change.not.required')}</a></li>
          </ul>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
  {{each(i, row) itemsOnCurrentPage()}}
  <tr data-bind="css:{ 'modified': row.modified()}">
    {{each(j, columnDefinition) columns}}
    <td>
      ${ typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) : row[columnDefinition.rowText] }
    </td>
    {{/each}}
    <td id="users-grid-user-id-${row.username()}">
      <a href="#" data-bind="click: function(){ editUserBox(row) }">
        <span class="btn btn-primary">
          <i class="icon-pencil icon-white"/>
        </span>
      </a>
    </td>
    {{if row.username()=="admin" || row.username()=="guest"}}
    <td></td>
    {{else}}
    <td>
      <a href="#" data-bind="click: function(){ deleteUser(row) }" id="users-grid-delete-${row.username()}">
        <span class="btn btn-danger">
          <i class="icon-trash icon-white"/>
        </span>
      </a>
    </td>
    {{/if}}

    {{if row.locked()==true}}
    <td>
      <a href="#" data-bind="click: function(){ unlock(row) }">
        <img src="images/system-lock-screen-22-22.png" title="${$.i18n.prop('users.grid.unlock')}"/>
      </a>
    </td>
    {{else}}
    <td>
      <a href="#" data-bind="click: function(){ lock(row) }">
        <img src="images/weather-clear-22-22.png" title="${$.i18n.prop('users.grid.lock')}"/>
      </a>
    </td>
    {{/if}}

    {{if row.username()=="admin"}}
    <td></td>
    {{else}}
    {{if row.passwordChangeRequired()==true}}
    <td>
      <a href="#" data-bind="click: function(){ passwordChangeRequire(row,false) }">
        <img src="images/dialog-error-22-22.png" title="${$.i18n.prop('users.grid.unforceChangePassword')}"/>
      </a>
    </td>
    {{else}}
    <td>
      <a href="#" data-bind="click: function(){ passwordChangeRequire(row,true) }">
        <img src="images/weather-clear-22-22.png" title="${$.i18n.prop('users.grid.forceChangePassword')}"/>
      </a>
    </td>
    {{/if}}
    {{/if}}
  </tr>
  {{/each}}
  </tbody>

</script>

<script id="usersGrid" type="text/html">
  <div class="page-header">
    <h3><img src="images/system-users-32-32.png"/>${$.i18n.prop('users.list')}</h3>
  </div>
  <ul id="users-view-tabs" class="nav nav-tabs" data-target="#users-view-tabs-content">
    <li class="active" id="users-view-tabs-li-users-grid">
      <a data-toggle="tab" href="#users-view">${$.i18n.prop('users.grid.tab.title')}</a>
    </li>
    <li id="users-view-tabs-li-user-edit">
      <a data-toggle="tab" href="#createUserForm" id="users-view-tabs-li-user-edit-a">${$.i18n.prop('add')}</a>
    </li>
  </ul>
  <div id="users-view-tabs-content" class="tab-content">
    <div id="users-view" class="tab-pane">
      <a href="#" class="btn btn-warning" data-bind="click: clearFilters" id="remove-filter-id">${$.i18n.prop('users.grid.filter')}</a>
      <table class="table table-striped table-bordered" id="usersTable"
             data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_usersGrid_grid',pageLinksId:'usersPagination'">
      </table>
      <div id="usersPagination"></div>
    </div>
    <div id="createUserForm" class="tab-pane"></div>
  </div>
</script>

<script id="user-delete-warning-tmpl" type='text/html'>
  <div>
    <span class="label label-warning">${$.i18n.prop('warning.not.undone.operation')}</span>
  </div>
</script>

<script id="rolesTabs" type="text/html">
  <div class="page-header">
    <h2>${$.i18n.prop('roles.management.header')}</h2>
  </div>

  <ul id="roles-view-tabs" class="nav nav-tabs" data-target="roles-view-tabs-content">
    <li class="active" id="roles-view-tabs-li-roles-grid">
      <a data-toggle="tab" href="#roles-view"
         id="roles-view-tabs-a-roles-grid">${$.i18n.prop('roles.grid.tab.title')}</a>
    </li>
    <li id="roles-view-tabs-li-roles-edit">
      <a data-toggle="tab" href="#role-edit">${$.i18n.prop('edit')}</a>
    </li>
  </ul>
  <div id="roles-view-tabs-content" class="tab-content">
    <div id="roles-view" class="tab-pane">
      <div data-bind="style: { display: bulkSave() ? '' : 'none' }">
        <a data-bind="click: updateModifiedRoles" class="btn btn-danger" href="#">${$.i18n.prop('save.all')}</a>
        <br/>
      </div>
      <table class="table table-striped table-bordered" id="rolesTable"
             data-bind="simpleGrid: gridViewModel,simpleGridTemplate:'ko_rolesGrid',pageLinksId:'rolesPagination'">
      </table>
      <div id="rolesPagination"></div>
    </div>
    <div id="role-edit" class="tab-pane" data-bind="template: {name:'editRoleTab',data: currentRole}"></div>
  </div>

</script>

<script id="editRoleTab" type="text/html">
  <div class="accordion" id="edit-role-accordion">
    <div class="accordion-group">
      <div class="accordion-heading">
        <h3>
          <a class="accordion-toggle" href="#role-collapse" data-parent="#edit-role-accordion" data-toggle="collapse">${$.i18n.prop('role')}</a>
        </h3>
      </div>
      <div id="role-collapse" class="accordion-body collapse in">
        <table class="table table-bordered" id="editRoleTable">
          <tbody>
          <tr>
            <td>${$.i18n.prop('name')}:</td>
            <td id="role-edit-name">${$data.name}</td>
          </tr>
          <tr>
            <td>${$.i18n.prop('description')}:</td>
            <td><input type="text" id="role-edit-description" data-bind="value: description"></td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="pull-left">
                <button class="btn" id="role-edit-description-save" data-bind="click: saveRoleDescription">
                  ${$.i18n.prop('save')}
                </button>
              </div>
            </td>
          </tr>
          </tbody>
        </table>

        <div class="page-header">
          <h3>${$.i18n.prop('role.model.parent.roles')}</h3>
        </div>
        {{if $data.parentRoleNames}}
        <ul>
          {{each $data.parentRoleNames}}
          <li>${$value}</li>
          {{/each}}
        </ul>
        {{/if}}

        <div class="page-header">
          <h3>${$.i18n.prop('role.model.child.roles')}</h3>
        </div>
        {{if $data.childRoleNames}}
        <ul>
          {{each $data.childRoleNames}}
          <li>${$value}</li>
          {{/each}}
        </ul>
        {{/if}}

        <div class="page-header">
          <h3>${$.i18n.prop('permissions')}</h3>
        </div>
        {{if $data.permissions}}
        <table class="table table-striped table-bordered" id="rolePermissionsTable">
          <thead>
          <tr>
            <th>${$.i18n.prop('name')}</th>
            <th>${$.i18n.prop('role.operation')}</th>
            <th>${$.i18n.prop('role.resource')}</th>
          </tr>
          </thead>
          <tbody>
          {{each permissions}}
          <tr>
            <td>${$value.name}</td>
            {{if $value.operation }}
            <td>${$value.operation().name}</td>
            {{else}}
            <td></td>
            {{/if}}
            {{if $value.resource }}
            <td>${$value.resource().identifier}</td>
            {{else}}
            <td></td>
            {{/if}}
          </tr>
          {{/each}}
          </tbody>
        </table>
        {{/if}}
      </div>
    </div>
    <div class="accordion-group>">
      <div class="accordion-heading">
        <h3>
          <a class="accordion-toggle" href="#role-users-collapse" data-parent="#edit-role-accordion"
             data-toggle="collapse">${$.i18n.prop('role.edit.section.users')}</a>
        </h3>
      </div>
      <div id="role-users-collapse" class="accordion-body collapse">
        {{if $data.parentsRolesUsers}}
        <div class="page-header">
          <h3>${$.i18n.prop('role.edit.users.defined.in.parent.roles')}</h3>
        </div>
        <ul>
          {{each $data.parentsRolesUsers}}
          <li>${$value.fullName} - ( ${$value.username} - ${$value.email} )</li>
          {{/each}}
        </ul>
        {{/if}}

        <ul id="role-edit-users-tabs" class="nav nav-tabs">
          <li class="active" id="role-view-users-li">
            <a data-toggle="tab" href="#role-view-users">${$.i18n.prop('role.edit.users.list')}</a>
          </li>
          <li id="role-edit-users-li">
            <a data-toggle="tab" href="#role-edit-users">${$.i18n.prop('edit')}</a>
          </li>
        </ul>

        <div class="pill-content" id="role-edit-users-tabs-content">
          <div id="role-view-users" class="active pill-pane">
            <div class="page-header">
              <h3>${$.i18n.prop('role.edit.users.defined.in.current.role')}</h3>
            </div>
            <div id="role-list-users">
              {{if users().length>0}}
              <ul>
                {{each(j, user) users()}}
                <li>${user.fullName()} - ( ${user.username()} - ${user.email()} )</li>
                {{/each}}
              </ul>
              {{else}}
              ${$.i18n.prop('role.edit.no.user.defined')}
              {{/if}}
            </div>
          </div>

          <div id="role-edit-users" class="clearfix ar-multiselect pill-pane">

            <div class="ar-multiselect-column ar-multiselect-left">
              <select data-bind="options: otherUsers ,optionsText: 'username',selectedOptions:selectedOtherUsers"
                      multiple="true" id="role-edit-available-users"></select>
            </div>
            <div class="ar-multiselect-column ar-multiselect-center">
              <ul style="list-style: none">
                <li><input class="btn" id="role-edit-users-add-user" type="button" data-bind="click: addUser"
                           value="&gt;"/></li>
                <li><input class="btn" id="role-edit-users-remove-user" type="button" data-bind="click: removeUser"
                           value="&lt;"/></li>
              </ul>
            </div>
            <div class="ar-multiselect-column ar-multiselect-right">
              <select data-bind="options: users ,optionsText: 'username',selectedOptions:selectedUsers" multiple="true"
                      id="role-edit-affected-users"></select>
            </div>
            <button class="btn" id="role-edit-users-save" data-bind="click: saveUsers">${$.i18n.prop('save')}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>

<script id='ko_rolesGrid' type='text/html'>
  <thead>
  <tr>
    {{each(i, columnDefinition) columns}}
    <th>${ columnDefinition.headerText }</th>
    {{/each}}
    <th>${$.i18n.prop('edit')}</th>
    <th>${$.i18n.prop('save')}</th>
  </tr>
  </thead>
  <tbody>
  {{each(i, row) itemsOnCurrentPage()}}
  <tr data-bind="css:{ 'modified': row.modified()||row.usersModified()}">
    {{each(j, columnDefinition) columns}}
    {{var val = (typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row) :
    row[columnDefinition.rowText])}}
    <td id="role-${columnDefinition.rowText}-${row.name()}">
      ${val}
    </td>
    {{/each}}
    <td>
      <a id="edit-role-${row.name()}" href="#" data-bind="click: function(){ editRole(row) }">
        <span class="btn btn-primary">
          <i class="icon-pencil icon-white"/>
        </span>
      </a>
    </td>
    <td>
      {{if row.modified()}}
      <a href="#" class="btn btn-warning" data-bind="click: function(){ updateRole(row) }">${$.i18n.prop('save')}</a>
      {{/if}}
    </td>
  </tr>
  {{/each}}
</script>


<script type="text/html" id="modal-user-edit-tmpl">

  <form id="user-edit-form" class="form-horizontal">
    <div id="modal-user-edit-err-message" class="alert-message error" style="display:none"></div>
    <fieldset>
      <div class="control-group">
        <label class="control-label" for="username">${$.i18n.prop('username')}</label>

        <div class="controls" id="username-div">
          <span class="uneditable-input" data-bind="text: user.username"></span>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="fullname">${$.i18n.prop('full.name')}</label>

        <div class="controls">
          {{if user.readOnly}}
          <span class="uneditable-input" data-bind="text: user.fullName"></span>
          {{else}}
          <input type="text" id="fullname" name="fullname" size="30" class="required" data-bind="value: user.fullName"/>
          {{/if}}
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="email">${$.i18n.prop('email.address')}</label>

        <div class="controls">
          {{if user.readOnly}}
          <span class="uneditable-input" data-bind="text: user.email"></span>
          {{else}}
          <input type="text" id="email" name="email" size="30" class="required email" data-bind="value: user.email"/>
          {{/if}}
        </div>
      </div>
      <div class="control-group" id="user-edit-form-current-password-div">
        <label class="control-label" for="userEditFormCurrentPassword">${$.i18n.prop('password.existing')}</label>

        <div class="controls">
          <input type="password" id="userEditFormCurrentPassword" name="userEditFormCurrentPassword" class="required"
                 value=""/>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="userEditFormNewPassword">${$.i18n.prop('password.new')}</label>

        <div class="controls">
          <input type="password" id="userEditFormNewPassword" name="userEditFormNewPassword" class="" value=""/>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="userEditFormNewPasswordConfirm">${$.i18n.prop('password.new.confirm')}</label>

        <div class="controls">
          <input type="password" id="userEditFormNewPasswordConfirm" name="userEditFormNewPasswordConfirm" class=""
                 value=""/>
        </div>
      </div>
    </fieldset>
  </form>

</script>

