<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorate="~{/mobile/layout/joinLayout}">

<th:block layout:fragment="layout_css">
	<link rel="stylesheet" href="/css/mobile/joinInput.css">
</th:block>

<th:block layout:fragment="layout_top_script">

</th:block>

<th:block layout:fragment="layout_content">
	<div class="text_box">
		<p>회원가입</p>
		<p>회원가입을 통해 멤버십 서비스를 이용하실 수 있습니다.</p>
	</div>
	<ul class="join_list">
		<li class="first">
			<label>아이디</label>
			<div>
				<input type="text" id="membershipAccount" placeholder="아이디를 입력해주세요."/>
				<button onclick="fn_duplicateCheck()" id="duplicateCheckBtn">중복조회</button>
			</div>
		</li>
		<li id="passwordLi">
			<label>비밀번호</label>
			<div>
				<input type="password" id="membershipPassword" placeholder="비밀번호를 입력해주세요."/>
			</div>
			<div>
				<input type="password" id="passwordCheck" placeholder="비밀번호 재확인"/>
			</div>
		</li>
		<li>
			<label>성함</label>
			<div>
				<input type="text" id="userName" placeholder="성함을 입력해주세요."/>
			</div>
		</li>
		<li>
			<label>핸드폰 번호</label>
			<div>
				<input type="tel" id="phoneNumber" placeholder="-없이 번호 입력"/>
				<button id="sendAuthNumBtn" onclick="fn_sendAuthNum()">인증번호 발송</button>
			</div>
			<div class="certification_box2" style="display: none">
				<input id="authNumber" type="password" placeholder="인증번호 입력">
				<button id="authNumBtn" onClick="fn_selectPhoneAuthCheck()">인증번호 확인</button>
			</div>
			<p id="timer" style="color: #3985EA;padding: 10px;margin: auto;"></p>
		</li>
		<li>
			<label>추천인(선택)</label>
			<div>
				<input type="text" id="introUser" placeholder="추천인 아이디 입력"/>
			</div>
		</li>
	</ul>
	<div class="button_box">
		<button onclick="fn_join();" disabled>완료</button>
	</div>
	<form id="loginForm" onsubmit="return false;"></form>
	<script>
	</script>
</th:block>

<th:block layout:fragment="layout_script">
	<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.8.js"></script>
	<script src="/js/mobile/join/join.js"></script>
		<script>
		let serviceAgreement = "[[${param.serviceAgreement}]]";
		let collectionAgreement = "[[${param.collectionAgreement}]]";
		let marketingAgreement = "[[${param.marketingAgreement}]]"===true?"Y":"N";
		let snsEmail = "[[${param.snsEmail}]]";
		let loginType = "[[${param.loginType}]]";
		let impUid = "[(${@environment.getProperty('imp_uid')})]";
		let pg = "[(${@environment.getProperty('imp.pg')})]";
		let cpid = "[(${@environment.getProperty('imp.cpid')})]";
	</script>
</th:block>
</html>
