<template>
  <div class="x-system-header">
    <div class="x-system-header__logo">
      <slot name="logo">
        <XIcon v-if="$system.logo" v-bind="logo"></XIcon>
        <span class="x-system-header__name">{{$system.title}}</span>
      </slot>
    </div>
    <div class="x-system-header__info">
      <slot name="info"></slot>
    </div>
  </div>
</template>

<script>
import {XIcon} from '@newpearl/ui';

export default {
  inject: ['$system'],
  components: {
    XIcon
  },
  computed: {
    logo() {
      const logo = this.$system.logo;
      return typeof logo === 'object'
        ? {...logo, size: 26}
        : {
          name: logo,
          size: 26
        };
    }
  }
};
</script>
