<template>
  <v-card outlined>
    <v-list-item class="main_accent">
      <v-list-item-content>
        <v-row no-gutters align="center">
          <v-col cols="3">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeTrackAccount.name}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
          <v-col cols="1">
            <v-card color="background" elevation="0">
              <pre><v-icon color="green">mdi-currency-usd</v-icon>{{" " + timeTrackAccount.revenue}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
          <v-col cols="7">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-information-variant</v-icon>{{" " + timeTrackAccount.description}}</pre>
            </v-card>
          </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="green" @click="$emit('edit-timeTrackAccount', timeTrackAccount._links.self.href)">
            <v-icon>mdi-file-document-edit</v-icon>
          </v-btn>
          <v-btn fab dark small color="red" @click="$emit('del-timeTrackAccount', timeTrackAccount._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: "TimeTrackAccountItem",
  props: ["timeTrackAccount"],
  data: () => ({
    fab: undefined
  }), 
};
</script>

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