<script>
import tooltip from '../../vue_shared/directives/tooltip';
import { PROJECT_VISIBILITY_TYPE, VISIBILITY_TYPE_ICON } from '../constants';
import identicon from '../../vue_shared/components/identicon.vue';

export default {
  components: {
    identicon,
  },
  directives: {
    tooltip,
  },
  props: {
    project: {
      type: Object,
      required: true,
    },
  },
  computed: {
    projectDomId() {
      return `project-${this.project.id}`;
    },
    rowClass() {
      return {
        'no-description': !this.project.description,
      };
    },
    visibilityIcon() {
      return VISIBILITY_TYPE_ICON[this.project.visibility];
    },
    visibilityTooltip() {
      return PROJECT_VISIBILITY_TYPE[this.project.visibility];
    },
    hasAvatar() {
      return this.project.avatar_url !== null;
    },
  },
};
</script>

<template>
  <li
    class="group-row project-row"
    :id="projectDomId"
    :class="rowClass"
    >
    <div class="group-row-contents project-row-contents">
      <div class="stats">
        <span class="project-stars">
          <i
            class="fa fa-star"
            aria-hidden="true"/>
          {{project.star_count}}
        </span>
        <span
          v-tooltip
          class="project-visibility"
          data-placement="left"
          data-container="body"
          :title="visibilityTooltip"
        >
          <i
            class="fa"
            :class="visibilityIcon"
            aria-hidden="true"/>
        </span>
      </div>
      <div class="folder-toggle-wrap">
        <span class="folder-icon">
          <i
            class="fa fa-bookmark"
            aria-hidden="true"/>
        </span>
      </div>
      <div class="avatar-container s40 hidden-xs">
        <a
          :href="project.project_path"
        >
          <img
            v-if="hasAvatar"
            class="avatar s40"
            alt="Project Avatar"
            :src="project.avatar_url"
          />
          <identicon
            v-else
            :entity-id=project.id
            :entity-name="project.name"
          />
        </a>
      </div>
      <div class="metadata">
        <div class="title">
          <a
            :href="project.project_path"
          >
            {{project.name}}
          </a>
        </div>
        <div
          v-if="project.description"
          class="description"
        >
          {{project.description}}
        </div>
      </div>
    </div>
  </li>
</template>
