Add buttons on book form

front/src/BookForm.vue

@@ -3,6 +3,7 @@
   import { getBook, getImagePathOrDefault, putBookUpdate } from './api.js'
   import { onBeforeRouteUpdate } from 'vue-router'
   import { VRating } from 'vuetify/components/VRating';
+  import BigIcon from './BigIcon.vue';
 
   const props = defineProps({
   id: String
@@ -25,10 +26,8 @@
 
 <template>
   <div v-if="error">{{$t('bookform.error', {error: error.message})}}</div>
-  <div v-if="data">
-    <h3 class="title">{{data.title}}</h3>
-    <h3 class="subtitle">{{data.author}}</h3>
-    <div class="imagewithrating">
+  <div v-if="data" class="columns">
+    <div class="column is-narrow ml-6">
       <figure class="image">
         <img v-bind:src="imagePathOrDefault" v-bind:alt="data.title">
       </figure>
@@ -41,11 +40,21 @@
           :model-value="data.rating/2"
           @update:modelValue="onRatingUpdate"
           active-color="bulma-body-color"
+          class="centered"
           />
     </div>
-    <div>
+    <div class="column">
+      <h3 class="title">{{data.title}}</h3>
+      <h3 class="subtitle">{{data.author}}</h3>
       <p>{{data.summary}}</p>
     </div>
+    <div class="column">
+      <div class="iconscontainer">
+        <BigIcon icon="BIconEye" :legend="$t('bookform.wantread')"/>
+        <BigIcon icon="BIconBook" :legend="$t('bookform.startread')"/>
+        <BigIcon icon="BIconCheckCircle" :legend="$t('bookform.read')"/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -57,9 +66,17 @@ img {
   width:auto;
 }
 
-.imagewithrating {
-  vertical-align: top;
-  display: inline-block;
-  text-align: center;
+.centered {
+  display:flex;
+  justify-content:center;
+  align-items:center;
 }
+
+.iconscontainer {
+  border: solid;
+  border-radius: 50px;
+  width: 250px;
+}
+
+
 </style>