<template>
  <section>
    <b-card-group deck id="cars">
      <CarPreview
        v-for="car in cars"
        :id="car.id"
        :key="car.id"
        :title="car.title"
        :excerpt="car.previewText"
        :thumbnailImage="car.thumbnailUrl"
        :fuel="car.fuel"
        :gearbox="car.gearbox"
        :brand="car.brand"
        :model="car.model"
        :year="car.year"
        :miles="car.miles"
      />
    </b-card-group>
  </section>
</template>

<template>
  <nuxt-link to="id">
    <!-- <article class="car-preview"> -->
    <b-card :title="title" :img-src="thumbnailImage" img-top>
      <b-card-text>
        {{ description }}
        <font-awesome-icon :icon="['fas', 'fa-car-alt']" />
        {{ brand }} {{ model }} - {{ year }}
        <br />
        <font-awesome-icon :icon="['fas', 'tint']" />Bränsle: {{ fuel }}
        <br />
        <font-awesome-icon :icon="['fas', 'cog']" />Växelåda: {{ gearbox }}
        <br />
        <font-awesome-icon :icon="['fas', 'tachometer-alt']" />
        Miltal: {{ miles }}
      </b-card-text>
      <div slot="footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </b-card>
  </nuxt-link>
</template>