<style lang="scss" scoped>
.app {
  &:hover {
    background: #4579C7;
    color: #c5c5c5;
    span {
      color: white !important;
    }
  }
}
</style>

<template>
  <div class="p-3">
    
    <article class="media p-3 m-0 is-clickable app"
        v-for="(app, index) in appsAuthorized"
        :key="index"
        @click="select(app)">
      <div class="media-left">
        <figure class="image is-48x48 has-text-centered pt-3">
          <b-icon
            :icon="app.icon"
            type="is-dark"
            size="is-medium"/>
        </figure>
      </div>
      <div class="media-content">
        <div class="content">
          <p>
            <span class="is-size-5 has-text-black">{{ $t('app.'+app.name+'.name') }}</span> 
            <br />
            <small>{{ $t('app.'+app.name+'.description') }}</small>
          </p>
        </div>
      </div>
    </article>

  </div>
</template>

<script>
import apps from "../apps.json"

export default {
  name: "AppList",
  computed: {
    apps() {
      return apps;
    },
    appsAuthorized() {
      if (!this.apps) return [];
      return this.apps.filter(
        (m) => this.roles.indexOf(m.role) !== -1 || !m.role
      );
    },
  },
  methods: {
    select(app) {
      let url = window.location.origin + app.url;
      window.location.href = url;
    },
  },
};
</script>