<template>
  <div>
    <v-container fluid="true">
      <h1>Root</h1>

      <div class="d-block d-sm-flex mt-10">
        <v-table>
          <thead>
            <tr>
              <th class="text-left">Email</th>
              <th class="text-left">Name</th>
              <th class="text-left">Created</th>
              <th class="text-left">Last seen</th>
              <th class="text-left">IDPs</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="u in users"
              :key="u._id"
            >
              <td>{{ u.email }}</td>
              <td>{{ u.firstName }} {{ u.lastName }}</td>
              <td>{{ formatDate(u.createdAt) }}</td>
              <td>{{ formatDate(u.lastSeenAt) }}</td>
              <td>
                <p v-for="idp in u.idps" :key="idp._id">
                  <router-link :to="`/idps/${idp._id}`">
                    {{ idp.name }} ({{idp.code}})
                  </router-link>
                </p>
              </td>
            </tr>
          </tbody>
        </v-table>
      </div>

    </v-container>
  </div>
</template>

<script>
import api from '../api';
import moment from 'moment';

export default {
  name: 'Root',
  data() {
    return {
      users: [], loading: false
    }
  },
  created (){
    this.loading = true;
    api.req('GET', `/root/users`, null, resp => {
      this.users = resp.users;
      this.loading = false;
    });
  },
  methods: {
    formatDate(date) {
      return moment(date).format('L HH:mm:ss');
    }
  },
}
</script>

<style scoped>

</style>
