<template>
  <div
    :class="roomClass"
    class="room-widget">
    <router-link
      :to="{name: 'room', params: {slug: slug}}"
      tag="div"
      class="room-widget__content">
      <h2 class="room-widget__title">{{ title }}</h2>
      <room-group-widget v-bind="schoolClass"/>
      <entry-count-widget :entry-count="entryCount"/>
    </router-link>
    <widget-footer
      data-cy="widget-footer"
      v-if="canEditRoom">
      <room-actions
        :restricted="restricted"
        :id="id"/>
    </widget-footer>
  </div>
</template>

<script>

  import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
  import WidgetFooter from '@/components/ui/WidgetFooter';
  import RoomActions from '@/components/rooms/RoomActions';

  import {meQuery} from '@/graphql/queries';

  export default {
    props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id', 'restricted'],

    components: {
      EntryCountWidget,
      RoomGroupWidget,
      WidgetFooter,
      RoomActions
    },

    data() {
      return {
        showMenu: false,
        me: {
          permissions: []
        }
      };
    },

    computed: {
      roomClass() {
        return `room-widget--${this.appearance}`;
      },
      canEditRoom() {
        return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass.readOnly;
      }
    },

    apollo: {
      me: meQuery
    },
  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

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

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

    @include skillbox-colors;

    svg {
      width: 30px;
      fill: $color-charcoal-dark;
      margin-right: 15px;
    }

    &__content {
      padding: 22px;
      color: $color-charcoal-dark;
      cursor: pointer;

      /*
      * For IE10+
      */
      display: -ms-grid;
      -ms-grid-rows: 80px 30px 30px;
      & > :nth-child(1) {
        -ms-grid-row: 1;
      }
      & > :nth-child(2) {
        -ms-grid-row: 2;
      }
      & > :nth-child(3) {
        -ms-grid-row: 3;
      }
    }

    &__title {
      font-size: 1.375rem;
    }
  }
</style>
