<script setup lang="ts">
import { usePowerItems } from '@/stores/powerItems'
import { storeToRefs } from 'pinia'
import StandardItem from '@/components/StandardItem.vue'

const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
</script>

<template>
  <v-card>
    <v-card-title>Standard Items</v-card-title>
    <v-card-subtitle>Items that exist all the time</v-card-subtitle>
    <v-card-item>
      <v-table density="compact">
        <thead>
          <tr>
            <!-- <th></th> -->
            <th class="text-left font-weight-bold">Name</th>
            <th class="text-left font-weight-bold">Power</th>
            <th class="text-left font-weight-bold">Owned</th>
            <th class="text-right font-weight-bold">Total</th>
          </tr>
        </thead>
        <tbody>
          <StandardItem
            v-for="[key, item] in standardFellowItems"
            :key="key"
            :itemID="key"
            :itemName="item.itemName"
            :itemIcon="'none'"
            :owned="item.owned"
            :minPower="item.minItemPower"
            :maxPower="item.maxItemPower"
          />
        </tbody>
        <tfoot>
          <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td></td>
            <td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
          </tr>
        </tfoot>
      </v-table>
    </v-card-item>
  </v-card>
</template>
