<!DOCTYPE html>
<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/detailLayout}">
<th:block layout:fragment="layout_css">
	<link rel="stylesheet" href="/css/mobile/login_password.css">
	<link rel="stylesheet" href="/css/mobile/login_password2.css">
</th:block>

<th:block layout:fragment="layout_top_script">
	<script>
		let userPhoneNumber = "[[${userPhoneNumber}]]"
		let membershipAccount = "[[${param.membershipAccount}]]"
		let errorMsg = "[[${errorMsg}]]"
	</script>
</th:block>
<th:block layout:fragment="layout_content">
	<div th:if="${userPhoneNumber == null}">
		<div class="text_box">
			<p>비밀번호 찾기</p>
			<p>가입된 회원정보를 입력해주세요.</p>
		</div>
		<ul class="list_box">
			<li class="first">
				<label>아이디 조회</label>
				<div>
					<input type="text" id="membershipAccount" placeholder="아이디를 입력해주세요."/>
				</div>
			</li>
			<li><button onClick="location.href='/mobileuser/selectUserIdIntro.do'">아이디 찾기</button></li>
		</ul>
		<div class="button_box">
			<button id="btn_selectUserPhoneNumber">다음</button>
		</div>
	</div>
	<!-- 데이터가 있을 경우 -->
	<div th:if="${userPhoneNumber != null}">
		<div class="text_box">
			<p>비밀번호 찾기</p>
			<p>가입된 회원정보를 입력해주세요.</p>
		</div>
		<div class="info_box">
			<p class="first">
				회원정보에 등록한 핸드폰 번호<br/>
				<span th:text="${#strings.substring(userPhoneNumber, 0, 3)} + '-' + ${#strings.substring(userPhoneNumber, 3, 4)} + '***-' + ${#strings.substring(userPhoneNumber, 7, 8)+ '***'}"></span>
			</p>
			<p>회원가입시 등록한 휴대폰 번호와 동일해야 인증번호를 받을 수 있습니다.</p>
		</div>
		<ul class="list_box">
			<li class="first">
				<label>핸드폰 번호</label>
				<div>
					<input type="tel" id="phoneNumber" placeholder="핸드폰 번호를 입력해주세요."/>
					<button id="sendAuthNumBtn" onclick="fn_sendAuthNum()">인증번호 발송</button>
				</div>
			</li>
			<li>
				<div class="certification_box2" style="display: none">
					<input id="authNumber" type="number" placeholder="인증번호 입력" />
					<button id="authNumBtn" onClick="fn_selectPhoneAuthCheck()">인증번호 확인</button>
				</div>
			</li>
			<p id="timer" style="color: #3985EA;padding: 10px;margin: auto;"></p>
		</ul>
		<div class="button_box">
			<button onClick="fn_updateUserPasswordIntro()">완료</button>
		</div>
	</div>
</th:block>
<th:block layout:fragment="layout_script">
	<script src="/js/mobile/user/selectUserPassword.js"></script>
</th:block>
</html>
