<template v-cloak>
    <div>
        <headernav :section="section" :subsection="subsection"></headernav>
        <scheduletabs :statusCount="statusCount"></scheduletabs>
        <table class="table is-fullwidth is-striped is-hoverable">
            <thead>
                <tr>
                    <th>Client</th>
                    <th>Schedule</th>
                    <th>When <span class="icon"><i class="mdi mdi-18px mdi-chevron-up" aria-hidden="true"></i></span>
                        <span class="icon"><i class="mdi mdi-28px mdi-chevron-down" aria-hidden="true"></i></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="schedule in schedules" :key="schedule.id">
                    <td>
                        <span class="icon tbl-icon">
                        <i v-bind:class="{  'has-text-success mdi-check': schedule.last_backup_status=='Success',
                                            'has-text-warning mdi-exclamation': schedule.last_backup_status=='Warning',
                                            'has-text-danger mdi-close': schedule.last_backup_status=='Error'
                                            
                                        }" class="mdi mdi-24px" aria-hidden="true"></i>
                        </span>
                        {{ schedule.client }}</td>
                    <td>{{ schedule.name }}</td>
                    <td>{{ schedule.date }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data () {
    return {
      schedules: null,
      statusCount: {},
      section: 'Schedules',
      subsection: "no recent"
    }
  },
    mounted () {
    axios
      .get('/api/v1/schedule/norecent')
      .then(response => (this.schedules = response.data.data, this.statusCount = response.data.count))
  }
}
</script>

