<template>
  <div class="admin--login">
    <div class="login--container">
      <div class="login--box">
        <div class="login--logo">
          <h1>AUDI</h1>
          <p class="subtitle">Admin Panel</p>
        </div>
        
        <form @submit.prevent="handleLogin" class="login--form">
          <div class="form--group">
            <input 
              v-model="email"
              type="email" 
              placeholder="이메일"
              class="form--input"
              required
            >
          </div>
          
          <div class="form--group">
            <input 
              v-model="password"
              type="password" 
              placeholder="비밀번호"
              class="form--input"
              required
            >
          </div>
          
          <div class="form--options">
            <label class="checkbox--label">
              <input type="checkbox" v-model="rememberMe">
              <span>로그인 상태 유지</span>
            </label>
            <a href="#" class="forgot--password">비밀번호 찾기</a>
          </div>
          
          <button type="submit" class="login--button">
            로그인
          </button>
        </form>
        
        <div class="login--footer">
          <p>© 2024 Audi. All rights reserved.</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const email = ref('')
const password = ref('')
const rememberMe = ref(false)

const handleLogin = async () => {
  try {
    // 로그인 로직 구현
    console.log('Login attempt:', {
      email: email.value,
      password: password.value,
      rememberMe: rememberMe.value
    })
    
    // 로그인 성공 시 대시보드로 이동
    // router.push('/admin/dashboard')
  } catch (error) {
    console.error('Login error:', error)
  }
}
</script>