<template>
    <div class="login-wrap">
        <div class="login-box">
            <div class="login-logo">
                <img src="../../../resources/img/content/login_logo.svg" alt="로고">
            </div>
            <div class="login-form">
                <div>
                    <div class="mb10">
                        <input type="text" id="username" class="form-control md" v-model="username" required placeholder="아이디를 입력하세요"> 
                    </div>
                    <div class="mb20">
                        <input type="password" id="password" class="form-control md" v-model="password" required placeholder="비밀번호를 입력하세요">
                    </div>
                </div>
                <div class="error-message mb20" v-if="!isValid">
                    <p><img src="../../../resources/img/component/common/ico_invalid_error_20.svg" alt=""> 아이디 또는 비밀번호가 잘못되었습니다.</p>
                    <p><img src="../../../resources/img/component/common/ico_invalid_error_20.svg" alt=""> 아이디와 비밀번호를 정확히 입력해주세요.</p>
                </div>
                <button class="btn lg primary login-btn mb30"><span class="icon-label lbtn">로그인</span></button>
            </div>
            <div class="layout center justify-center links">
                <router-link :to="{ path: '/find.page', query: { type: 'id' } }">아이디 찾기</router-link>
                <router-link :to="{ path: '/find.page', query: { type: 'pw' } }">비밀번호 찾기</router-link>
                <router-link to="/join.page">회원가입 찾기</router-link> 
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            isValid: true,
        };
    },
    methods: {},
    watch: {},
    computed: {},
    components: {},
    created() {},
    mounted() {},
    beforeUnmount() {},
};

</script>