<template>
  <v-card outlined>
    <v-list-item class="main_accent">
      <v-list-item-content>
     <!--    <v-col cols="2" >
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-calendar-range</v-icon>{{" " + timeRecord.date}}</pre>
            </v-card>
          </v-col> -->
          <h3 justify-center>{{timeRecord.date}}</h3>
        <v-row no-gutters align="center">
          <v-col cols="2">
            <v-card color="background" elevation="0">
              <pre><v-icon color="green" v-bind:class="{'d-none':timeRecord.type == 'BREAK'}">mdi-currency-usd</v-icon><v-icon color="red" v-bind:class="{'d-none':timeRecord.type == 'PAID'}">mdi-currency-usd-off</v-icon>{{" " + timeRecord.type}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
          <v-col cols="2">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" Start " + timeRecord.startdate}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
          <v-col cols="2">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-clock-outline</v-icon>{{" End " + timeRecord.enddate}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
          <v-col cols="2">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-timer</v-icon>{{" " + timeRecord.duration}}</pre>
            </v-card>
          </v-col>
          <v-col></v-col>
           <v-col cols="2">
            <v-card color="background" elevation="0">
              <pre><v-icon color="primary">mdi-account-tie</v-icon>{{" " + timeRecord.account}}</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-timeRecord', timeRecord._links.self.href, timeRecord.enddate)">
            <v-icon>mdi-file-document-edit</v-icon>
          </v-btn>
          <v-btn fab dark small color="red" @click="$emit('del-timeRecord', timeRecord._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: "TimeRecordItem",
  props: ["timeRecord"]
};
</script>

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