<template>
        <div class="tabs is-fullwidth">
            <ul>
                <li>
                    <router-link to="/schedules/successfull">
                        <span class="icon"><i class="mdi mdi-18px mdi-check-circle has-text-success" aria-hidden="true"></i></span>
                        <span>Successful <span class="tag">{{ statusCount.successful}}</span></span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/schedules/norecent">
                        <span class="icon"><i class="mdi mdi-18px mdi-help-circle has-text-link" aria-hidden="true"></i></span>
                        <span>No Recent <span class="tag">{{ statusCount.norecent}}</span></span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/schedules/warnings">
                        <span class="icon"><i class="mdi mdi-18px mdi-alert-circle has-text-warning" aria-hidden="true"></i></span>
                        <span>Warnings <span class="tag">{{ statusCount.warnings}}</span></span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/schedules/errors">
                        <span class="icon"><i class="mdi mdi-18px mdi-close-circle has-text-danger" aria-hidden="true"></i></span>
                        <span>Errors <span class="tag">{{ statusCount.errors }}</span></span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/schedules/noschedules">
                        <span class="icon"><i class="mdi mdi-18px mdi-minus-circle has-text-info" aria-hidden="true"></i></span>
                        <span>No Schedules <span class="tag">{{ statusCount.noschedules }}</span></span>
                    </router-link>
                </li>
            </ul>
        </div>
</template>
<script>
 export default {
  props: {
   statusCount: {
    type: Object,
    required: true
   }
  }
 }
</script>