<template>
  <div v-if="measure" :id="'measure-details-' + measure.slug">
    <div class=header-action>
      <div>
        <h1>{{measure.name}}</h1>
        <h2>{{measure.description}}</h2>
      </div>
      <div class=actions>
        <router-link
          title="Delete Measure"
          :to="'/delete/measure/' + measure.slug"
          class=btn-icon >
          <fa-icon icon=trash></fa-icon>
        </router-link>
        <router-link
          title="Edit Measure"
          :to="'/edit/measure/' + measure.slug"
          class=btn-icon>
          <fa-icon icon=pencil-alt></fa-icon>
        </router-link>
        <router-link
          title="Add Measurement"
          :to="'/new/measurement/' + measure.slug"
          class=btn-action>
          Add Measurement
        </router-link>
      </div>
    </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 scoped lang="scss" src="./measure.scss"></style>
