<template>
  <v-row
    v-if="csSpaceInfo && isFullTicketMenu"
    no-gutters>
    <v-col
      xl="6"
      lg="12"
      md="12"
      sm="12">
      <v-btn
        class="mt-1 me-1 d-flex"
        :href="listTickets"
        depressed
        outlined
        small
        color="blue">
        <v-icon left>
          mdi-backburger
        </v-icon>
        <span
          class="text-caption">
          {{ $t('cs.backToTickets') }}
        </span>
      </v-btn>
    </v-col>
    <v-col
      xl="6"
      lg="12"
      md="12"
      sm="12">
      <v-btn
        class="mt-1 me-1 d-flex"
        :href="createTicket"
        depressed
        outlined
        small
        color="green">
        <v-icon
          left>
          mdi-ticket
        </v-icon>
        <span class="text-caption">{{ $t('cs.createNewTicket') }}</span>
      </v-btn>
    </v-col>
  </v-row>
</template>

<script>
export default {
  props: {
    isFullTicketMenu: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    csSpaceInfo: {
      type: Object,
      default: function () {
        return {};
      },
    }
  },
  computed: {
    listTickets () {
      return this.csSpaceInfo && this.csSpaceInfo.groupId && `${eXo.env.portal.context}/g/:spaces:${this.csSpaceInfo.groupId.split('/spaces/')[1]}/${this.csSpaceInfo.prettyName}/tickets-list`;
    },
    createTicket () {
      return this.csSpaceInfo && this.csSpaceInfo.groupId && `${eXo.env.portal.context}/g/:spaces:${this.csSpaceInfo.groupId.split('/spaces/')[1]}/${this.csSpaceInfo.prettyName}/ticket`;
    },
  }

};
</script>