Vue.use(VueTables.client, {
    compileTemplates: true,
    highlightMatches: true,
    dateFormat: "DD-MM-YY",
  /*  skin: "table-compact",*/
   pagination: {
    dropdown:true,
     chunk:5
    },
    filterByColumn: true,
    texts: {
        filter: "Search:"
    },
    datepickerOptions: {
        showDropdowns: true
    },

});

new Vue({
    el: "#people",
    created: function(){
        this.$http.get('/api/footage')
            .then(function(response){
                this.tableData = response.data
            }.bind(this))
    },

    methods: {
        deleteMe: function(id) {
            alert("Delete " + id);
        },
    },
    data: {
        options: {
            columns: ['created_at', 'name', 'profession', 'footage_date', 'type', 'link'],
            dateColumns: ['footage_date'],
            datepickerOptions : {ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }},
            headings: {
                created_at: 'Added',
                name: 'Name',
                profession: 'Profesion',
                footage_date: 'Footage Date',
                type: 'Type',
                link: 'Link',
            },
            templates: {
                expand:"<a href=/footage/{id}><i class='fa fa-expand'></i></a>",
            },
        },


        tableData: [{/* id: "1",
            name: "Sidney Brakus",

            footage_date: randomDate(new Date(1925, 0, 1), new Date(2012, 0, 1)) */}],
    }
});

function randomDate(start, end) {
    return moment(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}