<commit_before><template>
  <h2>Grainbins</h2>
  <div v-if="grainbins.length == 0" class="row">
    <h3>No grainbins found</h3>
  </div>
</template>

<script lang="ts" , setup>
import { ref } from "vue";

import { Grainbin } from "@/interfaces/grainbin.interface";

const grainbins = ref<Array<Grainbin>>([]);
</script>
><commit_msg>add grainbin card and grainbin update component<commit_after><template>
  <h2>Grainbins</h2>
  <div v-if="grainbins.length == 0" class="row">
    <h3>No grainbins found</h3>
  </div>
  <div
    v-for="grainbin in grainbins"
    :key="grainbin.id"
    class="row align-items-start g-3 mb-3"
  >
    <div class="col-md-12 col-lg-6 col-xl-3">
      <grainbin-card :grainbin="grainbin" />
    </div>
    <div class="col-md-12 col-lg-6 col-xl-3">
      <grainbin-update :grainbinID="grainbin.id"/>
    </div>
  </div>
</template>

<script lang="ts" , setup>
import { onMounted, ref } from "vue";

import { GrainbinRequest } from "@/api/grainbin.api";
import { Grainbin } from "@/interfaces/grainbin.interface";
import GrainbinCard from "@/components/grainbin/GrainbinCard.vue";
import GrainbinUpdate from "@/components/grainbin/GrainbinUpdate.vue";

const grainbinAPI = new GrainbinRequest();
const grainbins = ref<Array<Grainbin>>([]);

onMounted(() => {
  grainbinAPI.getGrainbins().then((response) => {
    grainbins.value = response;
  });
});
</script>
{'fraction_non_alphanumeric': 0.18339350180505415, 'fraction_numerical': 0.01444043321299639, 'mean_word_length': 4.133333333333334, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3861283', 'n_tokens_mistral': 542, 'n_tokens_neox': 526, 'n_words': 103}