<template>
  <div class="user-card h-100">
    <div class="image-wrap">
      <img :src="getImage().url" alt="">
    </div>
    <div class="info-wrap" :style="{color: getFontColor()}">
      <div class="name">
        {{getTitle().text}}
      </div>
      <div class="role" :style="{color: getFontColor()}">
        {{getSubTitle().text}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    widget: {
      type: Object,
      required: true
    }
  },
  methods: {
    getImage () {
      return this.widget.visual_properties.image || {}
    },
    getTitle () {
      return this.widget.visual_properties.title || {}
    },
    getSubTitle () {
      return this.widget.visual_properties.subtitle || {}
    },
    getCard () {
      return this.widget.visual_properties.card || {}
    },
    getFontColor () {
      if ((this.getCard().backgroundColor) === '#ffffff') {
        return '#000000'
      } else {
        return this.getCard().fontColor
      }
    },
    resizeWidget () {
    }
  }
}
</script>

<style lang="scss" scoped>
  .user-card {
    display: flex;
    padding: 5px;
    .image-wrap {
      height: 100%;
      width: 75px;
      display: flex;
      align-items: center;
      img {
        height: 75px;
        width: 75px;
        border-radius: 50%;
      }
    }
    .info-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: calc(100% - 75px);
      padding-left: 20px;
      .name {
        font-weight: bold;
      }
      .role {
        // color: #98a6ad;
      }
    }
  }
</style>
