<template>
    <v-tooltip
        top
        nudge-bottom="20"
        :color="contract.days_difference.color"
    >
        <template 
            v-slot:activator="{ on }"
        >
            <v-chip 
                v-on="on"
                small
                outlined
                :color="contract.days_difference.color"
                :class="contract.days_difference.color + '--text'"
            >
                <div width="95%" class="text-cation text-truncate">
                    {{ contract.number}} / {{ ToDateInterval(contract.date_from, contract.date_to) }}
                </div>
            </v-chip>
        </template>

        <span class="text-caption">
            {{ contract.number}} / {{ ToDateInterval(contract.date_from, contract.date_to) }}
        </span>
    </v-tooltip>
</template>

<script>
    export default {
        props: {
            contract: {required: true},
        },

        name: 'ContractInfo',
    }
</script>