<script setup>
    import { onMounted, ref } from 'vue';
    import Spiner from '../components/ui/Spiner.vue';
    import { useRoute } from 'vue-router';
    import useDirectory from '../composables/useDirectory';
    import CardUser from '../components/CardUser.vue';

    const {loading, users, getUsersData} = useDirectory();

    const {params} = useRoute();

    onMounted(() => {
        const id = params.id;
        getUsersData(id);
    });
</script>

<template>
    <div class="mb-5">
        <h2 class="title mt-5 mb-5">Usuarios de la <span class="title-main">Empresa</span></h2>
        <Spiner v-if="loading"/>
        <div 
            class="card-info flex-column align-items-center"
            v-if="loading === false && users.length <= 0"
        >
            <img src="/images/logo.png" alt="logo" width="100">
            <h2 class="title">No hay registros</h2>
        </div>
        <CardUser
            v-for="user in users"
            :user="user"
            :readonly="true"
        />
    </div>
</template>

<style scoped>

</style>