<div class="col-4 pmf-personal-gravatar">
  <div class="text-center">{{ ucpGravatarImage }}</div>
</div>
<div class="col-8 pmf-personal-info">
  <div id="userdatas"></div>

  <form id="formValues" action="#" method="post">
    <input type="hidden" name="userid" value="{{ userid }}" />
    <input type="hidden" name="csrf" value="{{ csrf }}" />

    <div class="form-group row">
      <label class="col-lg-4 form-control-label" for="name">{{ msgRealName }}:</label>
      <div class="col-lg-8 controls">
        <input type="text" name="name" id="name" tabindex="1" value="{{ realname }}" class="form-control" required {{ readonly }}>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-lg-4 form-control-label" for="email">{{ msgEmail }}:</label>
      <div class="col-lg-8 controls">
        <input type="email" name="email" id="email" tabindex="2" value="{{ email }}" class="form-control" required {{ readonly }}>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-lg-4 form-control-label" for="password">{{ msgPassword }}:</label>
      <div class="col-lg-8 controls">
        <input type="password" autocomplete="off" name="password" id="password" tabindex="3" class="form-control" {{ readonly }}>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-lg-4 form-control-label" for="password_confirm">{{ msgConfirm }}:</label>
      <div class="col-lg-8 controls">
        <input
          type="password"
          autocomplete="off"
          name="password_confirm"
          id="password_confirm"
          tabindex="4"
          class="form-control"
          {{ readonly }}
        >
      </div>
    </div>

    <div class="form-group row">
      <div class="offset-4 col-lg-8">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="is_visible" name="is_visible" {{ checked }}>
          <label class="form-check-label" for="is_visible"> {{ msgIsVisible }} </label>
        </div>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-lg-12 text-right">
        <button class="btn btn-primary" type="submit" id="submituserdata">{{ msgSave }}</button>
      </div>
    </div>
  </form>

  <div id="loader"></div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    $('#submituserdata').on('click', () => {
      saveFormValues('saveuserdata', 'userdata');
    });
    $('form#formValues').submit(() => false);
  });
</script>