<template>
  <div v-if="value !== null" class="text-h5 bordo_stondato_stretto full-width">
    <div class="text-center text-h7-dense text-italic text-grey-14">
      {{ label }}
    </div>
    <div>
      <q-field
        dense
        borderless
        :readonly="readonly"
        type="number"
        rounded
        class="q-px-sm text-h5"
        color="green"
      >
        <template v-slot:prepend>
            <!--<img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">-->
            <q-btn v-if="tips"
                   icon="fas fa-info"
                   color="primary" text-color="white"
                   round
                   size="sm"
                   @click="showingtooltip = !showingtooltip"
            >

            </q-btn>
            <q-icon v-else name="fas fa-coins" size="sm"/>
        </template>
        <template v-slot:control>
          <div class="align_elem_right">{{ value.toFixed(2) }}
            <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{tips}}</q-tooltip>
          </div>
        </template>
        <template v-slot:append>
          <div class="text-h5">
            <em class="q-px-sm text-white rounded-borders" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em>
          </div>
        </template>

      </q-field>
    </div>

  </div>
</template>

<script lang="ts" src="./CCurrencyValue.ts">
</script>

<style lang="scss" scoped>
@import './CCurrencyValue.scss';
</style>
