<template>
    <Card
        :title="$t('Register.per_milestone')"
        :subtext="$t('proposal.delivery_details')"
    >
        <ul class="flex flex-col gap-2.5">
            <li v-for="milestone in milestones" :key="milestone.id">
                <Milestone
                    :slidesPerView="slidesPerView"
                    :milestone="milestone"
                    :accepted="accepted"
                    :worker="worker"
                />
            </li>
        </ul>
    </Card>
</template>
<script>
import Card from "@/components/Containers/ContentCard";
import Milestone from "@/components/Projects/Client/Contracts/MilestoneDetailsOverview.vue";

export default {
    props: {
        milestones: {
            type: Object,
            required: true,
        },
        accepted: {
            type: Boolean,
            required: false,
        },
        slidesPerView: {
            type: Number,
            default: 3.5,
        },
        worker: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        Card,
        Milestone,
    },
};
</script>
