<template>
  <div class="details-subnav">
    <router-link to="/last-list" class="back">
      <font-awesome-icon :icon="leftIcon"/>
      Back to list
    </router-link>
    <span class="spacer"></span>
    <router-link class="prev" :to="`/detail/${prevApp}`" v-if="prevApp">
      <font-awesome-icon :icon="leftIcon"/>
      Previous
    </router-link>
    <router-link class="next" :to="`/detail/${nextApp}`" v-if="nextApp">
      Next
      <font-awesome-icon :icon="rightIcon"/>
    </router-link>
  </div>
</template>
<script>
  import get from 'lodash.get'
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons'

  export default {
    name: 'DetailsSubnav',
    components: { FontAwesomeIcon },
    props: {
      appId: {
        type: String
      }
    },
    computed: {
      nextApp () {
        return this.appId ? this.$store.getters.nextApplication(this.appId) : false
      },
      prevApp () {
        return this.appId ? this.$store.getters.prevApplication(this.appId) : false
      },
      leftIcon () { return faCaretLeft },
      rightIcon () { return faCaretRight }
    }
  }
</script>
<style scoped>
  .details-subnav {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-gap: 0.5rem;
    box-shadow: inset 0rem 0.1rem 0.1rem rgba(0,0,0,0.25), 0rem 0.1rem 0.1rem rgba(0,0,0,0.25);
  }
  .back, .prev, .next {
    text-transform: uppercase;
    cursor: pointer;
  }
</style>
