<template>
  <fieldset>
    <div>
      <label for=measureType>Type</label>
      <span v-if=measureExists>{{value.type}}</span>
      <select
        :disabled=disabled
        name=measureType
        v-if="!measureExists"
        v-model=value.type>
        <option value=simple>Simple</option>
        <option value=text>Text</option>
      </select>
    </div>
    <div>
      <label for=measureIsVisible>Show by default.</label>
      <input type=checkbox v-model=value.isVisible :disabled=disabled />
    </div>
    <div>
      <label for=timestampDisplayFormat>Timestamp Format</label>
      <select
        v-on:change=formatSelectionChanged
        :disabled=disabled
        v-model=selectedFormat
        name=timestampDisplayFormat>
        <option v-for="fmtStr in formatStrings"
                :value=fmtStr>{{now.format(fmtStr)}}</option>
        <option value="custom">Custom</option>
      </select>
    </div>
    <div v-if="selectedFormat === 'custom'">
      <label for=timestampCustomDisplayFormat>
        Custom Timestamp Format
        (<a target="_blank" href="https://momentjs.com/docs/#/displaying/format/">see formatting options</a>)
      </label>
      <input type=text v-model=value.timestampDisplayFormat />
    </div>
    <TextMeasureConfigForm v-model=value v-show="value.type === 'text'" :disabled=disabled />
  </fieldset>
</template>
<script lang=ts src=./measure-config-form.ts></script>
<style lang=scss src=./measure-config-form.scss></style>
