<template functional>
  <table class="table is-narrow is-hoverable is-bordered">
    <tbody>
      <tr v-for="(value, propertyName, index) in props.attributes" :key="index">
        <td>
          <span class="property-name">{{ propertyName | capitalize }}</span>
        </td>
        <td class="attr-val">
          {{ value }}
        </td>
        <BaseIcon
          style="margin: 4px 0 0 -24px"
          :name="
            `level-${
              props.credibility && props.credibility[propertyName]
                ? props.credibility[propertyName]
                : 3
            }`
          "
          :radius="24"
          class="icon"
        />
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    attributes: {
      type: Object,
      required: true
    },
    credibility: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="sass" scoped>
span.property-name
  color: #919191
table
  width: auto
  font-size: 0.88em
td.attr-val
  width: 100%
</style>
