<template>
  <li
    class="project">
    <router-link
      :to="{name: 'project', params: {slug: project.slug}}"
      tag="div"
      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
        :verbose="false"
        :entry-count="project.entriesCount"/>

    </router-link>
    <project-actions
      :id="project.id"
      :final="project.final"
      data-cy="project-actions"
      class="project__actions"
      v-if="!isReadOnly && isOwner"/>
  </li>
</template>

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

  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 {
      flex: 80%;
      display: flex;
      align-items: center;
    }

    &__title {
      flex: 50%;
      @include heading-4;
    }

    &__owner {
      flex: 40%;
    }
  }
</style>
