<script setup lang="ts">
import { onMounted } from "vue";
import { userApi } from "../generated/api";
import { useModelApi } from "../composables/useModelApi";

const {
  items: users,
  loading,
  error,
  load: loadUsers,
} = useModelApi(userApi, {
  defaultListParams: { ordering: "id" },
  loadErrorMessage: "Не удалось загрузить пользователей",
});

onMounted(loadUsers);
</script>

<template>
  <section class="hero">
    <p class="eyebrow">Directory</p>
    <h1>Пользователи</h1>
    <p class="subtitle">Вторая страница для проверки маршрутизации и панели навигации.</p>
  </section>

  <van-notice-bar
    v-if="error"
    class="notice"
    color="#991b1b"
    background="#fee2e2"
    left-icon="warning-o"
    wrapable
    :scrollable="false"
    :text="error"
  />

  <section class="card list-card">
    <div class="list-title">
      <h2>Список</h2>
      <van-button size="small" plain type="primary" :loading="loading" @click="loadUsers()">
        Обновить
      </van-button>
    </div>

    <van-loading v-if="loading && users.length === 0" class="state" type="spinner">
      Загрузка...
    </van-loading>

    <van-empty v-else-if="users.length === 0" description="Пользователей пока нет" />

    <van-cell-group v-else inset>
      <van-cell v-for="user in users" :key="user.id" :title="user.name" center>
        <template #label> ID: {{ user.id }} </template>
        <template #right-icon>
          <van-tag plain type="success">User</van-tag>
        </template>
      </van-cell>
    </van-cell-group>
  </section>
</template>
