<template>
  <div>
    <table
      class="table"
      v-if="attrs"
    >
      <thead>
        <tr>
          <th width="170px">Thông tin</th>
          <th>Diễn giải</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="v in attrs">
          <td>{{ v.name }}</td>
          <td>
            <span class="icon-text">
              <span>{{ v.value }}</span>
              <span
                class="ml-5"
                v-if="!$empty(v.match)"
              >
                <Icon
                  :name="
                    v.match ? 'material-symbols:check-rounded' : 'material-symbols:error-circle-rounded-outline-sharp'
                  "
                  :size="26"
                  :class="`has-text-${v.match ? 'primary' : 'danger'}`"
                />
              </span>
              <span
                class="ml-5"
                v-if="!$empty(v.auth)"
              >
                <Icon
                  :name="
                    v.auth ? 'material-symbols:check-rounded' : 'material-symbols:error-circle-rounded-outline-sharp'
                  "
                  :size="26"
                  :class="`has-text-${v.auth ? 'primary' : 'danger'}`"
                />
              </span>
              <span
                class="ml-5"
                v-if="!$empty(v.expiry)"
              >
                <Icon
                  :name="
                    v.expiry ? 'material-symbols:error-circle-rounded-outline-sharp' : 'material-symbols:check-rounded'
                  "
                  :size="26"
                  :class="`has-text-${v.expiry ? 'danger' : 'primary'}`"
                />
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: ["file"],
  data() {
    return {
      attrs: this.file ? this.file.file__verified_info || this.file.verified_info : undefined,
    };
  },
};
</script>
