<script setup lang="ts">
  import {useLabelEditorStore} from "~/store/labelEditorStore";

  let store = useLabelEditorStore();
</script>

<template>
  <v-container>
    <v-card v-if="store.article != null">
      <v-card-title>{{ store.article.name }}</v-card-title>

      <v-divider/>

      <v-card-text>
        <v-row no-gutters>
          <v-col cols="2">
            <v-sheet>
              BIO:
            </v-sheet>
          </v-col>
          <v-col>
            <v-sheet>
              {{ store.article.bio }}
            </v-sheet>
          </v-col>
        </v-row>

        <v-row no-gutters>
          <v-col cols="2">
            <v-sheet>
              Herkunft:
            </v-sheet>
          </v-col>
          <v-col>
            <v-sheet>
              {{ store.article.origin }}
            </v-sheet>
          </v-col>
        </v-row>

        <v-row no-gutters>
          <v-col cols="2">
            <v-sheet>
              Varianten:
            </v-sheet>
          </v-col>
          <v-col>
            <v-sheet>
              {{ store.article.variants.length }}
            </v-sheet>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<style scoped>

</style>