<template>
  <div class="row">
    <div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name">
      <a :href="game.url">
        <div class="item">
          <div class="item-image">
            <img class="item-image-main" :src="game.image" />
            <img class="item-image-icon" :src="game.platform" />
          </div>
          <div class="item-details">
            <div>
              <h5 style="display: inline-block;">{{game.name}}</h5>
            </div>
            <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
          </div>
        </div>
      </a>
    </div>
    <div class="text-center">
      <b-spinner type="grow" label="Spinning"></b-spinner>
    </div>
  </div>
</template>

<style>
  .item {
    height: 100%;
    background: #222;
    border-radius: 10px;
  }

  .item-image {
    display: block;
    padding-bottom: 60%;
    /* 60% sirky */
    position: relative;
  }

  .item-image-main {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
  }

  .item-image-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 30px;
    height: auto;
  }

  .item-details {
    padding: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .item-counts {
    border: 1px solid green;
    color: green;
    padding: 4px;
    font-size: 12px;
    font-weight: 600;
  }
</style>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        games: []
      };
    },
    async created() {
      try {
        var res = async axios.get(
          "https://api.gabenparadise.com/api/data",
          { crossdomain: true }
        );
        this.games = res.data;
      } catch (e) {
        console.error(e);
      } finally {
        console.error('finally');
      }
    }
  };
</script>