<template>
    <Card :title="project.title" subtext="Project Title:">
        <ul v-if="project.contract" class="flex gap-2.5">
            <li
                class="p-2.5 flex flex-col flex-1 gap-1.5 bg-blue-100 rounded-lg"
            >
                <span class="text-xs text-gray-200">{{ $t('Register.agreed') }}:</span>
                <span class="text-xs font-medium text-gray-300">{{
                    currency(project.contract.amount)
                }}</span>
            </li>
            <li
                class="p-2.5 flex flex-col flex-1 gap-1.5 bg-blue-100 rounded-lg"
            >
                <span class="text-xs text-gray-200">Paid:</span>
                <span class="text-xs font-medium text-gray-300">{{
                    currency(project.contract.paid_amount)
                }}</span>
            </li>
            <li
                class="p-2.5 flex flex-col flex-1 gap-1.5 bg-blue-100 rounded-lg"
            >
                <span class="text-xs text-gray-200">{{ $t('Register.remaining') }}:</span>
                <span class="text-xs font-medium text-gray-300">{{
                    currency(
                        project.contract.amount - project.contract.paid_amount
                    )
                }}</span>
            </li>
        </ul>
        <li
            v-else
            class="p-2.5 flex flex-col flex-1 gap-1.5 bg-blue-100 rounded-lg"
        >
            <span class="text-xs text-gray-200">{{ $t('Register.project_total_price') }}</span>
            <span class="text-xs font-medium text-gray-300">{{
                currency(proposal.amount)
            }}</span>
        </li>
    </Card>
</template>

<script>
import Card from "@/components/Containers/ContentCard";

export default {
    props: {
        proposal: {
            type: Object,
            required: true,
        },
        project: {
            type: Object,
            required: true,
        },
    },
    components: {
        Card,
    },
};
</script>
