export default {
  name: 'CellBadges',
  props: {
    assignment: { type: Object, default: null },
    locked: { type: Boolean, default: false },
    hasComment: { type: Boolean, default: false },
    hasNote: { type: Boolean, default: false },
    commentText: { type: String, default: '' },
    noteText: { type: String, default: '' }
  },
  template: `
    <div class="cell-badges-root">
      <div v-if="locked" class="day-cell-locked-overlay">
        <q-icon name="lock" color="blue-grey-3" size="14px">
          <q-tooltip class="day-cell-lock-tooltip">This cell is currently being edited by another user.</q-tooltip>
        </q-icon>
      </div>
      <div class="day-cell-icon-row absolute-bottom-right q-pa-xs row no-wrap">
        <q-icon
          v-if="hasComment"
          name="chat_bubble"
          size="8px"
          color="blue-grey-3"
          class="cursor-help day-cell-comment-icon"
        >
          <q-tooltip class="day-cell-shift-tooltip" anchor="top middle" self="bottom middle">
            <div class="text-weight-bold text-caption text-indigo-9 q-mb-xs">User Comment</div>
            <div class="text-caption text-grey-8">{{ commentText }}</div>
          </q-tooltip>
        </q-icon>
        <q-icon
          v-if="hasNote"
          name="info"
          size="8px"
          color="orange-4"
          class="cursor-help day-cell-note-icon"
        >
          <q-tooltip class="day-cell-shift-tooltip" anchor="top middle" self="bottom middle">
            <div class="text-weight-bold text-caption text-orange-9 q-mb-xs">Technical Note</div>
            <div class="text-caption text-grey-8">{{ noteText }}</div>
          </q-tooltip>
        </q-icon>
      </div>
    </div>
  `
};