<template>
  <li class="project">
    <router-link
      :to="{ name: 'project', params: { slug: project.slug } }"
      class="project__link"
      data-cy="project-link"
    >
      <span
        class="project__title"
        data-cy="project-title"
        >{{ project.title }}</span
      >

      <owner-widget
        :owner="project.student"
        class="project__owner"
      />

      <entry-count-widget
        class="project__entry-count"
        :verbose="false"
        :entry-count="project.entriesCount"
      />
    </router-link>
    <project-actions
      :final="project.final"
      data-cy="project-actions"
      class="project__actions"
      :slug="project.slug"
      v-if="!isReadOnly && isOwner"
    />
  </li>
</template>

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

import me from '@/mixins/me';

export default {
  props: {
    project: {
      type: Object,
      default: () => ({}),
    },
  },

  mixins: [me],

  components: {
    EntryCountWidget,
    OwnerWidget,
    ProjectActions,
  },

  computed: {
    isOwner() {
      return this.project.student.id === this.me.id;
    },
  },
};
</script>

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

.project {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  padding: $small-spacing 0;
  border-bottom: 1px solid $color-silver;

  &__link {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    row-gap: $small-spacing;
    align-items: flex-start;
    flex-direction: column;
    @include desktop {
      display: flex;
      flex: 80%;
      flex-direction: row;
      align-items: center;
    }
  }

  &__title {
    flex: 50%;
    @include heading-4;
    grid-column: 1 / span 2;
  }

  &__owner {
    flex: 40%;
    grid-column: 1 / span 1;
  }

  &__actions {
    display: none;

    @include desktop {
      display: block;
    }
  }

  &__entry-count {
    justify-self: flex-end;
    grid-column: 2 / span 1;
  }
}
</style>
