<template>
  <div class="d-flex flex-column">
    <div class="custom-control custom-checkbox my-1" v-for="(odpoved, index) in odpovede" :key="odpoved.id">
      <input
          type="checkbox"
          autocomplete="off"
          v-model="odpoved.zvolena"
          class="custom-control-input"
          :id="`check-${index}`"
          :key="`check-${index}`"
      >
      <label
          v-html="odpoved.znenie"
          class="custom-control-label"
          :for="`check-${index}`"
          :style="{ fontSize: velkostPisma + 'rem !important' }"
      ></label>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZoznamOdpovediComponent",
  props: {
    odpovede: {
      type: Array,
      required: true,
      default () {
        return [
          {
            id: null,
            znenie: null,
            zvolena: false,
            otazka_id: null,
          }
        ]
      },
    },
    velkostPisma: {
      type: Number,
      default() {
        return 1;
      }
    },
  },
}
</script>

<style scoped>

</style>