<template>
  <div v-if="measure" :id="'measure-details-' + measure.slug">
    <div class=header-action>
      <div>
        <h1>{{measure.name}}</h1>
        <h2>{{measure.description}}</h2>
      </div>
      <router-link :to="'/new/measurement/' + measure.slug" class=btn-action>Add Measurement</router-link>
    </div>
    <MeasureDetails :measure=measure :measurements=measurements />
  </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="./measure.ts"></script>
<style lang="scss" src="./measure.scss"></style>
