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

  let store = useLabelEditorStore();

  //const rules = [(v: string | any[]) => v.length <= 256 || 'Maximal 256 Zeichen.'];
</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-row no-gutters>
              <v-checkbox
                  v-model="store.article.bio"
                  label="BIO"
                  :readonly=true
              />
            </v-row>

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

          <v-col cols="5" style="padding: 5px;">
            <v-textarea
                :model-value="store.article.description"
                :tile=true
                label="Beschreibung"
                counter
                :persistentCounter=true
                rows="6"
                no-resize
            >
              <template v-slot:counter="{ counter }">
                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
              </template>
            </v-textarea>
          </v-col>

          <v-col cols="5" style="padding: 5px;">
            <v-textarea
                :model-value="store.article.ingredients"
                :tile=true
                label="Zutaten"
                counter
                :persistentCounter=true
                rows="6"
                no-resize
            >
              <template v-slot:counter="{ counter }">
                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
              </template>
            </v-textarea>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<style scoped>

</style>