<template>
  <b-nav-item-dropdown no-caret right>
    <template slot="button-content">
      <font-awesome-icon icon="microchip" /> Memory
      <b-progress :value="this.status.usedPercent" height=".5rem" :variant="percentageClass"></b-progress>
    </template>
    <b-dropdown-header class="text-center">Memory</b-dropdown-header>
    <div class="text-center">
      <span :class="'badge badge-' + percentageClass"><formatBytes :bytes="status.used * 1024" /> / <formatBytes :bytes="status.total * 1024" /></span>

    </div>
  </b-nav-item-dropdown>
</template>

<script>
  export default {
    name: 'memory_status',
    props: [ 'status' ],
    computed: {
      percentageClass: function() {
        let usedPercent = this.status.usedPercent;
        if (usedPercent >= 90) {
          return 'danger';
        } else if (usedPercent >= 80) {
          return 'warning';
        }
        return 'success'
      },
    }
  }
</script>
