<template>
  <div id=edit-measure v-if=measure>
    <div class=header>
      <h1>Edit Measure</h1>
      <h2>{{measure.name}}</h2>
    </div>
    <form @submit.prevent=updateMeasure() class=edit-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
        measureExists=false />
      <div v-if='!waiting' class=form-actions>
        <button class=btn-action>Update</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=./edit-measure.ts></script>
