<template>
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-6" style="margin-bottom: 20px;margin-top: 20px">
        <div class="custom-control custom-checkbox custom-control-inline">
          <input
            type="checkbox"
            class="custom-control-input"
            id="rloop-model-1"
            value="0"
            v-model.number="rizModel"
            @change="updateValue"
          />
          <label
            class="custom-control-label"
            for="rloop-model-1"
            v-b-tooltip.hover
            title="Detecting three G-clusters between nucleotides, with at least 3 conseutive guanines"
          >
            RIZ 3G-cluster
          </label>
        </div>
      </div>

      <div class="col-md-6">
        <div class="custom-control custom-checkbox custom-control-inline">
          <input
            type="checkbox"
            class="custom-control-input"
            id="rloop-model-2"
            value="1"
            v-model.number="rizModel"
            @change="updateValue"
          />
          <label
            class="custom-control-label"
            for="rloop-model-2"
            v-b-tooltip.hover
            v-b-tooltip.placement.bottom
            title="Detecting two G-clusters between nucleotides, with at least 4 conseutive guanines"
          >
            RIZ 4G-cluster
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rizModel: [0],
    }
  },
  methods: {
    updateValue() {
      this.$emit('checkModel', this.rizModel)
    },
  },
}
</script>