<script setup>
import { computed } from "vue";
import { format } from "quasar";
const { humanStorageSize } = format;
const props = defineProps({
  storage: {
    type: Object,
    required: true
  }
});
const usagePercent = computed(() => {
  return (props.storage.totalSpace - props.storage.freeSpace) / props.storage.totalSpace;
});
const progressColor = computed(() => {
  if (usagePercent.value > 0.95) {
    return "negative";
  }
  if (usagePercent.value > 0.9) {
    return "warning";
  }
  return "primary";
});
</script>

<template>
    <q-card>
        <q-card-section>
            {{ $t("Storage") }}
            <q-linear-progress rounded size="20px" :value="usagePercent" :color="progressColor" class="q-mt-sm" />
            {{ $t('storage_usage', [humanStorageSize(storage.freeSpace), humanStorageSize(storage.totalSpace)]) }}
        </q-card-section>
    </q-card>
</template>
