<template>
  <div>
    <header class="page-header pt-4 pb-3">
      <h1>Asset Overzicht</h1>

      <div class="page-header-buttons">

        <router-link class="btn btn-primary" :to="{name: 'asset-create'}" v-if="permissions.canCreate"><span class="icon-plus"></span> Asset toevoegen</router-link>
        <span class="btn btn-primary disabled" v-else><span class="icon-plus"></span> Asset toevoegen</span>
      </div>
    </header>

    <asset-overview v-model="assetToNavigateTo"></asset-overview>
  </div>
</template>

<script>
  import assetOverview from './asset-overview.vue';
  import { permissionStore } from '../tools/permission-store';

  export default {
    name: 'asset-overview-page',
    data() {
      return {
        assetToNavigateTo: null
      }
    },
    watch: {
      assetToNavigateTo(asset) {
        if (asset) {
          this.$router.push({name: 'asset-edit', params: {id: asset.id}});
        }
      }
    },
    computed: {
      permissions() {
        return permissionStore.getPermissions('CmsAsset');
      }
    },
    components: {
      assetOverview
    }
  };
</script>
