<template>
  <router-link :to="link" tag="div" class="room-widget" :class="roomClass">
    <div class="room-widget__content">
      <h2 class="room-widget__title">{{title}}</h2>
      <room-group-widget v-bind="userGroup"></room-group-widget>
      <room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
    </div>
    <div class="room-widget__footer">
      <div class="room-widget__more-link">
        <ellipses></ellipses>
      </div>
    </div>
  </router-link>
</template>

<script>
  import Ellipses from '@/components/images/Ellipses.vue';
  import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
  import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';

  export default {
    props: ['slug', 'title', 'entryCount', 'appearance', 'userGroup'],

    components: {
      RoomEntryCountWidget,
      Ellipses,
      RoomGroupWidget
    },

    computed: {
      roomClass() {
        return `room-widget--${this.appearance}`
      },
      link() {
        return `/room/${this.slug}`
      }
    }
  }
</script>

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

  .room-widget {
    display: -ms-grid;
    @supports (display: grid) {
      display: grid;
    }
    grid-template-rows: 210px 1fr;
    overflow: hidden;
    @include widget-shadow;

    cursor: pointer;

    /*
     * For IE10+
     */
    -ms-grid-rows: 210px 1fr;
    -ms-grid-columns: 1fr;

    &--red {
      background-color: $red;
    }
    &--green {
      background-color: $green;
    }
    &--brown {
      background-color: $brown;
    }

    svg {
      width: 30px;
      fill: $color-darkgrey-1;
      margin-right: 15px;
    }

    &__content {
      padding: 22px;
      color: $color-darkgrey-1;
    }

    &__title {
      font-size: 1.375rem;
    }

    &__footer {
      background-color: rgba(51, 51, 51, 0.18);
      display: flex;
      flex-direction: row-reverse;
      align-items: center;

      /*
       * For IE10+
       */
      -ms-grid-row: 2;
    }
  }
</style>
