<template>
  <div>
    <div class="hello-world">Hello World!</div>
    <button class="button is-primary is-medium" v-on:click="toggle_modal()">Open Modal</button>
    <button class="button is-secondary is-medium" v-on:click="add_message()">Add a Message</button>
    <b-modal :active.sync="modal_open">
      <div class="card">
        <div class="card-content">
          This is a modal
        </div>
      </div>
    </b-modal>
  </div>
</template>

<script>
import MessageStore from '../stores/messages'
import { MessageTypes, MessageScopes } from '../stores/messages'

export default {
  name: 'hello-world',
  data () {
    return {
      modal_open: false
    }
  },
  methods: {
    toggle_modal() {
      this.modal_open = !this.modal_open
    },
    add_message() {
      MessageStore.dispatch('add_message', {
        scope: MessageScopes.default, 
        message: 'This is a Message', 
        type: MessageTypes.info
      })
    }
  }
}
</script>


<style lang="scss">
  @import '../../css/_base-template';

  .hello-world {
    color: $color_app_primary;
  }
</style>