<template>
  <div class="link-form">
    <input
      :value="value.text"
      placeholder="Name erfassen..."
      class="link-form__text skillbox-input"
      @input="$emit('link-change-text', $event.target.value, index)">

    <input
      :value="value.url"
      placeholder="URL einfügen..."
      class="link-form__url skillbox-input"
      @input="$emit('link-change-url', $event.target.value, index)">
  </div>
</template>

<script>
  export default {
    props: ['value', 'index']
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .link-form {
    display: grid;
    grid-auto-rows: auto;
    grid-row-gap: 11px;

    &__text,
    &__url {
      width: $modal-input-width;
    }
  }
</style>
