<template>
  <div class="container">
    <div class="Books">
      <h2 class="subtitle">
        <i class="fa fa-fw fa-book"></i> Select A Book
      </h2>
      <div class="is-flex m-b-md">
        <div
          class="book-thumb m-l-md"
          v-for="(book, index) in callManager.books"
          :key="index"
          @click="goToBook(book, index)"
          :disabled="!callManager.isHost"
        >
          <div class="book-cover">
            <figure class="image is-2by3 m-a">
              <img :src="`/u/books/${book.id}/page/1`" />
            </figure>
          </div>
          <div class="book-text">
            <div>{{book.title}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { mapGetters } from "vuex";
export default {
  name: "CallLobby",
  methods: {
    goToBook(book, index) {
      this.callManager.selectBook(index);
      this.$router.replace({ name: "book" });
    }
  },
  computed: {
    ...mapGetters(["callManager"])
  }
};
</script>
