<template>
  <div v-show="id === activeId">
    <div class="d-flex align-items-center">
      <button class="btn ml-n3" @click.prevent="close"><arrow-left-icon /></button>
      <h5 class="m-0">{{ title }}</h5>
    </div>
    <hr>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class AssetDetailEditorProperty extends Vue {
  @Prop({ type: String, required: true }) readonly id!: string;
  @Prop({ type: String }) readonly title!: string;
  @Prop({ type: String }) readonly activeId!: string;
  @Prop({ type: Function, required: true }) readonly close!: () => void;
}
</script>
