<template>
  <figure class="card" @click="chooseAsset" :class="{ selected: valueCopy == asset.id }">
    <img class="card-img-top" :src="previewUrl" />
    <figcaption>
      {{ asset.title }}
    </figcaption>
  </figure>
</template>

<style lang="scss" scoped>
.card {
  cursor: pointer;
  width: 100%;

  &.selected {
    background-color: #01335f;
    color: #fff;
    outline: 2px #01335f solid;

    .card-block {
      color: #fff;
    }
  }
}

figcaption {
  padding: 5px 10px;
}

img {
  object-fit: cover;
  width: 100%;
  height: 110px;

  &:hover {
    object-fit: contain;
  }
}
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Asset } from '../types/api';
import AssetApi from '../api/asset-api';
import { ValueSync } from '../tools/decorators';

@Component
export default class AssetOverviewItem extends Vue {
  @Prop(Object) readonly asset!: Asset;
  @ValueSync('value', { type: String }) valueCopy!: string | null;

  previewUrl: string | null = null;

  async mounted() {
    this.previewUrl = await AssetApi.getPreviewUrlForAsset(this.asset);
  }

  chooseAsset() {
    this.valueCopy = this.asset.id;
  }
}
</script>
