<template>
<div class="mt-sm-3" v-if="userLabel !== null">
  <b-button variant="primary" class="float-right" v-on:click="back()">Back</b-button>
  <h5>Results for <strong>{{userLabel}}</strong>:</h5>

  <b-container class="mt-sm-5">
    <b-row>
      <b-col class="text-left">
        <h5>Is member of</h5>
        <div v-if="groups.length === 0">
          No groups to show
        </div>
        <div v-if="groups.length > 0">
          <ul>
            <li v-for="group in groups" v-bind:key="group.groupId">
              <a href="#" v-on:click="openGroup(group.groupId)">
                {{group.groupCompleteName.join(' / ')}}
              </a>
            </li>
          </ul>
        </div>
      </b-col>
      <b-col v-if="permissions.length > 0">
        <h5>Permissions</h5>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Group</th>
              <th>Permission</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(p, rowIndex) in permissions" v-bind:key="rowIndex">
              <td>
                <a href="#" v-on:click="openGroup(p.groupId)">
                  {{p.groupCompleteName.join(' / ')}}
                </a>
              </td>
              <td>{{p.permission}}</td>
            </tr>
          </tbody>
        </table>
      </b-col>
    </b-row>
  </b-container>

</div>
</template>

<script>
import {
  mapState
} from 'vuex';

export default {
  name: 'UserSearchResult',
  computed: mapState({
    userLabel: state => state.model.userSearchResults.userLabel,
    groups: state => state.model.userSearchResults.groups,
    permissions: state => state.model.userSearchResults.permissions
  }),
  methods: {
    back() {
      this.$store.commit('displaySearchResults');
    },
    openGroup(groupId) {
      this.$store.commit('openGroup', groupId);
    }
  }
}
</script>
