<template>
  <q-img
    contain
    position="95% 5%"
    style="opacity: 0.4; max-height: 75px; min-height: 75px; margin-right: 5px"
    alt="Allégeance"
    :src="src"
  />
</template>

<script>
export default {
  name: 'ImgAllegiance',
  props: {
    allegiance: String
  },
  data () {
    return {
      src: ''
    }
  },
  watch: {
    allegiance: {
      immediate: true,
      handler (props) {
        if (props !== undefined) {
          switch (props.toLowerCase()) {
            case 'empire':
              this.src = require('src/assets/Empire.png')
              break
            case 'alliance':
              this.src = require('src/assets/Alliance.png')
              break
            case 'federation':
              this.src = require('src/assets/Federation.png')
              break
            case 'independent':
              this.src = require('src/assets/Independent.png')
              break
          }
        }
      }
    }
  }
}
</script>
