<script setup lang="ts">
import getProgress from "~/plugins/getProgress";

const progress = getProgress();
</script>

<template>
  <div class="m-auto">
    <div v-if="progress">
      <table class="table-auto text-left">
        <thead>
        <tr>
          <th>Metric</th>
          <th>Value</th>
        </tr>
        </thead>

        <tbody>
        <tr>
          <td>Percentage of Ipv4 scanned</td>
          <td>{{progress.percentageOfIpv4Scanned}}</td>
        </tr>
        <tr>
          <td>Total filtered</td>
          <td>{{progress.totalFiltered}}</td>
        </tr>
        <tr>
          <td>Total Discarded</td>
          <td>{{progress.totalDiscarded}}</td>
        </tr>
        <tr>
          <td>Amount of Ipv4 left</td>
          <td>{{progress.amountOfIpv4Left}}</td>
        </tr>
        <tr>
          <td>Discarded db size</td>
          <td>{{progress.discardedDbSize}}</td>
        </tr>
        <tr>
          <td>Filtered db size</td>
          <td>{{progress.filteredDbSize}}</td>
        </tr>
        <tr>
          <td>Unfiltered db size</td>
          <td>{{progress.myDbSize}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>

</style>