<template>
  <div class="experience-button-container">
    <BaseText
      :color="$_theme('colorSecondary')"
      class="see-more"
      @click.native="openModal"
    >
      {{ $_tr('learnMore') }}
    </BaseText>

    <Link
      v-if="$_isSuperAdmin || $_isAdmin"
      :href="{ name: 'Add', params: { content: 'experiences' } }"
      :inline="false"
      class="mt-xxl"
    >
      <IconTextButton icon="more">
        {{ $_tr('more') }}
      </IconTextButton>
    </Link>
  </div>
</template>

<script>
import { Link, IconTextButton } from 'inside-collection/components'
import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'ExperiencesHeaderButtons',
  $_i18nRootPath: 'customs.EXPERIENCES.BUTTON',
  components: { IconTextButton, Link, BaseText },
  methods: {
    openModal() {
      this.triggerModal(
        'experience',
        'fetch',
        {
          item: { uuid: this.heritedData.uuid },
          content: 'custom'
        },
        {
          layout: 'right',
          size: 'l',
          transition: 'fadeInLeft',
          closeAll: true
        }
      )
    }
  }
}
</script>
