<script>
import {UserService} from "@/Services/UserService";

export default {
  name: 'UserListComponent',
  data : function() {
    return {
      loading: false,
      users: [],
      errorMessage : null,
    }
  },
  created: async function() {
    try {
      this.loading = true;
      let response = await UserService.getAllUsers();
      this.loading = false;
      this.users = response.data;
      console.log(response.data);
    }
    catch (error) {
      this.loading = false;
      this.errorMessage = error.message;
      console.log(error);
    }
  }


}
</script>

<template>
<div class="container">
  <div class="row">
    <div class="col">
      <p class="h3 fw-bold text-success"> User List</p>
      <p class="fst-italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus consectetur consequuntur cupiditate, dicta dolore iure minima quas rem repellat temporibus vitae voluptatem! At aut beatae et exercitationem ipsam, numquam?</p>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <table class="table table-hover text-center table-striped">
        <thead class="table-success text-white">
        <tr class="bg-success text-success">
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Company</th>
          <th>Website</th>
          <th>Location</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{user.id}}</td>
          <td>{{user.firstname}} {{user.lastname}}</td>
          <td>{{user.email}}</td>
          <td>{{user.company.name}}</td>
          <td>{{user.website}}</td>
          <td>{{user.address.street}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</template>

<style scoped lang="css">

</style>
