<div id="edit-password" v-cloak>

  <div class="container-fluid px-5">

    <div class="d-flex justify-content-between">
      <div class="d-flex align-self-center">
        <h3>
          <%= __("Update password") %>
        </h3>

        <a class="btn btn-light ms-2" href="/account">
          <%= __('Go Back'); %>
            <span class="fa fa-arrow-left"></span>
        </a>
      </div>
    </div>

    <hr>

    <account-notification-banner></account-notification-banner>

  </div>

  <div class="container">
    <ajax-form action="updatePassword" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData"
      :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="password">
            <%=__('New password')%>
          </label>
          <input class="form-control" id="password" name="password" type="password"
            :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" placeholder="••••••••"
            autocomplete="new-password" focus-first>
          <div class="invalid-feedback" v-if="formErrors.password">
            <%=__('Please enter a password')%>.
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group">
          <label for="confirm-password">
            <%=__('Confirm password')%>
          </label>
          <input class="form-control" id="confirm-password" name="confirm-password" type="password"
            :class="[formErrors.confirmPassword ? 'is-invalid' : '']" v-model.trim="formData.confirmPassword"
            autocomplete="new-password" placeholder="••••••••">
          <div class="invalid-feedback" v-if="formErrors.confirmPassword">
            <%=__('Your new password and confirmation')%>
          </div>
        </div>
      </div>

      <ajax-button type="submit" :syncing="syncing" class="btn btn-success mt-4">
        <span class="fa fa-save pe-2"></span>
        <%= __('Save') %>
      </ajax-button>

    </ajax-form>
  </div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>