<template>
  <v-dialog
    v-model="showModal"
    :max-width="maxWidth"
    persistent>

    <v-card>
      <v-card-title class="headline">
        <v-layout row wrap text-xs-left>
          <v-flex md8>
            <slot name="title">Modal Title</slot>
          </v-flex>

          <v-flex
            md4 layout justify-end align-start ma-0 pt-2
            class="modal-footer-actions">

            <slot name="header-actions" />

            <v-tooltip top>
              <v-icon
                slot="activator"
                small
                flat
                class="primary--text"
                @click="closeModal">
                close
              </v-icon>
              <span>Close</span>
            </v-tooltip>
          </v-flex>
        </v-layout>
      </v-card-title>

      <v-card-text>
        <slot name="content">Modal Text</slot>
      </v-card-text>

      <v-card-actions>
        <v-spacer/>
        <slot name="cancel-btn">
          <v-btn
            flat="flat"
            data-test="clear"
            @click="closeModal">
            Cancel
          </v-btn>
        </slot>

        <slot name="footer-actions"/>
      </v-card-actions>
    </v-card>

  </v-dialog>
</template>

<script>
export default {
  name: 'BaseModal',
  props: {
    showModal: {
      type: Boolean,
      default: false,
      required: true
    },
    maxWidth: {
      type: String,
      default: '500px'
    }
  },
  methods: {
    closeModal () {
      this.$emit('close-modal')
    }
  }
}
</script>

<style lang="scss">
.modal-footer-actions .v-icon {
  font-size: 28px !important;
  margin-left: 8px;
  margin-right: 8px;
  cursor: pointer;
}
</style>
