<template>
  <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
    <v-btn id="btn-pin" icon @click.stop="pin" class="ma-0 pa-0" v-if="userCanPin && !event.isPinned">
      <v-icon small>$vuetify.icons.ic_pin_filled</v-icon>
    </v-btn>
    <v-btn id="btn-unpin" icon @click.stop="unpin" class="ma-0 pa-0" v-if="userCanPin && event.isPinned">
      <v-icon small>$vuetify.icons.ic_pin</v-icon>
    </v-btn>
  </div>
</template>

<script>
import messageMixin from "../messageMixin";
import messageOperationsMixin from "../messageOperationsMixin";

export default {
  mixins: [messageMixin, messageOperationsMixin],
  data() {
    return {}
  },
  props: {
    userCanPin: {
      type: Boolean,
      default: function () {
        return false;
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>