<template>
    <div class="content">
      <div class="sub-title-area mb-110">
            <h2>내 정보 수정</h2>
            <div class="breadcrumb-list">
                <ul>
                    <li><img :src="homeicon" alt="Home Icon"><p></p></li>
                    <li><img :src="righticon" alt="Home Icon"></li>
                    <li>내 정보 수정</li>
                </ul>
            </div>
      </div>
      <h3>기본정보</h3>
        <form action="" class="info-form mb-50">
            <dl>
                <dd >
                    <label for="id" class="require">아이디</label>
                    <input type="text" id="id" value="admin" readonly>
                </dd>
                <div class="hr"></div>
                
                <dd >
                    <label for="name" class="require">이름</label>
                    <input type="text" id="name" value="관리자">
                    
                </dd>
               
            </dl>
        </form>
        <h3>비밀번호 변경</h3>
        <form action="" class="pwchange-form mb-50">
            <dl>
                <dd >
                    <label for="id">아이디</label>
                    <input type="text" id="id" placeholder="아이디를 입력하세요.">
                </dd>
                <div class="hr"></div>
                <dd >
                    <label for="pw">비밀번호</label>
                    <input type="text" id="pw" placeholder="비밀번호를 입력하세요.">
                    <div class="invalid-feedback"><img :src="erroricon" alt=""><span>영문, 숫자, 특수문자를 최소 한가지씩 조합하고 8자 이상 ~ 20자 이내로 입력해주세요.</span></div>
                </dd>
                <div class="hr"></div>
                <dd >
                    <label for="pw">비밀번호</label>
                    <input type="text" id="pw" placeholder="비밀번호를 입력하세요.">
                    
                </dd>
            </dl>
        </form>
        <div class="btn-group flex-end">
            <button class="signout">회원탈퇴</button>
            <button class="update">수정</button>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      // Define the image sources
      homeicon: 'client/resources/images/icon/home.png',
      erroricon: 'client/resources/images/icon/error.png',
      righticon: 'client/resources/images/icon/right.png',
    };
  }
};
</script>
