<template>
  <article class="cards">
    <div class="container cards__container">
      <div class="row cards__row">
        <header class="col-12 cards__header">
          <h2 class="cards__title">Cards</h2>
        </header>
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 cards__wrapper">
          <card
            card-style="basic"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>          
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 cards__wrapper">
          <card
            card-style="basic-boxed"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 cards__wrapper">
          <card
            card-style="basic-image"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-6 cards__wrapper">
          <card
            card-style="basic-image-left"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
        <div class="col-12 col-sm-12 col-md-12 col-lg-6 cards__wrapper">
          <card
            card-style="basic-image-right"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 cards__wrapper">
          <card
            card-style="image"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            content="Eli5 offers more than just lines of code."
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 cards__wrapper">
          <card
            card-style="text"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 cards__wrapper">
          <card
            card-style="text-color"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-4 cards__wrapper">
          <card
            card-style="only-image"
            :image="card.image"
            :imageAlt="card.title"
            :title="card.title"
            :content="card.content"
            :link="card.link"
            :link-text="card.linkText"
            :link-target="card.linkTarget"
          ></card>
        </div>
      </div>
    </div>
  </article>
</template>

<script>
export default {
  name: 'cards-ui',
  components: {
    Card: () => import('@/components/cards/Card.vue'),
  },
  data() {
    return {
      card: {
        image: '/images/card.jpg',
        title: 'Card title',
        content: 'Eli5 offers more than just lines of code. From designing new business models, automating internal processes.',
        link: '/cards',
        linkText: 'Startup Lab &#10142;',
        linkTarget: '_self',
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cards {
  &__header {
    margin-bottom: 65px;
    margin-bottom: 6.5rem;
  }
  &__wrapper {
    margin-bottom: 30px;
    margin-bottom: 3rem;
  }
}
</style>

