{{template "base/head" .}}
<div class="user bindphone forgot password" style="margin-top: 20px;">
	<div class="ui middle very relaxed page grid">
		<div class="column">
			<form class="ui form ignore-dirty" action="" method="">
				{{.CsrfTokenHtml}}
				<h2 class="ui top attached header">
				  {{.i18n.Tr "phone.please_bind_your_mobile_number"}}
				</h2>
				<div class="ui attached segment">
					{{template "base/alert" .}}
          <div style="display:none;" class="ui negative message">
            <p></p>
          </div>
          {{if .EnablePhone }}
            <div style="display:flex;justify-content:center;">
              <div class="use-type" usetype="2" autofocus="true" style="width:491px;" showlabel="true" >
                {{template "user/auth/phone_verify" .}}
              </div>
            </div>
            <style>
              .use-type ._label-c {
                display: flex;
              }
            </style>
          {{end}}
          <div class="ui divider"></div>
          <div class="inline field">
            <label></label>
            <button class="ui blue button">{{.i18n.Tr "phone.submit"}}</button>
          </div>
        </div>
			</form>
      <script>
        (function() {
          window.addEventListener('load', function () {
            var bindPhoneEl = $('.bindphone');
            bindPhoneEl.find('button.button').off('click').on('click', function(e) {
              var phoneNumber  = bindPhoneEl.find('input.phoneNumber').val();
              var verifyCode  = bindPhoneEl.find('input.verifyCode').val();
              if (phoneNumber && verifyCode) {
                e.preventDefault();
                if (!/^1[3578]\d{9}$/.test(phoneNumber)) {
                  bindPhoneEl.find('.ui.negative.message').show().find('p').text({{.i18n.Tr "phone.please_enter_the_correct_mobile_number"}});
                  return;
                }
                if (!/^\d{6}$/.test(verifyCode)) {
                  bindPhoneEl.find('.ui.negative.message').show().find('p').text({{.i18n.Tr "phone.please_enter_the_correct_mobile_phone_verification_code"}});
                  return;
                }
                $.ajax({
                  url: '/bindPhone',
                  type: 'post',
                  dataType: 'json',
                  data: {
                    _csrf: bindPhoneEl.find('input[name="_csrf"]').val(),
                    phone_number: phoneNumber,
                    verify_code: verifyCode
                  },
                  success: function(res) {
                    if (res && res.Code === 0) {
                      window.location.href = '/dashboard';
                    } else {
                      bindPhoneEl.find('.ui.negative.message').show().find('p').text(res.Message);
                    }
                  },
                  error: function(err) {
                    console.log(err);
                  }
                });
              }
            });
          });
        })();
      </script>
		</div>
	</div>
</div>
{{template "base/footer" .}}