<template>
  <div class="admin-user-search">
    <div class="search">
      <input v-model="q" type="text" :placeholder="$t('admin.user.name')" @keyup.enter="search" />
      <button @click="search">{{ $t('admin.user.search') }}</button>
    </div>
    <div v-if="results.length" class="results">
      <ul>
        <li v-for="u in results" :key="u.id" @click="$emit('select', u)">{{ u.username }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import apiClient from '@/utils/axios.js';

export default {
  name: 'AdminUserSearch',
  emits: ['select'],
  data() {
    return { q: '', results: [] };
  },
  methods: {
    async search() {
      const res = await apiClient.get('/api/admin/users/search', { params: { q: this.q } });
      this.results = res.data || [];
    }
  }
};
</script>

<style scoped>
.admin-user-search { display: grid; gap: 8px; }
.search { display: flex; gap: 8px; }
ul { list-style: none; padding: 0; margin: 0; }
li { padding: 6px 8px; border: 1px solid #ddd; margin-bottom: 6px; cursor: pointer; }
li:hover { background: #f5f5f5; }
</style>


