<template>
  <v-card outlined>
    <v-list-item class="main_accent">
      <v-list-item-content>
        <v-row no-gutters align="center">
          <v-col cols="1">
            <v-avatar>
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
            </v-avatar>
          </v-col>

          <v-col cols="3">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
          <v-col cols="3">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-account-box</v-icon>{{" " + user.firstname + " " +user.lastname}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
          <v-col cols="2"></v-col>
          <v-col></v-col>
        </v-row>
      </v-list-item-content>
      <v-list-item-action>
        <v-speed-dial
          v-model="fab"
          transition="slide-x-reverse-transition"
          direction="left"
          open-on-hover
        >
          <template v-slot:activator>
            <v-btn v-model="fab" color="background" elevation="0" dark fab>
              <v-icon v-if="fab">mdi-close</v-icon>
              <v-icon v-else>mdi-pencil</v-icon>
            </v-btn>
          </template>
          <v-btn fab dark small color="primary" @click="$emit('show-accounts', user.username, user._links.self.href)">
            <v-icon>mdi-account-details</v-icon>
          </v-btn>
          <v-btn fab dark small color="green" @click="$emit('edit-user', user._links.self.href)">
            <v-icon>mdi-file-document-edit</v-icon>
          </v-btn>
          <v-btn fab dark small color="red" @click="$emit('del-user', user._links.self.href)">
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </v-speed-dial>
      </v-list-item-action>
    </v-list-item>
  </v-card>
</template>

<script>
export default {
  name: "UsersItems",
  props: ["user"],
  data: () => ({
    fab: undefined,
  }),
  methods: {
    getUid(hrefTmp) {
      var parts = hrefTmp.split("/");
      return parts[4];

    }
  }
};
</script>

<style scoped>
.v-card {
  border-color: #131313 !important;
  border-width: 3px !important;
  border-radius: 10000px !important;
}
</style>