<template>
  <div class="room-widget" :class="roomClass">
    <div class="room-widget__content">
      <h2 class="room-widget__title">{{title}}</h2>
      <div class="room-widget__group">
        <group></group>
        <span>
        {{group}}
        </span>
      </div>
      <div class="room-widget__entries">
        <cards></cards>
        <span>{{entryCount}} {{entryCount === 1 ? 'Beitrag' : 'Beiträge'}}</span>
      </div>
    </div>
    <div class="room-widget__footer">
      <router-link to="/room" class="room-widget__more-link">
        <ellipses></ellipses>
      </router-link>
    </div>
  </div>

</template>

<script>
  import Group from '@/components/images/Group.vue';
  import Cards from '@/components/images/Cards.vue';
  import Ellipses from '@/components/images/Ellipses.vue';

  export default {
    props: ['title', 'type', 'entries', 'group'],

    components: {
      Group,
      Cards,
      Ellipses
    },
    computed: {
      entryCount() {
        return this.entries.length
      },
      roomClass() {
        return `room-widget--${this.type}`
      }
    }
  }
</script>

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

  @mixin text-style {
    font-family: $sans-serif-font-family;
    font-size: 1rem;
    fill: $color-darkgrey-1;
  }

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

    /*
     * 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;
    }

    &__group {
      display: flex;
      align-items: center;
      opacity: 0.6;

      & > span {
        @include text-style;
      }
    }

    &__entries {
      display: flex;
      align-items: center;
      opacity: 0.6;

      & > span {
        @include text-style;
      }
    }

    &__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>
