<template>
  <div class="image-wrapper">
      <img src="/image_b.png" alt="Ilustração acima da tabela" class="top-image" />
  </div>
  <v-container>
    <UseTabs :user="user" :permissionsByRole="permissionsByRole" />
  </v-container>
</template>

<script setup>
// Importando o componente Tabs.vue
import UseTabs from '../components/users/UseTabs.vue';

// Dados do usuário e permissões
import { useAuthStore } from '../stores/auth';
const authStore = useAuthStore();
const user = authStore.user;
const permissionsByRole = authStore.permissionsByRole;
</script>
<style scoped>
.image-wrapper {
  display: flex;
  justify-content: flex-end; /* ou center, se quiser centralizar */
  margin-bottom: 16px;
}

.top-image {
  max-width: 180px;
  height: auto;
}
.info{
  color:  rgb(0, 0, 0);
  background-color: rgba(76,201,240);
  background: linear-gradient(145deg, #eeeded, #ffffff);
  box-shadow:  20px 20px 60px #d9d9d9,
              -20px -20px 60px #ffffff;
}
</style>