
<div class="admin-page">
<div class="usa-alert usa-alert-error" role="alert" ng-show="vm.loadingError">
  <div class="usa-alert-body">
    <h3 class="usa-alert-heading">Error</h3>
    <p class="usa-alert-text">An error occurred while loading accounts.</p>
  </div>
</div>
<!--
<div class="admin-filter">
    <label for="user_filter_name">Search by Email</label>
    <input id="user_filter_name" name="user_filter_name" type="text" ng-model="email" ng-change="gridActions.filter()" filter-by="email" filter-type="text">
</div>
-->
<div class="admin-table-block" grid-data grid-options="gridOptions" grid-actions="gridActions">
<table class="usa-table-borderless" ng-show="accounts.length">
  <thead>
    <tr>
      <th sortable="email" scope="col" class="sortable">Email</th>
      <th scope="col">Role(s)</th>
      <th scope="col" style="width: 400px">Resend Confirmation Email</th>
      <th scope="col" style="width: 400px">Resend Authentication Code</th>
      <th scope="col" style="width: 400px">Reset Password</th>
      <th scope="col"></th>
    </tr>
  </thead>

  <tbody>
  <tr ng-repeat="account in accounts">
      <td scope="row">{{ account.email }}</td>
      <td scope="row">
        <span ng-repeat="role in account.roles">{{role.name}}{{$last ? '' : ', '}}</span>
      </td>
      <td>
        <button class="green-button" style="width:160px; margin-left: 0px;"
                ng-show="stateService.hasClaim('UserManagement.ModifyAccount')"
                ng-click="showModal('resendEmailModalIsVisible', account)">Resend Email</button>
      </td>
      <td>
        <button class="green-button" style="width:160px; margin-left: 0px;"
                ng-show="stateService.hasClaim('UserManagement.ModifyAccount')"
                ng-click="showModal('resendCodeModalIsVisible', account)">Resend Code</button>
      </td>
      <td>
        <button class="green-button" style="width:180px; margin-left: 0px;"
                ng-show="stateService.hasClaim('UserManagement.ModifyAccount')"
                ng-click="showModal('resetPasswordModalIsVisible', account)">Reset Password</button>
      </td>
      <td>
        <button class="green-button" style="width:160px; margin-left: 0px;"
                ng-click="vm.editAccountClick(account.userId)"
                ng-show="stateService.hasClaim('UserManagement.ModifyAccount')">Edit /View</button>
      </td>
    </tr>
  </tbody>
</table>


<div ng-class="{'is-visible': modalIsVisible}" class="adminModal">
  <header class="cd-panel-header">
    <a ng-click="closeModal()" class="modal-close dol-close-button"></a>
    <br />
  </header>
  <div ng-show="resendCodeModalIsVisible">
    <h3 class="usa-alert-heading">Are you sure you want to resend a 2FA code for {{userEmail}}?</h3>
  </div>
  <div ng-show="resendEmailModalIsVisible">
    <h3 class="usa-alert-heading">Are you sure you want to resend a confirmation email for {{userEmail}}?</h3>
  </div>
  <div ng-show="resetPasswordModalIsVisible">
    <h3 class="usa-alert-heading">Please enter and confirm a new password for {{userEmail}}.</h3>
    <div ng-class="vm.passwordRequired || vm.passwordsDontMatch || vm.passwordComplexity ? 'usa-input-error' : ''">
      <label for="password">Password</label>
      <span class="usa-input-error-message" id="input-error-message" role="alert" tabindex="0" ng-show="vm.passwordRequired || vm.passwordsDontMatch">
        <div ng-show="vm.passwordRequired">
          <p>Password is required.</p>
        </div>
        <div ng-show="vm.passwordsDontMatch">
          <p>Passwords do not match.</p>
        </div>
      </span>
      <input type="{{inputType}}" name="password" id="password" ng-model="password" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false" />
      <div class="dol-password-help">
        <div class="usa-content">
          <div class="showpass">
            <a href="" ng-click="hideShowPassword()" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false">
              <span ng-show="inputType != 'password'">Hide</span>
              <span ng-show="inputType === 'password'">Show</span> Password
            </a>
          </div>
        </div>
      </div>
    </div>
    <div ng-class="vm.passwordRequired || vm.passwordsDontMatch || vm.passwordComplexity ? 'usa-input-error' : ''">
      <label for="confirmPassword">Confirm Password</label>
      <input type="password" name="confirmPassword" id="confirmPassword" ng-model="confirmPassword" ng-focus="vm.showPasswordHelp=true" ng-blur="vm.showPasswordHelp=false" />
    </div>
  </div>
  <p ng-show="vm.update.status == 'Success'">
    <h4>{{vm.update.message}}</h4>
    <br/>
  </p>
  <p ng-show="vm.update.status == 'Initialize'">
    <button ng-click="submit()" class="green-button">Ok</button>
    <button ng-click="closeModal()" class="red-button">Cancel</button>
  </p>
  <p ng-show="vm.update.status != 'Initialize'">
    <button ng-click="closeModal()" class="green-button">Close</button>
  </p>
</div>
<div ng-if="modalIsVisible" class="modal-backdrop"></div>
</div>
