{if $ErrorMsg}
{include file="error/alert" value="$ErrorMsg"}
{/if}

{if $SuccessMsg}
{include file="error/notifications" value="$SuccessMsg"}
{/if}


<script src="/themes/clientarea/QRuser/assets/js/public.js" type="text/javascript"></script>

<style>
.list-inline-item .icon {
width: 2rem;
height: 2rem;
}
.social-list-item {
border: none;
}
.input-group-prepend {
width: 100px;
}
.allow_login_code_captcha{display:none;}
.auth-full-bg .bg-overlay {
background: url(/themes/clientarea/QRuser/assets_custom/img/new-background.jpg)no-repeat left top / 100% 1400px;
background-size: cover;
opacity:1;
}
.form-control,.input-group-append{
height: 46px;
}
</style>
<script type="text/javascript">
var mk = '{$Setting.msfntk}';
</script>
<div class="container-fluid p-0">
{if $Setting.login_header}
<div class="text-center">{$Setting.login_header}</div>
{/if}
<div class="row no-gutters">

<div class="col-xl-7 bglogo">
<div class="auth-full-bg pt-lg-5 p-4">
<div class="w-100">

{if $Setting.custom_login_background_img}
<div class="bg-overlay" style="background: url({$Setting.custom_login_background_img}) center no-repeat !important; background-size:cover !important;"></div>
{else/}
<div class="bg-overlay"></div>
{/if}
<div class="d-flex h-100 flex-column justify-content-center">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="text-center">
<div dir="ltr">
<div class="owl-carousel owl-theme auth-review-carousel"
 id="auth-review-carousel">
<div class="item">
<div class="py-3">
<h1 class="text-white text-left">
{$Setting.custom_login_background_char}</h1>
<p class="text-white-50 text-left">
{$Setting.custom_login_background_description}</p>
</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end col -->

<div class="col-xl-5">
<div class="auth-full-page-content p-md-5 p-4">
<div class="login_right mx-auto">
<div class="d-flex flex-column h-100">
<div class="my-auto">
<div  class="logo text-center" >
<a href="{$Setting.web_jump_url}"><img  src="{$Setting.web_logo}" alt="" class="cursor"></a>
</div>
<ul class="affs-nav nav nav-tabs nav-tabs-custom nav-justified" role="tablist">
{if $Login.allow_login_email}
<li class="nav-item">
<a class="nav-link fs-14 bg-transparent {if $Get.action=="email" || !$Get.action}active{/if} " data-toggle="tab" href="#email" role="tab" aria-selected="true">{$Lang.email_login}</a>
</li>
{/if}
{if $Login.allow_login_email==0 && $Login.allow_id==1}
<li class="nav-item">
<a class="nav-link fs-14 bg-transparent active" data-toggle="tab" href="#email" role="tab" aria-selected="false">{$Lang.id_login}</a>
</li>
{/if}
{if $Login.allow_login_phone==1}
<li class="nav-item">
<a class="nav-link fs-14 bg-transparent {if ($Login.allow_login_phone==1 && $Login.allow_login_email == 0  && $Login.allow_id == 0) || $Get.action=="phone" || $Get.action=="phone_code"}active{/if}" data-toggle="tab" href="#phone" role="tab" aria-selected="false">{$Lang.mobile_login}
</a>
</li>
{/if}

</ul>

<div class="mt-4">
<div class="tab-content">
{if $Login.allow_login_email || $Login.allow_id}
<div id="email" class="tab-pane  {if $Get.action=="email" || !$Get.action}active{/if}" role="tabpanel">
<form method="post" action="/loginAccessToken?action=email">
<input type="hidden" class="form-control" name="redirect_url" value="{$redirect_url}">
<div class="form-group">
<label for="username">{if $Login.allow_login_email}{$Lang.mailbox}{else}ID{/if}</label>
<input type="text" class="form-control" id="emailInp" name="email" value="{$Post.email}" placeholder="{$Lang.please_enter_your}{if $Login.allow_login_email}{$Lang.mailbox}{if $Login.allow_id==1}{$Lang.ors}{/if}{/if}{if $Login.allow_id==1}ID{/if}">
</div>
<div class="form-group">
<div class="d-flex justify-content-between">
<label for="userpassword">{$Lang.password}</label>
</div>
<input type="password" class="form-control" id="emailPwdInp" name="password" placeholder="{$Lang.please_enter_password}">
</div>
{if $Login.allow_login_email_captcha==1 && $Login.is_captcha==1}
{include file="includes/verify"  type="allow_login_email_captcha" positon="top"}
{/if}

