<template>
  <NcAppSidebar title="cat-picture.jpg" subtitle="last edited 3 weeks ago">
    <NcAppSidebarTab icon="icon-settings" name="Settings" id="settings-tab">
      <template #icon>
        <Cog :size="20" />
      </template>
      Settings tab content
    </NcAppSidebarTab>
    <NcAppSidebarTab icon="icon-share" name="Sharing" id="share-tab">
      Sharing tab content
    </NcAppSidebarTab>
  </NcAppSidebar>
</template>
<script>
import Cog from "vue-material-design-icons/Cog";

export default {
  components: {
    Cog
  }
};
</script>

<template>
  <NcAppSidebar
    :title.sync="title"
    :title-editable="true"
    title-placeholder="Filename"
    subtitle="last edited 3 weeks ago"
  >
    <!-- Insert your slots and tabs here -->
  </NcAppSidebar>
</template>
<script>
export default {
  data() {
    return {
      title: "cat-picture.jpg"
    };
  }
};
</script>

<template>
  <NcAppSidebar
    :title="title"
    :title-editable.sync="titleEditable"
    :title-placeholder="titlePlaceholder"
    :subtitle="subtitle"
    @update:title="titleUpdate"
  >
    <template #tertiary-actions>
      <form>
        <input type="checkbox" @click="toggledCheckbox" />
      </form>
    </template>
  </NcAppSidebar>
</template>
<script>
export default {
  data() {
    return {
      title: "cat-picture.jpg",
      titlePlaceholder: "Filename",
      subtitle: "last edited 3 weeks ago",
      titleEditable: false
    };
  },
  methods: {
    titleUpdate(e) {
      this.title = e;
    },
    toggledCheckbox() {
      alert("toggle");
    }
  }
};
</script>

<template>
  <NcAppSidebar title="cat-picture.jpg" :empty="true">
    <NcEmptyContent icon="icon-search">
      Content not found.
    </NcEmptyContent>
  </NcAppSidebar>
</template>