{##}
{% extends 'layout/layout_kc.html' %}
{% block content %}
{% autoescape false %}
	{#
	__THEME_URL_COMMON : 공통 경로
	__THEME_URL : 테마경로
	#}
  <link rel="stylesheet" href="{{__THEME_URL}}/home/find/find_kc.css" type="text/css">

  <main class="main">
    <article id="main_box">
      <h3>아이디 찾기</h3>
      <form name="main_frm" method="post">
	      <input type="hidden" name="wid" id="wid" value="">
        <fieldset class="m_con">
          <legend>아이디 / 비밀번호 찾기</legend>
          <!-- 아이디 찾기 -->
          <input type="radio" id="tab01" name="a" {%if tab==1%} checked{%endif%}>
          <label for="tab01">아이디찾기</label>
          <div class="id_search">
            <div class="form_box">
              <h4>아이디 찾기</h4>
              <p class="desc">회원가입 시 입력했던 이름과 휴대번호를 입력해 주세요.</p>
              <input type="text" class="txt_form" name="name_i" placeholder="이름을 입력하세요!" id="name_txt">
              <label for="name_txt">이름</label>
              <input type="text" class="txt_form" name="tel_i" placeholder="휴대번호를 입력하세요!(‘-’ 제외)" id="num_txt" onkeyup="characterCheck(this)" onkeydown="characterCheck(this)" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
              <label for="num_txt">휴대전화</label>
            </div>
            
            <!-- main.css > input[name=s_btn01] 서식 display:none -->
            <div class="btn_box">
              <!-- <input type="submit" value="아이디 찾기" name="s_btn01" id="id_box" style="font-family:S-CoreDream-4Regular">
              <label for="id_box">아이디찾기</label> -->
              <a href="javascript:find_i_ok();" title="아이디찾기" class="bg_btn">아이디 찾기</a>
              <a href="/home/join" title="회원가입" class="bd_btn">회원가입</a>
            </div>
          </div>

          <!-- 비밀번호 찾기 -->
          <input type="radio" id="tab02" name="a" {%if tab==2%} checked{%endif%}>
          <label for="tab02">비밀번호 찾기</label>
          <div class="pw_search">
            <div class="form_box">
              <h4>비밀번호 찾기</h4>
              <p class="desc">회원가입 시 입력했던 아이디와 휴대번호를 입력해 주세요.</p>
              <input type="text" class="txt_form" name="id_p" placeholder="아이디를 입력하세요!" id="id_txt">
              <label for="id_txt">아이디</label>
              <input type="text" class="txt_form" name="tel_p" placeholder="휴대번호를 입력하세요!(‘-’ 제외)" onkeyup="characterCheck(this)" onkeydown="characterCheck(this)" id="num_txt2" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
              <label for="num_txt2">휴대전화</label>
            </div>
            <div class="btn_box">
              <!-- <input type="submit" value="비밀번호 찾기" name="s_btn01"  id="pw_box" style="font-family:S-CoreDream-4Regular">
              <label for="pw_box">비밀번호찾기</label>  -->
              <a href="javascript:find_p_ok();" title="비밀번호찾기" class="bg_btn">비밀번호 찾기</a>
              <a href="/home/join" title="회원가입" class="bd_btn">회원가입</a>
            </div>
          </div>
        </fieldset>
      </form>
    </article>
  </main>

	<script>
		// 특수문자 입력 방지
		function characterCheck(obj){
		var regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi; 
		// 허용할 특수문자는 여기서 삭제하면 됨
		// 지금은 띄어쓰기도 특수문자 처리됨
		if( regExp.test(obj.value) ){
		  obj.value = obj.value.substring( 0 , obj.value.length - 1 ); // 입력한 특수문자 한자리 지움
		  }
		}
    </script>

	<script language='javascript'>
		function find_i_ok(){
			var frm = document.main_frm;
			if(frm.name_i.value == ""){
				alert("이름을 입력하세요.");
				frm.name_i.focus();
				return;
			}
			if(frm.tel_i.value == ""){
				alert("휴대전화를 입력하세요.");
				frm.tel_i.focus();
				return;
			}
			frm.action="find_id.php";
			frm.submit();
		}
		function find_p_ok(){
			var frm = document.main_frm;
			if(frm.id_p.value == ""){
				alert("아이디를 입력하세요.");
				frm.id_p.focus();
				return;
			}
			if(frm.tel_p.value == ""){
				alert("휴대전화를 입력하세요.");
				frm.tel_p.focus();
				return;
			}
			frm.action="find_pw.php";
			frm.submit();
		}
	</script>

{% endautoescape %}
{% endblock %}