<template>
  <div class="key-value-row">
    <div class="key-label">
      {{ mykey }}
    </div>
    <div class="value-content" :style="color ? `background-color: ${color}; color: white;` : ''">
      <span v-if="mydate">
        <CDateTime
          v-model:value="mydate"
          label=""
          :canEdit="false"
        />
      </span>
      <span v-else class="value-text">
        {{ myvalue || '-' }}
      </span>

      <q-btn
        v-if="showSetButton && onSetValue"
        rounded
        icon="edit"
        color="primary"
        size="sm"
        class="set-value-btn"
        @click="handleSetValue"
        :label="buttonTooltip || 'Imposta valore'"
      >
      </q-btn>
    </div>
  </div>
</template>

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

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