<template>
  <div class="admin-users">
    <h1>{{ $t('navigation.m-administration.useradministration') }}</h1>

    <AdminUserSearch @select="select" />

    <div v-if="selected" class="edit">
      <h2>{{ selected.username }}</h2>
      <label>
        {{ $t('admin.user.name') }}
        <input v-model="form.username" type="text" />
      </label>
      <label>
        {{ $t('admin.user.blocked') }}
        <input type="checkbox" :checked="!form.active" @change="toggleBlocked($event)" />
      </label>
      <div class="actions">
        <button @click="save">{{ $t('common.save') }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import apiClient from '@/utils/axios.js';
import AdminUserSearch from '@/components/admin/AdminUserSearch.vue';

export default {
  name: 'AdminUsersView',
  components: { AdminUserSearch },
  data() {
    return {
      selected: null,
      form: { username: '', active: true }
    };
  },
  methods: {
    async select(u) {
      const res = await apiClient.get(`/api/admin/users/${u.id}`);
      this.selected = res.data;
      this.form.username = res.data.username;
      this.form.active = !!res.data.active;
    },
    toggleBlocked(e) {
      this.form.active = !e.target.checked;
    },
    async save() {
      if (!this.selected) return;
      await apiClient.put(`/api/admin/users/${this.selected.id}`, {
        username: this.form.username,
        active: this.form.active
      });
      this.$root?.$refs?.messageDialog?.open?.('tr:common.saved');
    }
  }
};
</script>

<style scoped>
.admin-users { padding: 20px; }
.results table { width: 100%; border-collapse: collapse; }
.results th, .results td { border: 1px solid #ddd; padding: 8px; }
.edit { margin-top: 16px; display: grid; gap: 10px; max-width: 480px; }
.actions { display: flex; gap: 8px; }
button { cursor: pointer; }
</style>


