<template>
  <div>
    <div v-if="selectedKeyboard">
      <a title="Back to keyboards" href="#" v-on:click="selectedKeyboard = null"
        >⏴</a
      >
      <span v-if="selectedKeyboard">{{ selectedKeyboard.name }}</span>
      <KeyboardConfiguration :keyboard="selectedKeyboard" />
    </div>
    <div v-else>
      <strong>Keyboards manager</strong>
      <li v-for="k in keyboards" :key="k.name">
        <a href="#" v-on:click="selectedKeyboard = k">{{ k.name }}</a>
      </li>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import KeyboardConfiguration from "./KeyboardConfiguration.vue";
export default {
  components: {
    KeyboardConfiguration,
  },
  data: () => ({
    selectedKeyboard: null,
  }),
  computed: {
    ...mapState(["keyboards"]),
  },
};
</script>