<template>
  <div v-if="measure">
    <div class=header>
      <h1>Delete Measure</h1>
      <h2>Are you sure you want to delete {{measure.name}}?</h2>
    </div>
    <form @submit.prevent=deleteMeasure() >
      This will delete all measurements associated with this measure. This
      cannot be undone.
      <div v-if='!waiting' class=form-actions>
        <button class=btn-action>Delete</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>
  <div v-else>
    <div class=header-action>
      <h1>There is no measure named {{$route.params.slug}}.</h1>
    </div>
  </div>
</template>
<script lang=ts src=./delete-measure.ts></script>
