<template>
  <section>
    <div class="main-content" v-if="!activePropertyId">
      <slot name="main"></slot>
    </div>
    <div v-else class="property-content">
      <slot name="properties" :active-id="activePropertyId" :close="close"></slot>
    </div>
  </section>
</template>

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

@Component
export default class AssetDetailEditor extends Vue {
  activePropertyId = '';

  open(id: string) {
    this.activePropertyId = id;
  }

  close() {
    this.activePropertyId = '';
  }
}
</script>
