<div class="configSection" data-ng-controller="AdminUsersCtrl">
  <div>
    <span data-translate>Users</span>
    <button class="btn btn-sm btn-primary show-add-user-btn" data-ng-click="toggleAddUser()">
      <i class="fa-solid fa-plus"></i>
      <span data-translate>Add</span>
    </button>
  </div>
  <div class="row" data-ng-controller="AdminUserAddCtrl" data-ng-show="showAddUser">
    <div data-ng-form="newUser" class="addUser col-md-6">
      <div class="form-group">
        <label data-translate>Role</label>
        <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
        <div>
          <select name="role" class="form-control" data-ng-model="new_user.role" required>
            <option value="admin" data-translate>Admin</option>
            <option value="receiver" data-translate>Recipient</option>
            <option data-ng-if="resources.node.enable_custodian" value="custodian" data-translate>Custodian</option>
          </select>
        </div>
      </div>
      <div class="form-group" data-ng-if="new_user.role !== 'receiver' || !resources.node.simplified_login">
        <label data-translate>Username</label>
        <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
        <div>
          <input class="form-control" name="username" data-ng-model="new_user.username" type="text" required/>
        </div>
      </div>
      <div class="form-group">
        <label data-translate>Name</label>
        <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
        <div>
          <input class="form-control" name="name" data-ng-model="new_user.name" type="text" required/>
        </div>
      </div>
      <div class="form-group">
        <label data-translate>Email address</label>
        <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
        <div>
          <input class="form-control" name="email" data-ng-model="new_user.email" data-ng-pattern="CONSTANTS.email_regexp" type="email" data-ng-class="{'is-invalid': newUser.email.$error.pattern}" required/>
        </div>
        <div class="text-danger" data-ng-show="newUser.email.$error.pattern" data-translate>Invalid email address</div>
      </div>
      <div class="form-group">
        <button id="add-btn" class="btn btn-primary" data-ng-disabled="newUser.$invalid"
                data-ng-click="add_user(); toggleAddUser()" type="submit">
          <i class="fa-solid fa-plus"></i>
          <span data-translate>Add</span>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="userList" data-ng-repeat="user in resources.users | orderBy:'name'">
  <form id="user-{{$index}}" name="editUser" data-ng-controller="AdminUserEditorCtrl" novalidate>
    <div class="configItem">
      <div class="editorHeader row" data-ng-click="toggleEditing(); $event.stopPropagation();">
        <span class="col-md-7">
          <span>{{user.name}}</span>
          <span class="badge badge-primary">
            <span data-ng-switch="user.role">
              <span data-ng-switch-when="admin" data-translate>Admin</span>
              <span data-ng-switch-when="receiver" data-translate>Recipient</span>
              <span data-ng-switch-when="custodian" data-translate>Custodian</span>
            </span>
          </span>
          <span class="badge badge-secondary" data-ng-if="!user.enabled" data-translate>Disabled</span>
	  <span class="badge badge-default" data-ng-if="resources.node.encryption && !user.encryption" data-uib-tooltip="{{'This user has not performed the first login yet.' | translate}}">
	    <i class="fa-solid fa-exclamation-circle"></i>
	  </span>
        </span>
        <span class="col-md-5 clearfix">
          <span class="float-right">
            <button class="btn btn-sm btn-outline-secondary"
              data-ng-show="!editing"
              data-ng-click="toggleEditing(); $event.stopPropagation();">
              <span data-translate>Edit</span>
            </button>
            <button class="btn btn-sm btn-primary"
              data-ng-show="editing"
              data-ng-disabled="editUser.$invalid"
              data-ng-click="saveUser()">
              <span data-translate>Save</span>
            </button>
            <button class="btn btn-sm btn-outline-secondary"
              data-ng-show="editing"
              data-ng-click="toggleEditing(); $event.stopPropagation();">
              <span data-translate>Cancel</span>
            </button>
            <button class="btn btn-sm btn-danger"
              data-ng-if="Authentication.session.user_id !== user.id"
              data-ng-click="deleteUser(); $event.stopPropagation();">
              <span data-translate>Delete</span>
            </button>
          </span>
        </span>
      </div>
      <div class="editor" data-ng-if="editing">
        <hr/>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <div data-image-upload data-image-upload-model="user" data-image-upload-model-attr="picture" data-image-upload-id="{{user.id}}"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group" data-ng-if="user.role !== 'receiver' || !resources.node.simplified_login">
              <label data-translate>Username</label>
              <input class="form-control" name="username" data-ng-model="user.username" type="text" required/>
              <div class="text-danger" data-ng-show="editUser.name.$error.required" data-translate>This field is mandatory</div>
            </div>
            <div class="form-group">
              <label data-translate>Name</label>
              <input class="form-control" name="name" data-ng-model="user.name" type="text" required/>
              <div class="text-danger" data-ng-show="editUser.name.$error.required" data-translate>This field is mandatory</div>
            </div>
            <div class="form-group">
              <label data-translate>Public name</label>
              <input class="form-control" name="public_name" data-ng-model="user.public_name" type="text" required/>
            </div>
            <div class="form-group">
              <label data-translate>Description</label>
              <textarea name="description" class="form-control" data-ng-model="user.description"></textarea>
            </div>
            <div class="form-group">
              <label data-translate>Email address</label>
              <input class="form-control" name="email" data-ng-model="user.mail_address" type="email"
                     data-ng-pattern="CONSTANTS.email_regexp" required/>
              <div class="text-danger" data-ng-show="editUser.email.$error.required" data-translate>This field is mandatory</div>
              <div class="text-danger" data-ng-show="editUser.email.$error.pattern" data-translate>Invalid email address</div>
            </div>
            <div class="form-group" data-ng-if="Authentication.session.user_id !== user.id">
              <label data-translate>Password</label>
              <div>
                <span class="btn btn-outline-secondary" data-ng-click="resetUserPassword()">
                  <i class="fa-solid fa-sync"></i>
                  <span data-ng-if="user.last_login === '1970-01-01T00:00:00Z'" data-translate>Send activation link</span>
                  <span data-ng-if="user.last_login !== '1970-01-01T00:00:00Z'" data-translate>Send reset link</span>
                </span>
                <span class="btn btn-outline-secondary"
                      data-ng-if="!user.encryption || resources.preferences.escrow"
                      data-ng-init="user.newpassword = false"
                      data-ng-click="user.newpassword=!user.newpassword">
                  <i class="fa-solid fa-edit"></i>
                  <span data-translate>Set password</span>
                </span>
              </div>
              <div class="form-group" data-ng-if="user.newpassword" data-ng-form="userPasswordForm">
                <input class="d-none" type="password" name="disable-autocomplete-hack" />
                <span class="input-group">
                  <input name="password" class="form-control" data-ng-model="setPasswordArgs.password" type="password"
                         data-ng-class="{'is-invalid': setPasswordArgs.password && (!userPasswordForm.password.$error.passwordStrengthValidator && !userPasswordForm.password.$valid)}"
                         autocomplete="off" data-password-strength-validator/>
                  <span class="input-group-append">
                    <button id="setPasswordButton" class="btn btn-primary" data-ng-click="setPassword()">
                      <i class="fa-solid fa-tag"></i>
                      <span data-translate>Set password</span>
                    </button>
                  </span>
                </span>

                <password-meter data-ng-show="passwordStrengthScore" value="passwordStrengthScore"></password-meter>
                <div class="text-danger" data-ng-show="passwordStrengthScore && passwordStrengthScore < 2">
                  <p data-translate>The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.</p>
                </div>
              </div>
            </div>
            <div class="form-group">
              <input data-ng-model="user.enabled" type="checkbox" />
              <label data-translate>Enabled</label>
            </div>
            <div class="form-group">
              <input data-ng-model="user.password_change_needed" type="checkbox" />
              <label data-translate>Force password change</label>
              <div data-ng-show="changePasswordArgs.password_change_needed">
                <span class="badge badge-primary" data-translate>Enabled</span>
                <span data-translate>The user will be forced to change its password on next login.</span>
              </div>
            </div>
            <div class="form-group" data-ng-if="user.two_factor">
              <span class="btn btn-danger" data-ng-click="disable2FA()">
                <i class="fa-solid fa-ban"></i>
                <span data-translate>Disable two factor authentication</span>
              </span>
            </div>
            <div class="form-group">
              <label data-translate>Language</label>
              <select class="form-control" data-ng-model="user.language"
                      data-ng-options="item.code as item.name for item in languages_enabled_selector"></select>
            </div>
            <div class="form-group" data-ng-if="(user.role === 'admin' && !resources.node.disable_admin_notification) ||
                                                (user.role === 'receiver' && !resources.node.disable_receiver_notification) ||
                                                (user.role === 'custodian' && !resources.node.disable_custodian_notification)">
              <input data-ng-model="user.notification" type="checkbox">
              <label data-translate>Enable email notifications</label>
            </div>
          </div>
	</div>
        <div class="row">
          <div class="col-md-12">
            <div class="form-group" data-ng-show="user.pgp_key_fingerprint">
              <div class="form-group">
                <label data-translate>Details of the PGP key:</label>
                <p><span data-translate>Fingerprint</span>: <span>{{user.pgp_key_fingerprint}}</span></p>
                <p><span data-translate>Expiration date</span>: {{user.pgp_key_expiration | date:"dd/MM/yyyy"}}</p>
              </div>
              <div class="form-group">
                <input data-ng-model="user.pgp_key_remove" type="checkbox"/>
                <label data-translate>Remove</label>
              </div>
            </div>
            <div class="form-group" data-ng-show="user.pgp_key_fingerprint === ''">
              <div class="position-relative">
                <label data-translate>Set up encryption by providing a PGP public key</label>
                <div>
                  <label file-input="loadPublicKeyFile(file)" file-input-label="Upload"
                         class="btn btn-sm btn-outline-secondary"></label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row" data-ng-if="user.role === 'admin'">
          <div class="col-md-12">
            <div class="form-group" data-ng-if="resources.node.escrow && user.encryption && resources.preferences.escrow">
              <input data-ng-model="user.escrow" type="checkbox" data-ng-change="toggleUserEscrow()" data-ng-disabled="Authentication.session.user_id === user.id">
              <label data-translate>Give this admin ability to change user passwords</label>
            </div>
          </div>
        </div>
        <div class="row" data-ng-if="user.role === 'receiver'">
          <div class="col-md-12">
            <div class="form-group">
              <input data-ng-model="user.forcefully_selected" type="checkbox">
              <label data-translate>Forcefully selected</label>
            </div>
            <div class="form-group">
              <input data-ng-model="user.can_delete_submission" type="checkbox"/>
              <label data-translate>Allow the recipient to delete reports</label>
            </div>
            <div class="form-group" data-ng-if="!resources.node.can_postpone_expiration">
              <input data-ng-model="user.can_postpone_expiration" type="checkbox"/>
              <label data-translate>Allow the recipient to postpone the report expiration date</label>
            </div>
            <div class="form-group">
              <input data-ng-model="user.can_grant_access_to_reports" type="checkbox"/>
              <label data-translate>Give this recipient ability to grant user access to reports</label>
            </div>
          </div>
        </div>
        <div class="row" data-ng-if="user.role !== 'admin'">
          <div class="col-md-12">
            <label data-translate>Give the user administrative access to the following features:</label>
            <div class="form-group">
              <input data-ng-model="user.can_edit_general_settings" type="checkbox"/>
              <span data-translate>Settings</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
