<script>
import CardUsers from '@inside-users/displays/CardUsers'

export default {
  name: 'UsersModalCard',
  extends: CardUsers,
  methods: {
    $_scaffold(fields) {
      const space = this.getCheckedData(fields, ['spaces', 'data', 0], {})

      return [
        {
          value: this.$_username(fields),
          class: 'name'
        },
        {
          value: space.title,
          class: 'group'
        },
        {
          value: fields.direct_line,
          class: 'phone'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.card-users {
  box-shadow: none;
  border: var(--border-default);

  &:hover {
    transform: scale(1);
    box-shadow: none;

    .name,
    .group,
    .job,
    .phone {
      color: var(--color-light);
      transition: all 0.3s ease;
    }
  }

  &.users-modal-card-customs {
    .avatar {
      width: 50px;
      height: 50px;
      border: none;
    }
  }

  &__infos {
    .group,
    .job,
    .phone {
      font-size: var(--font-size-labor);

      transition: all 0.3s ease;
    }

    .name {
      font-size: var(--font-size-h5);
      font-weight: var(--font-weight-bold);
    }
  }
}
</style>
