<template>
  <div id="app">
    <input type="search" class="search" v-model="search" placeholder="Search">
    <div class="cards">
      <Card v-for="card in cardByTitle" :key="card.id" :title="card.title" :description="card.desc"/>
    </div>
  </div>
</template>

<script>
import Card from './components/Card'

export default {
  name: 'App',
  components: {
    Card
  },
  data() {
    return {
      cards: [
        { title: "Kekland", desc: "Country of the great KeK!"},
        { title: "Kekelban", desc: "It's a game."},
        { title: "Vam_ban", desc: "Permanent."},
        { title: "Hello_World", desc: "Code."},
        { title: "World", desc: "Look, it's around you..."},
        { title: "Osu!", desc: "Check it out."},
        { title: "TetriZ!", desc: "Smell of 90's."},
        { title: "Kappa", desc: "That's a twich chat anar..."},
        { title: "Plague inc.", desc: "Destroy humanity on the Earth!"},
        { title: "Ninja Street Fighter", desc: "Ultra Deluxe Mega Limited edition, buy it before it's too late."},
        { title: "Power", desc: "Rangers?"},
        { title: "Zero", desc: "Zero is zero,that's it. No, really. Are you expected something else?!?)" }
      ],
      search: ''
    }
  },
  computed: {
    cardByTitle() {
       return this.cards.filter(card => card.title.indexOf(this.search) !== -1);
    }
  }
}
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .cards {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .search {
    font-size: 20px;
    width: 80%;
    height: 35px;
    margin: 25px 10% 35px 10%;
    border: none;
    outline: none;
    border-radius: 15px;
    padding: 0px 15px;
    background-color: lightblue;
  }
  .search:placeholder {
    font-style: 25px;
    color: white;
  }
  #app {
    min-height: 100vh;
    background-image: linear-gradient(white,lightblue);
  }
</style>