<template>
  <div id=new-measure>
    <div class=header>
      <h1>New Measure</h1>
      <h2>What do you want to measure?</h2>
    </div>
    <form @submit.prevent=createMeasure() class=new-measure-form>
      <fieldset>
        <div>
          <label for=measureName>Display Name</label>
          <input
            :disabled=waiting
            type=text
            name=measureName
            placeholder="what you are measuring"
            required
            v-model="measure.name" />
        </div>
        <div>
          <label for=measureDescription>Description</label>
          <textarea
            :disabled=waiting
            name=measureDescription
            placeholder="optional description"
            v-model="measure.description" ></textarea>
        </div>
        <div>
          <label for=measureSlug>Short name (slug)</label>
          <input
            :disabled=waiting
            type=text
            name=measureDescription
            :placeholder='slugFromName + " (default)"'
            :value="measure.slug"
            @input="measure.slug = slugify($event.target.value)"/>
        </div>
      </fieldset>
      <MeasureConfigForm v-model=measure.config :disabled=waiting />
      <div v-if='!waiting' class=form-actions>
        <button class=btn-action>Create </button>
        <a class=btn @click="$router.go(-1)">Cancel</a>
      </div>
      <div v-if='waiting' class=form-waiting>
        <div class=wait-spinner>working <fa-icon icon=sync spin /></div>
      </div>
    </form>
  </div>
</template>
<script lang="ts" src="./new-measure.ts"></script>
<style lang="scss" src="./new-measure.scss"></style>
