<template>
  <div class="app-container">
    <div class="app-container--page--title">
      <div v-if="title || subtitle" class="app-container--page--title--content">
        <h1>{{ title }}</h1>
        <p>{{ subtitle }}</p>
      </div>
      <div v-if="$slots.icon" class="app-container--page--title--icon">
        <slot name="icon" />
      </div>
    </div>
    <div class="app-container--page--content">
      <div v-if="$slots.search" class="app-container--search">
        <slot name="search" />
      </div>
      <slot v-if="$slots.toolbar" name="toolbar" />
      <div v-if="$slots.table" class="app-container--table">
        <slot name="table" />
      </div>
      <div v-if="$slots.form" class="app-container--form">
        <slot name="form" />
      </div>
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppContainer',
  props: {
    title: {
      type: String,
      default: ''
    },
    subtitle: {
      type: String,
      default: ''
    }
  }
}
</script>
