text: import Vue from 'vue';
  import eventHub from '../eventhub';
  
  (() => {
    const Store = gl.issueBoards.BoardsStore;
  
    window.gl = window.gl || {};
    window.gl.issueBoards = window.gl.issueBoards || {};
  
    gl.issueBoards.IssueCardInner = Vue.extend({
      props: {
        issue: {
          type: Object,
          required: true,
        },
        issueLinkBase: {
          type: String,
          required: true,
        },
        list: {
          type: Object,
          required: false,
          default: () => ({}),
        },
        rootPath: {
          type: String,
          required: true,
        },
        updateFilters: {
          type: Boolean,
          required: false,
          default: false,
        },
      },
      computed: {
        cardUrl() {
          return `${this.issueLinkBase}/${this.issue.id}`;
        },
        assigneeUrl() {
          return `${this.rootPath}${this.issue.assignee.username}`;
        },
        assigneeUrlTitle() {
          return `Assigned to ${this.issue.assignee.name}`;
        },
        avatarUrlTitle() {
          return `Avatar for ${this.issue.assignee.name}`;
        },
        issueId() {
          return `#${this.issue.id}`;
        },
        showLabelFooter() {
          return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
        },
      },
      methods: {
        showLabel(label) {
          if (!this.list) return true;
  
          return !this.list.label || label.id !== this.list.label.id;
        },
        filterByLabel(label, e) {
          if (!this.updateFilters) return;
  
          const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
          const labelTitle = encodeURIComponent(label.title);
          const param = `label_name[]=${labelTitle}`;
          const labelIndex = filterPath.indexOf(param);
          $(e.currentTarget).tooltip('hide');
  
          if (labelIndex === -1) {
            filterPath.push(param);
          } else {
            filterPath.splice(labelIndex, 1);
          }
  
          gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
  
          Store.updateFiltersUrl();
  
          eventHub.$emit('updateTokens');
        },
        labelStyle(label) {
          return {
            backgroundColor: label.color,
            color: label.textColor,
          };
        },
      },
      template: `
        <div>
          <div class="card-header">
            <h4 class="card-title">
              <i
                class="fa fa-eye-slash confidential-icon"
                v-if="issue.confidential"
                aria-hidden="true"
              />
              <a
                class="js-no-trigger"
                :href="cardUrl"
                :title="issue.title">{{ issue.title }}</a>
              <span
                class="card-number"
                v-if="issue.id"
              >
                {{ issueId }}
              </span>
            </h4>
            <a
              class="card-assignee has-tooltip js-no-trigger"
              :href="assigneeUrl"
              :title="assigneeUrlTitle"
              v-if="issue.assignee"
              data-container="body"
            >
              <img
                class="avatar avatar-inline s20 js-no-trigger"
                :src="issue.assignee.avatar"
                width="20"
                height="20"
                :alt="avatarUrlTitle"
              />
            </a>
          </div>
          <div class="card-footer" v-if="showLabelFooter">
            <button
              class="label color-label has-tooltip js-no-trigger"
              v-for="label in issue.labels"
              type="button"
              v-if="showLabel(label)"
              @click="filterByLabel(label, $event)"
              :style="labelStyle(label)"
              :title="label.description"
              data-container="body">
              {{ label.title }}
            </button>
          </div>
        </div>
      `,
    });
  })();
  