const template = html`
<div class="widget widget-classic">
    <div class="widget-content">

        <div class="headline">
            <h4><i class="fa fa-plane"></i> Holiday Requests</h4>
        </div>
        <div class="">
						<table class="table table-condensed">
							<thead class="table-header">
								<tr><th>Description</th>
								<th>From</th>
								<th>To</th>
								<th class="centered">Days</th>
								<th>Status</th>
							</tr></thead>
							<tbody>
								<tr v-for="holiday in jophielHoliday">
									<td>{{holiday.description}}</td>
									<td>{{holiday.from}}</td>
									<td>{{holiday.to}}</td>
									<td class="centered">{{diff(holiday)}}</td>
                                    <td v-if="holiday.approved"><span class="label label-success">approved</span></td>
                                    <td v-if="!holiday.approved"><span class="label label-danger">not approved</span></td>
								</tr>
							</tbody>
						</table>
						<hr>
						<div class="text-right">
							<small class="pull-left">You have <em>{{daysAllowed.daysLeft}}</em> days of paid holiday left.</small>
                            <HolidayRequestnew :daysAllowed="daysAllowed"></HolidayRequestnew>
						</div>
					</div>
    </div>
</div>
`;
import api from "../../api.js";
import HolidayRequestnew from "./HolidayRequestnew.js";

export default new Vue({
    el: "#HolidayRequests2",
    data(){
        return {
            test:'test123',
            jophielHoliday:[],
            daysAllowed:{}
        }
    },
    mounted(){
        this.load()
    },
    methods:{
        diff(holiday){
            const start = moment(holiday.from)
            const end = moment(holiday.to)
            return end.diff(start, 'days')+1
        },
        async load(){
            state.sub("jophielHoliday", value => (this.jophielHoliday = value));
            const data = await api.get.jophielHoliday();
            
            state.set("jophielHoliday", data.data);


            state.sub("jophieldaysAllowed", value => (this.daysAllowed = value));
            const daysAllowed = await api.get.jophieldaysAllowed();
            
            state.set("jophieldaysAllowed", daysAllowed);

            
        }
    },
    components:{
        HolidayRequestnew
    },
    template
});