<!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_account.css">
    <link rel="stylesheet" href="/css/mobile/login_account_find.css">
</th:block>

<th:block layout:fragment="layout_top_script">
	<script>
		let physicalSearchDate = "[[${param.physicalSearchDate}]]";
        let errorMsg = "[[${errorMsg}]]"
	</script>
</th:block>

<th:block layout:fragment="layout_content">
    <!-- 데이터가 없을 경우 -->
    <div th:if="${#lists.isEmpty(userIdData)}">
        <div class="text_box">
            <p>계정찾기</p>
            <p>회원가입시 인증한 정보를 입력해주세요.</p>
        </div>
        <ul class="list_box">
            <li class="first">
                <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="number" placeholder="인증번호 입력" />
                    <button id="authNumBtn" onClick="fn_selectPhoneAuthCheck()">인증번호 확인</button>
                </div>
                <p id="timer" style="color: #3985EA;padding: 10px;margin: auto;"></p>
            </li>
        </ul>
        <div class="button_box">
            <button id="btn_selectUserId" disabled>완료</button>
        </div>
    </div>

    <!-- 데이터가 있을 경우 -->
    <div th:if="${!#lists.isEmpty(userIdData)}">
    <div class="text_box">
        <p>계정찾기</p>
        <p>휴대전화번호와 일치하는 계정 정보입니다.</p>
    </div>
    <div class="info_box">
        <ul>
            <li>
                <p class="label">아이디</p>
                <p th:text="${userIdData[0]['membershipAccount']}">test</p>
            </li>
            <li class="last">
                <p class="label">가입일</p>
                <p th:text="${userIdData[0]['joinDate']}">2024-00-00</p>
            </li>
        </ul>
    </div>
    <ul class="loginPage_list">
        <li><a href="/mobile">로그인 하기</a></li>
        <li><a href="/mobileuser/selectUserPasswordIntro.do">비밀번호 찾기</a></li>
    </ul>
    <div class="button_box">
        <button>완료</button>
    </div>
</div>

</th:block>
<th:block layout:fragment="layout_script">
	<script src="/js/mobile/user/selectUserId.js"></script>
</th:block>
</html>