<template>
  <section class="panel admin-login-panel">
    <div class="panel-heading">
      <h2>{{ t('adminLogin') }}</h2>
      <p>{{ t('adminLoginDesc') }}</p>
    </div>

    <div class="admin-login-grid">
      <input :value="username" class="name-input" :placeholder="t('auth.username')" @input="$emit('update:username', $event.target.value)" />
      <input
        :value="password"
        type="password"
        class="name-input"
        :placeholder="t('auth.password')"
        @input="$emit('update:password', $event.target.value)"
        @keyup.enter="$emit('submit')"
      />
      <button class="btn btn-primary" @click="$emit('submit')">{{ t('actions.login') }}</button>
    </div>

    <p class="auth-error" v-if="error">{{ error }}</p>
  </section>
</template>

<script setup>
defineProps({
  t: { type: Function, required: true },
  username: { type: String, default: '' },
  password: { type: String, default: '' },
  error: { type: String, default: '' },
})

defineEmits(['submit', 'update:username', 'update:password'])
</script>

