const template = html`
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <span v-if="day.timeIn  && day.timeIn.id">
        <i class="fa fa-cutlery" v-if="day.timeIn.lunch"></i>
        {{day.timeIn.time | formatDate('LT') }}
        <span
          class="label label-warning"
          v-if="day.timeIn.pending_change_request"
        >
          pending
        </span>
        <requesttime
          v-if="!day.timeIn.pending_change_request"
          :id="day.timeIn.id"
          :userId="userId"
        ></requesttime>
      </span>
    </td>
    <td>
      <span v-if="day.timeOut && day.timeOut.id">
        <i class="fa fa-cutlery" v-if="day.timeOut.lunch"></i>
        {{day.timeOut.time | formatDate('LT') }}
        <span
          class="label label-warning"
          v-if="day.timeOut.pending_change_request"
        >
          pending
        </span>
        <requesttime
          v-if="!day.timeOut.pending_change_request"
          :id="day.timeOut.id"
          :userId="userId"
        ></requesttime>
      </span>
      <span v-if="!day.timeOut">
        <newTime
          :time="startDate.clone().add(n-1,'days')"
          :userId="userId"
          type="out"
        ></newTime>
      </span>
    </td>

    <td>{{day.hours | round }}</td>
    <td>£{{day.amount | round}}</td>
  </tr>
`;
import state from "../../state/main.js";
import requesttime from "./requesttime.js";
import newTime from "./newTime.js";
export default {
  props: ["day", "userId", "startDate", "n"],
  data: function() {
    return {};
  },

  components: {
    requesttime,
    newTime
  },

  methods: {},
  filters: {
    // takeout the 00-00-00 from dates
    formatDate: function(val, type) {
      return moment(val).format(type);
    },
    round(num) {
      return Math.round(num * 100) / 100;
    }
  },
  template
};
