<template>
  <v-container>
    <v-card>
      <v-card-title>
        <div class="text-label-medium text-uppercase my-1">Progress</div>

        <div class="text-green-darken-3 text-display-medium font-weight-bold">90%</div>

        <div class="text-title-large text-medium-emphasis font-weight-regular">
          $2,938.00 remaining
        </div>
      </v-card-title>
      <v-card-text class="pt-2 mt-8">
        <div
          :style="`right: calc(${review} - 32px)`"
          class="position-absolute mt-n8 text-body-small text-green-darken-3"
        >
          Eligibility review
        </div>
        <v-progress-linear
          color="green-darken-3"
          height="22"
          model-value="90"
          rounded="lg"
        >
          <v-badge
            :style="`right: ${review}`"
            class="position-absolute"
            color="white"
            dot
            inline
          ></v-badge>
        </v-progress-linear>

        <div class="d-flex justify-space-between py-3">
          <span class="text-green-darken-3 font-weight-medium">
            $26,442.00 remitted
          </span>

          <span class="text-medium-emphasis"> $29,380.00 total </span>
        </div>
      </v-card-text>

      <v-divider></v-divider>

      <v-list-item
        append-icon="mdi-chevron-right"
        lines="two"
        subtitle="Details and agreement"
        link
      ></v-list-item>
    </v-card>
  </v-container>
</template>

<script setup>
  const review = '30%'
</script>

<script>
  export default {
    data: () => ({ review: '30%' }),
  }
</script>
