<template>
  <div>
    <div class="kit__field field">
      <div class="field__wrap field__wrap--title">
        <input type="text"
               :value="title"
               class="field__input"
               placeholder="Заголовок раздела"
               @change="onTitleChange">
      </div>
    </div>
    <div class="kit__field field">
      <div class="field__wrap">
        <div class="field__flex">
          <input type="text"
                 :value="videoUrl"
                 class="field__input field__input_sm"
                 placeholder="Вставьте ссылку на Vimeo, YouTube, или другой сервис"
                 @change="onVideoUrlChange">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "block-video",
        props: ["index", "title", "videoUrl"],
        methods: {
            onTitleChange(event) {
                this.$emit('update:title', event.target.value);
            },
            onVideoUrlChange(event) {
                this.$emit('update:videoUrl', event.target.value);
            },
        }
    }
</script>

<style scoped>

</style>
