<template>
  <div class="tfv-wrapper"
       v-if="![void 0, null, ''].includes(col.value)
         && (displayValue(col.name) !== headerFieldName || !excludeHeaderColFromCardBody)"
  >
    <reference-book-item
      v-if="itemView === 'dictionary' && itemDictionary"
      :dictionary="itemDictionary"
      :value="col.value"
    >
      <template
        v-slot="{options, value, loading}"
      >
        <q-skeleton v-if="loading" type="text" />
        <q-card-section
          v-else
          class="entry"
        >
          <div class="grid-item-label text-weight-medium text-grey-9">
            {{ col.label }}
          </div>
          <div class="grid-item-value text-primary">{{ value }}</div>
        </q-card-section>
      </template>
    </reference-book-item>
<!--  TODO: delete if fias fetching not needed anymore  -->
<!--    <fias-address-view-->
<!--      v-else-if="itemView === 'custom' && itemCustomTemplate === 'fiasAddress'"-->
<!--      :id="col && col.value"-->
<!--    >-->
<!--      <template v-slot="{loading, value}">-->
<!--        <q-skeleton v-if="loading" type="text" />-->
<!--        <q-card-section-->
<!--          v-else-->
<!--          class="entry"-->
<!--        >-->
<!--          <div class="grid-item-label text-weight-medium text-grey-9">-->
<!--            {{ col.label }}-->
<!--          </div>-->
<!--          <div class="grid-item-value text-primary">{{ value }}</div>-->
<!--        </q-card-section>-->
<!--      </template>-->
<!--    </fias-address-view>-->
    <q-card-section
      v-else
      class="entry"
    >
      <div class="grid-item-label text-weight-medium text-grey-9">
        {{ col.label }}
      </div>
      <div class="grid-item-value text-primary">{{ displayValue(col.value) }}</div>
    </q-card-section>
  </div>
</template>

<script src="./TableFillView.ts" lang="ts"></script>

<style lang="scss" scoped>
.entry {
  padding: 0;

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  &.header {
    font-size: 18px;
    font-weight: 500;

    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
  }
}
</style>
