<template>
  <div id="measures">
    <div class=header-action>
      <h1>Things You Are Measuring</h1>
      <input
        type=text
        name=measureFilter
        placeholder='filter by name...'
        v-model=filter />
      <router-link to=/new/measure class=btn-action>Add Measure</router-link>
    </div>
    <div class=measure-list>
      <MeasureSummary
        v-for="(measure, slug) in measures"
        v-bind:key="measure.id"
        v-show="measure.slug.startsWith(filter)"
        :measure=measure />
    </div>
  </div>
</template>
<script lang="ts" src="./measures.ts"></script>
<style lang="scss" src="./measures.scss"></style>
