<template>
  <article class="pri-color card flex" :style="'background-image: url(' + list.thumb + ');'">
    <div>
      <div class="title white-bcolor">
        <h3 class="tags grey-shade-color condensed">{{ list.tags | join }}</h3>
        <h2 class="black-color condensed">{{ list.title }}</h2>
      </div>
      <span class="flex subtitle white-color">
        <div class="price pri-bcolor medium-condensed">110,00€</div>
        <div class="icon visite-bcolor"><i class="material-icons">home</i></div>
        <div class="icon gastronomie-bcolor"><i class="material-icons">home</i></div>
        <div class="icon patrimoine-bcolor"><i class="material-icons">home</i></div>
      </span>
    </div>
  </article>
</template>

<script>
  export default {
    components: {},
    name: 'ListCard',
    props: ['list'],
    filters: {
      join: (value) => '#' + value.join(' #')
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../styles/_vars";

  .card {
    height: 250px;
    border-radius: 4px;
    transition: all 0.34s;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    align-items: flex-end;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
    overflow: hidden;

    .title {
      font-size: 16px;
      padding: 15px 35px 15px 15px;
      min-width: 40%;
      overflow: hidden;

      .tags {
        max-width: 250px;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 5px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .subtitle {
      font-size: 14px;
      justify-content: flex-start;

      .price {
        padding: 10px;
        width: 100px;
      }
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
    }

    &:hover {
      box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
    }
  }
</style>