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

        <div class="headline">
            <h4><i class="fa fa-plane"></i> Sickness</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 jophielSickness">
									<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>26</em> days of paid holiday left.</small>
						</div>
					</div>
    </div>
</div>
`;
import api from "../../api.js";
export default new Vue({
    el: "#Sickness",
    data(){
        return {
            test:'test123',
            jophielSickness:[]
        }
    },
    mounted(){
        this.load()
    },
    methods:{
        diff(holiday){
            const start = moment(holiday.from)
            const end = moment(holiday.to)
            return end.diff(start, 'days')
        },
        async load(){
            state.sub("jophielSickness", value => (this.jophielSickness = value));
            const data = await api.get.jophielSickness();
            state.set("jophielSickness", data.data);
        }
    },
    template
});