<template>
  <BaseFormModal @confirm="saveFilter()" @cancel="$emit('hide')">
    <template #header-title>
      Run operation
    </template>

    <template #content>
      Fill in parameters
      <b-field label="Param 1">
        <b-input size="is-small" :filter-name="filterName" />
      </b-field>
      <b-field label="Param 2">
        <b-input size="is-small" :sql-query="sqlQuery" />
      </b-field>
    </template>

    <template #cancel-button>
      Cancel
    </template>
    <template #confirm-button>
      Run operation
    </template>
  </BaseFormModal>
</template>

<script>
export default {
  name: 'CreateFilterModal',

  data() {
    return {
      parameters: '',
      sqlQuery: ''
    }
  },

  methods: {
    close() {
      this.$emit('hide')
    },

    saveFilter() {
      console.log('hej hou')
      this.$emit('hide')
    }
  }
}
</script>

<style lang="sass" scoped>
.label
  font-size: .5rem
.card
  min-height: 100%
  height: 100%

section
  margin-bottom: 2.5em
  h2.title.is-6
    margin-bottom: 1rem

.tag
  cursor: pointer
  &.tag-name
    width: 10em
    text-align: left
    justify-content: left

label.label
  font-size: 0.8rem
  margin-bottom: 0.2em
</style>

<style lang="sass">
#dataset-editor-textarea textarea
  max-height: 70vh
  min-height: 70vh

#dataset-editor-textarea textarea.shorter
  max-height: 60vh
  min-height: 60vh
</style>
