<template>
    <tr>
        <th>{{ name }}</th>
        <td>
            <div class="progress">
                <div class="progress-bar" role="progressbar" :style="{ width: getPercent() + '%' }"
                    v-bind:aria-valuenow="getPercent()" aria-valuemin="0" aria-valuemax="100">
                    {{ getPercent() }}%
                </div>
            </div>
        </td>
        <td class="rightCell">
            {{ Math.round((total - used) / 1024) }}
            KByte
        </td>
        <td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
        <td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
    </tr>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    props: {
        name: String,
        total: { type: Number, required: true },
        used: { type: Number, required: true },
    },
    methods: {
        getPercent() {
            return Math.round((this.used / this.total) * 100);
        },
    },
});
</script>
