<template>
  <v-row class="flex-column" :class="{ isModal }" no-gutters>
    <v-row
      class="mt-3 mb-5 pl-4"
      :class="idx === 0 ? 'pa-1' : 'px-1 pb-1'"
      no-gutters
      v-for="(angle, idx) in measurement.SegmentAngles"
    >
      <v-col class="text-xs-semibold">
        <span>{{ t('labels.angle') }}&nbsp;</span>
        <span>{{ idx + 1 }}</span>
      </v-col>
      <v-col class="text-mono text-right text-xs-regular pr-4">
        <span>{{ Math.round(angle.Acute * 100) / 100 }}</span>
        <span>{{ measurement.Units }}</span>
        <span>/</span>
        <span>{{ Math.round(angle.Reflex * 100) / 100 }}</span>
        <span>{{ measurement.Units }}</span>
      </v-col>
    </v-row>
  </v-row>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { DataOverlayAngle } from '@3cr/viewer-types-ts';

interface Props {
  measurement: DataOverlayAngle;
  isModal: boolean;
}

defineProps<Props>();

const { t } = useI18n();
</script>
