<template>
  <div
    :class="widgetClass"
    data-cy="project-widget"
    class="project-widget"
  >
    <router-link
      :to="{ name: 'project', params: { slug: slug } }"
      tag="div"
      class="project-widget__content"
      data-cy="project-link"
    >
      <h3 class="project-widget__title">
        {{ title }}
      </h3>

      <entry-count-widget :entry-count="entriesCount" />
      <owner-widget
        :owner="student"
        class="project-widget__owner"
      />
    </router-link>
    <widget-footer
      data-cy="project-widget-footer"
      class="project-widget__footer"
      v-if="isOwner"
    >
      <project-actions
        :final="final"
        data-cy="project-widget-actions"
        v-if="!readOnly"
        :id="id"
      />
    </widget-footer>
  </div>
</template>

<script>
import OwnerWidget from '@/components/portfolio/OwnerWidget.vue';
import ProjectActions from '@/components/portfolio/ProjectActions.vue';
import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
import WidgetFooter from '@/components/ui/WidgetFooter.vue';

export default {
  props: ['title', 'appearance', 'slug', 'id', 'final', 'student', 'entriesCount', 'userId', 'readOnly'],

  components: {
    WidgetFooter,
    EntryCountWidget,
    OwnerWidget,
    ProjectActions,
  },

  computed: {
    widgetClass() {
      return `project-widget--${this.appearance}`;
    },
    isOwner() {
      return this.student.id === this.userId;
    },
  },
};
</script>

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

.project-widget {
  border-radius: $default-border-radius;
  background-color: $color-accent-4;
  @include widget-shadow;
  box-sizing: border-box;
  position: relative;

  display: -ms-grid;
  margin-bottom: $large-spacing;
  @supports (display: grid) {
    display: grid;
    margin-bottom: 0;
  }
  grid-template-rows: 175px 1fr;
  -ms-grid-rows: 175px 48px;
  -ms-grid-columns: 1fr;

  &__content {
    padding: 23px;
    cursor: pointer;
    -ms-grid-row: 1;

    /*
      * For IE10+
      */
    display: -ms-grid;
    -ms-grid-rows: 50px 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: toRem(22px);
    font-weight: 600;
  }

  &__owner {
    margin-top: $small-spacing;
  }

  &__footer {
    -ms-grid-row: 2;
  }

  @include skillbox-colors;
}
</style>