<div class="mt-3">
{if $Login.second_verify_action_home_login==1}
<!--二次登录验证-->
<button class="btn btn-primary py-2 fs-14 btn-block waves-effect waves-light  d-flex justify-content-center align-items-center"
type="button"  onclick="loginBefore('email');">{$Lang.sign_in}</button>
{else/}
<button class="btn btn-primary py-2 fs-14 btn-block waves-effect waves-light  d-flex justify-content-center align-items-center"
type="submit">{$Lang.sign_in}</button>
{/if}
</div>
</form>
</div>
{/if}
{if $Login.allow_login_phone}
<div id="phone" class="tab-pane {if ($Login.allow_login_phone==1 && $Login.allow_login_email == 0  && $Login.allow_id == 0) || $Get.action=="phone" || $Get.action=="phone_code"}active{/if}" role="tabpanel">
<form method="post" action="/loginAccessToken?action=phone" >
<input type="hidden" class="form-control" name="redirect_url" value="{$redirect_url}">
<div class="form-group">
<label for="username">{$Lang.phone_number}</label>
<div class="input-group">
{if $Login.allow_login_register_sms_global==1}
<div class="input-group-prepend">
<select class="form-control select2 select2-hidden-accessible"
data-select2-id="1" tabindex="-1" aria-hidden="true"
name="phone_code"  value="{$Post.phone_code}"  id="phoneCodeSel">
{foreach $SmsCountry as $list}
<option value="{$list.phone_code}" {if $list.phone_code=="+86"}selected {/if}>
{$list.link}
</option>
{/foreach}
</select>
</div>
{/if}
<input type="text" class="form-control" id="phoneInp" name="phone"  value="{$Post.phone}"  placeholder="{$Lang.please_enter_your_mobile_phone_number}">
</div>
</div>
<div class="form-group allow_login_phone_captcha">
<div class="d-flex justify-content-between">
<label for="userpassword">{$Lang.password}</label>
</div>
<input type="password" class="form-control" id="phonePwdInp" name="password" placeholder="{$Lang.please_enter_password}">
</div>
{if $Login.allow_login_phone_captcha==1 && $Login.is_captcha==1}
{include file="includes/verify"  type="allow_login_phone_captcha" positon="top"}
{/if}
{if $Login.allow_login_code_captcha==1 && $Login.is_captcha==1}
{include file="includes/verify"  type="allow_login_code_captcha" positon="top"}
{/if}

<div class="form-group allow_login_code_captcha">
<label for="code">{$Lang.verification_code}</label>
<div class="input-group">
<input type="text" class="form-control" id="phoneCodeInp" name="code"  value="{$Post.code}" placeholder="{$Lang.please_enter_code}">
<div class="input-group-append"  style="height:46px;">
<button class="btn btn-primary" type="button" style="line-height:33px;"  onclick="getCode(this,'login_send','allow_login_code_captcha')">{$Lang.get_code}</button>
</div>
</div>
</div>



