extends ../layout
block content
  .container
    .row.flashMessage.negative-30
        .col-xs-12
            #flash-board.alert.fade.in(style='display: none;')
                button.close(type='button', data-dismiss='alert')
                    span.ion-close-circled#flash-close
                #flash-content
  h2.text-center Update your email address here:
  form.form-horizontal.update-email(method='POST', action='/api/users/#{user.id}/update-email', name="updateEmailForm")
    .row
      .col-sm-6.col-sm-offset-3
        input(type='hidden', name='_csrf', value=_csrf)
        .form-group
          input.input-lg.form-control(type='email', name='email', id='email', value=user.email || '', placeholder=user.email || 'Enter your new email', autofocus, required, autocomplete="off")
        .form-group
          button.btn.btn-lg.btn-primary.btn-block(type='submit')= !user.email || user.emailVerified ? 'Update my Email' : 'Verify Email'
          a.btn.btn-lg.btn-block.btn-primary.btn-link-social(href='/settings')
            | Go back to Settings

    script.
       $(document).ready(function() {
        $('form').submit(function(event){
          event.preventDefault();
          $('#flash-board').hide();
          var $form = $(event.target);
          $.ajax({
              type        : 'POST',
              url         : $form.attr('action'),
              data        : $form.serialize(),
              dataType    : 'json',
              encode      : true,
              xhrFields   : { withCredentials:  true }
          })
          .fail(error => {
            if (error.responseText){
                var data = JSON.parse(error.responseText);
                if(data.error && data.error.message)
                $('#flash-content').html(data.error.message);
                $('#flash-board')
                  .removeClass('alert-success')
                  .addClass('alert-info')
                  .fadeIn();
              }
          })
          .done(data =>{
            if(data && data.message){
              $('#flash-content').html(data.message);
              $('#flash-board')
                  .removeClass('alert-info')
                  .addClass('alert-success')
                  .fadeIn();
            }
          });
        });
       });