<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 class="mdi mdi-24px mdi-minus has-text-info" aria-hidden="true"></i></span>
                        {{ schedule.client_name }}</td>
                    <td>none</td>
                    <td>never</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

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

