<template>
    <Card
        :title="$t('Register.per_milestone')"
        :subtext="$t('proposal.delivery_details')"
    >
        <div class="flex flex-col w-full gap-5">
            <template v-for="milestone in milestones" :key="milestone.id">
                <Milestone
                    :worker="worker"
                    :milestone="milestone"
                    :accepted="accepted"
                    :canPay="canPay"
                />
            </template>
        </div>
    </Card>
</template>

<script>
import Milestone from "@/components/Projects/Client/Proposals/MilestoneDeliveryDetailsOverview";
import Card from "@/components/Containers/ContentCard";
export default {
    props: {
        milestones: {
            type: Array,
            required: true,
        },
        accepted: {
            type: Boolean,
            required: false,
        },
        worker: {
            type: Boolean,
            default: false,
        },
        canPay: {
            type: Boolean,
            default: true,
        },
    },
    components: {
        Milestone,
        Card,
    },
};
</script>
