<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
        :id="id"
        :final="final"
        data-cy="project-widget-actions"
        v-if="!readOnly"/>
    </widget-footer>
  </div>
</template>

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

  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>
