<template>
  <div>
    <div class="form-check d-flex flex-row flex-start selection">
        <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible">
        <LegendElement :layername="layername" :layerindex="layerindex"></LegendElement>
        <label class="layername form-check-label">{{layername}}</label>
    </div>
    <div v-if="isVisible && (layername == 'Bottleneck isolines')" class="card">
      <img src="../application/assets/legend_contour_lines.png"
           class="rounded mx-auto d-block">
    </div>
  </div>
</template>

<style lang="scss">
.selection {
  text-align: left;
}
.layername {
  margin-left: $small-offset;
}
</style>


<script>
import LegendElement from "./LegendElement.vue";
export default {
  props: ["layername", "layerindex", "isVisible"],
  name: "layerselect",
  components: {
    LegendElement
  },
  methods: {
    visibilityToggled() {
      this.$emit("visibilityToggled", this.layerindex);
    }
  }
};
</script>