const template = html`
  <ul class="messenger messenger-fixed messenger-on-top messenger-theme-future">
    <li
      class="messenger-message-slot messenger-shown messenger-first messenger-last"
    >
      <div class="messenger-message message alert" :class="alertClass">
        <button type="button" class="close" data-dismiss="alert" @click="handleClose">
          ×
        </button>
        <div class="messenger-message-inner">{{title}}</div>
        <div class="messenger-actions">
          <a v-for="action in actions" @click="action.click">{{action.text}}</a>
        </div>
        <div class="messenger-spinner">
          <span class="messenger-spinner-side messenger-spinner-side-left">
            <span class="messenger-spinner-fill"></span>
          </span>
          <span class="messenger-spinner-side messenger-spinner-side-right">
            <span class="messenger-spinner-fill"></span>
          </span>
        </div>
      </div>
    </li>
  </ul>
`;

export default {
  props: ["title", "type", "actions"],
  components: {},
  computed: {
    alertClass() {
      return [`message-${this.type}`, `alert-${this.type}`];
    }
  },
  methods: {
    handleClose() {
      this.$emit('close');
    }
  },
  template
};
