<template>
  <div class="asset-detail-variants">
    <h4>Uitsnedes</h4>
    <p>
      Dezelfde foto, maar dan met andere beeldverhoudingen. Bijvoorbeeld: de originele foto heeft een beeldverhouding van (2:3, een portret
      afbeelding). De uitsnede kan een beeldverhouding krijgen van 16:9 (landscape afbeelding), met daarin het onderwerp van de foto op de
      juiste positie.
    </p>
    <section v-for="(variant, index) in asset.variants" v-bind:key="variant.id">
      <asset-detail-variant
        :asset="asset"
        v-model="asset.variants[index]"
        :index="index"
        v-on:touched="handleTouched"
        v-on:delete="deleteVariant"
      />
    </section>
    <button type="button" class="btn btn-outline-secondary mr-1 mb-1" @click="addVariant">
      <span class="icon-plus"></span>
      Voeg uitsnede toe
    </button>
  </div>
</template>

<style lang="scss" scoped>
.asset-detail-variants {
  margin-bottom: 10px;
}
</style>

<script>
import assetDetailVariant from './asset-detail-variant.vue';

export default {
  name: 'asset-detail-variants',
  props: {
    asset: Object
  },
  methods: {
    addVariant() {
      this.asset.variants.push({
        name: 'Uitsnede zonder naam'
      });
    },
    handleTouched(id) {
      const variantIndex = this.asset.variants.findIndex((v) => v.id === id);
      if (variantIndex !== -1) {
        this.asset.variants[variantIndex].isUnTouched = false;
      }
    },
    deleteVariant(index) {
      this.asset.variants.splice(index, 1);
    }
  },
  components: {
    assetDetailVariant
  }
};
</script>
