<template>
  <div>
    <div v-if="selectedKeyboard">
      <a href="#" v-on:click="selectedKeyboard = null">Back to keyboards</a>
      <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 KeyboardConfiguration from "./KeyboardConfiguration.vue";
export default {
  components: {
    KeyboardConfiguration,
  },
  data: () => ({
    keyboards: [{ name: "test 1" }, { name: "test 2" }],
    selectedKeyboard: null,
  }),
};
</script>