<template>
  <v-main>
    <div>
      <v-btn
        x-small
        outlined
        fab
        color="blue darken-2"
        v-if="canManage"
        @click="switchToEditMode"
        class="float-right mt-2">
        <v-icon>mdi-square-edit-outline</v-icon>
      </v-btn>
    </div>
    <div class="mt-6 float-right">
      <v-btn
        x-small
        outlined
        fab
        color="green darken-2"
        v-if="editMode"
        @click="switchToSaveMode"
        class="float-right mt-2 cs-pos-absolute">
        <v-icon>mdi-content-save-settings-outline</v-icon>
      </v-btn>
    </div>
  </v-main>
</template>

<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      default: function () {
        return false;
      }
    },
    canManage: {
      type: Boolean,
      default: function () {
        return false;
      }
    },
  },
  methods: {
    switchToEditMode() {
      this.$root.$emit('switch-edit-mode', true);
    },
    switchToSaveMode() {
      this.$root.$emit('switch-edit-mode', false);

    },
  }
};
</script>