<template>
  <div class="photo-grid">
    <div v-for="p of transformed" :key="p.id" class="photo-card">
      <img height="150" width="150" :src="p.link">
      <span>{{p.name}}</span>
      <span>{{p.id}}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ReportPhotos',
  props: {
    columnMetadata: {
      type: Array,
      default: () => []
    },
    rows: {
      type: Array,
      default: () => []
    },
    title: String,
    loading: Boolean,
    error: Boolean
  },
  computed: {
    photoLinkIndex () {
      return this.columnMetadata.findIndex(c => c.qualifier.includes('link_photo'))
    },
    nameIndex () {
      return this.columnMetadata.findIndex(c => c.name === "Applicant Name")
    },
    transformed () {
      const photoIndex = this.photoLinkIndex
      const nameIndex = this.nameIndex
      const photoLink = this.columnMetadata[photoIndex].link
      return this.rows.map(r => {
        const id = r[photoIndex]
        const link = photoLink.replace(/:value/, id)
        const name = r[nameIndex]
        return { link, name, id }
      })
    }
  }
}
</script>
<style scoped>
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  grid-gap: 0.5rem;
}

.photo-card {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  justify-content: center;
  border: thin solid #333;
  border-radius: 3px;
  text-align: center;
  grid-gap: 0.1rem;
}
</style>
