<template lang="pug">
vm-prompt(@vm-cancel="close" @vm-close="close" :vm-active="isModalShortcutsVisible" :vm-buttons-hidden="true" :vm-title="$t('strings.shortcuts')")
  .modal
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=8)
        b-form-group
          slot \{{ $t('strings.close_modal') }}
      vm-col(vm-justify="center", vm-align="center", vm-w=4)
        b-form-group
          span.gray Esc
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=8)
        b-form-group
          slot \{{ $t('strings.create') }}
      vm-col(vm-justify="center", vm-align="center", vm-w=4)
        b-form-group
          span.gray c
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=8)
        b-form-group
          slot \{{ $t('strings.shortcuts') }}
      vm-col(vm-justify="center", vm-align="center", vm-w=4)
        b-form-group
          span.gray F9
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=8)
        b-form-group
          slot \{{ $t('strings.view_notifications') }}
      vm-col(vm-justify="center", vm-align="center", vm-w=4)
        b-form-group
          span.gray n
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=8)
        b-form-group
          slot \{{ $t('strings.edit_selected') }}
      vm-col(vm-justify="center", vm-align="center", vm-w=4)
        b-form-group
          span.gray e
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=8)
        b-form-group
          slot \{{ $t('strings.view_selected') }}
      vm-col(vm-justify="center", vm-align="center", vm-w=4)
        b-form-group
          span.gray o or Enter
    vm-row(vm-align="center" vm-type="flex" vm-justify="space-between" vm-w="12")
      vm-col(vm-justify="center", vm-align="center", vm-w=8)
        b-form-group
          slot \{{ $t('strings.find') }}
      vm-col(vm-justify="center", vm-align="center", vm-w=4)
        b-form-group
          span.gray f
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ModalShortcuts',
  computed: {
    ...mapGetters([
      'isModalShortcutsVisible'
    ])
  },
  methods: {
    ...mapActions([
      'setModalShortcutsVisible'
    ]),
    close () {
      this.setModalShortcutsVisible(false)
    }
  }
}
</script>
<style media="screen">
  .modal {
    padding: 20px !important;
  }
  .gray {
    background: #CBCCC6 !important;
    padding: 5px;
    border-radius: 5px
  }
</style>
