<template>
  <div class="room-entry">
    <div class="room-entry__header" v-if="image">
      <img class="room-entry__image" :src="image" :alt="title">
    </div>
    <div class="room-entry__content">
      <h2 class="room-entry__title">{{title}}</h2>
      <p class="room-entry__teaser">
        {{teaser}}
      </p>
      <user-widget class="room-entry__author"></user-widget>
    </div>
  </div>
</template>

<script>
  import UserWidget from '@/components/UserWidget.vue';

  export default {
    props: ['title', 'teaser', 'image', 'author'],

    components: {
      UserWidget
    }
  }
</script>

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

  .room-entry {
    border-radius: 12px;
    overflow: hidden;
    background-color: $color-white;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
    margin-bottom: 25px;

    &__image {
      max-width: 100%;
    }

    &__content {
      padding: 15px;
    }

    &__title {
      font-size: toRem(21px);
      margin-bottom: 10px;
    }

    &__teaser {
      font-size: toRem(18px);
      line-height: 1.5;
      margin-bottom: 10px;
    }

  }
</style>
