<template>
  <div class="schoolclass">
    <h2 class="schoolclass__name">{{name}}</h2>
    <div class="schoolclass__members schoolclass-members">
      <ul class="schoolclass-members__list members-list">
        <li v-for="user in users" :key="user.id" class="members-list__item">
          <p class="member-item"><span class="member-item__name">{{fullName(user)}}</span> <span class="member-item__role">{{role(user)}}</span></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

  export default {
    props: ['users', 'name'],
    methods: {
      fullName (user) {
        return `${user.firstName} ${user.lastName}`;
      },
      role ({permissions}) {
        return permissions.indexOf('users.can_manage_school_class_content') > -1 ? 'Lehrperson' : '';
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  $height: 52px;

  .members-list {
    &__item {
      line-height: $height;
      height: $height;
      border-bottom: 1px solid $color-silver-dark;
    }
  }

  .member-item {

    line-height: $height;
    height: $height;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    &__name {
      font-family: $sans-serif-font-family;
      font-weight: $font-weight-bold;
    }

    &__role {
      padding-right: $medium-spacing;
    }
  }
</style>
