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

const progress = getProgress();
</script>

<template>
  <div class="h-screen grid place-items-center">
    <div v-if="progress">
      <table class="table-auto border-gray-300">
        <thead>
        <tr>
          <th class="px-4 py-2">Metric</th>
          <th class="px-4 py-2">Value</th>
        </tr>
        </thead>

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

<style scoped>

</style>