<div class="d-flex justify-content-between align-items-center">
<div onclick="phoneCheckToken(this,'allow_login_phone_captcha')" class="text-primary mr-0 pointer" {if $Get.action=="phone_code"} style="display:none;" {/if}>
{$Lang.verification_code_login}
</div>
<div onclick="phoneCheckToken(this,'allow_login_code_captcha')" class="text-primary mr-0 pointer" {if $Get.action!="phone_code"} style="display:none;" {/if}>
{$Lang.password_login}
</div>
</div>
<div class="mt-3">
{if $Login.second_verify_action_home_login==1}
<!--二次登录验证-->
<button class="btn btn-primary py-2 fs-14 btn-block waves-effect waves-light  justify-content-center align-items-center allow_login_phone_captcha" type="button"  onclick="loginBefore('phone');">{$Lang.sign_in}</button>
<button class="btn btn-primary py-2 fs-14 btn-block waves-effect waves-light  justify-content-center align-items-center allow_login_code_captcha" type="submit">{$Lang.sign_in}</button>
{else/}
<button class="btn btn-primary py-2 fs-14 btn-block waves-effect waves-light  justify-content-center align-items-center"
type="submit">{$Lang.sign_in}</button>
{/if}
</div>
</form>
</div>
{/if}
</div>
</div>

{if $Oauth}
<div class="mt-4 text-center">
<h5 class="font-size-14 mb-3">{$Lang.use_other_login}</h5>

<ul class="list-inline">
{foreach $Oauth as $list}
<li class="list-inline-item">
<a href="{$list.url}" class="social-list-item text-white" target="blank">
{$list.img}
</a>
</li>
{/foreach}
</ul>
</div>
{/if}

</div>

</div>


</div>
</div>
</div>
<!-- end col -->
</div>

{if $Setting.login_footer}
<div class="text-center">{$Setting.login_footer}</div>
{/if}
<!-- end row -->
</div>
<!-- end container-fluid -->

{if $Login.second_verify_action_home_login==1}
<!--登录二次验证 模态框-->
<div class="modal fade" id="secondVerifyModal" tabindex="-1" role="dialog" aria-labelledby="secondVerifyModal"
 aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{$Lang.secondary_verification}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" value="{$Token}" />
<input type="hidden" value="closed" name="action" />
<div class="form-group row mb-4">
<label class="col-sm-3 col-form-label text-right">{$Lang.verification_method}</label>
<div class="col-sm-8">
<select class="form-control" class="second_type" name="type" id="secondVerifyType">

</select>
</div>
</div>
<!--忘记密码-->

<div class="form-group row mb-0">
<label class="col-sm-3 col-form-label text-right">{$Lang.verification_code}</label>
<div class="col-sm-8">
<div class="input-group">
<input type="text" name="code" id="secondVerifyCode" class="form-control" placeholder="{$Lang.please_enter_code}" />
<div class="input-group-append" style="height:46px;" id="getCodeBox">
<button class="btn btn-secondary"  type="button"  onclick="getCode(this,'login/second_verify_send')"  style="line-height:33px;" type="button">{$Lang.get_code}</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-light" data-dismiss="modal">{$Lang.cancel}</button>
<button type="button" class="btn btn-primary mr-2" id="secondVerifySubmit">{$Lang.determine}</button>
</div>
</div>
</div>
</div>
{/if}

<script type="text/javascript">

function phoneCheckToken(button,phone){
if(button) $(button).hide().siblings().show();
if(phone=="allow_login_phone_captcha"){
$("#phone form").attr("action","/loginAccessToken?action=phone_code");
$(".allow_login_phone_captcha").hide();
$(".allow_login_phone_captcha input").attr("disabled","disabled");
$(".allow_login_code_captcha").show();
$(".allow_login_code_captcha input").removeAttr("disabled");
}else if(phone=="allow_login_code_captcha"){
$("#phone form").attr("action","/loginAccessToken?action=phone");
$(".allow_login_code_captcha").hide();
$(".allow_login_code_captcha input").attr("disabled","disabled");
$(".allow_login_phone_captcha").show();
$(".allow_login_phone_captcha input").removeAttr("disabled");
}
}

{if $Get.action=="phone_code"}
phoneCheckToken("","allow_login_phone_captcha")
{else/}
phoneCheckToken("","allow_login_code_captcha")
{/if}
</script>
