yourpart3/frontend/src/dialogues/falukant/ChildDetailsDialog.vue

<template>
    <DialogWidget
        ref="dialog"
        :title="$t('falukant.family.children.details.title')"
        :isTitleTranslated="true"
        :show-close="true"
        :buttons="[{ text: 'message.close', action: 'close' }]"
        :modal="true"
        @close="closeDialog"
        width="500px"
        name="ChildDetailsDialog"
    >
        <div v-if="child" class="child-details">
            <table class="details-table">
                <tr>
                    <td>{{ $t('falukant.family.children.name') }}</td>
                    <td>
                        <span v-if="child.hasName">{{ child.name }}</span>
                        <span v-else class="no-name">{{ $t('falukant.family.children.notBaptized') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>{{ $t('falukant.family.children.age') }}</td>
                    <td>{{ child.age }}</td>
                </tr>
                <tr>
                    <td>{{ $t('falukant.family.children.gender') }}</td>
                    <td>{{ $t(`falukant.titles.${child.gender}.noncivil`) }}</td>
                </tr>
                <tr>
                    <td>{{ $t('falukant.family.children.heir') }}</td>
                    <td>
                        <span v-if="child.isHeir" class="heir-badge">{{ $t('falukant.family.children.isHeir') }}</span>
                        <span v-else>{{ $t('falukant.family.children.notHeir') }}</span>
                    </td>
                </tr>
            </table>
            <div v-if="!child.hasName" class="baptism-notice">
                <p>{{ $t('falukant.family.children.baptismNotice') }}</p>
                <button @click="goToBaptism" class="baptism-button">
                    {{ $t('falukant.family.children.baptism') }}
                </button>
            </div>
        </div>
    </DialogWidget>
</template>

<script>
import DialogWidget from '@/components/DialogWidget.vue';

export default {
    name: 'ChildDetailsDialog',
    components: {
        DialogWidget
    },
    data() {
        return {
            child: null
        };
    },
    methods: {
        open(child) {
            this.child = child;
            this.$refs.dialog.open();
        },
        closeDialog() {
            this.child = null;
        },
        goToBaptism() {
            this.$refs.dialog.close();
            this.$router.push({
                name: 'ChurchView'
            });
        }
    }
};
</script>

<style scoped>
.child-details {
    padding: 1rem;
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.details-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #ddd;
}

.details-table td:first-child {
    font-weight: bold;
    width: 40%;
}

.no-name {
    color: #999;
    font-style: italic;
}

.heir-badge {
    display: inline-block;
    padding: 4px 8px;
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
}

.baptism-notice {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: center;
}

.baptism-notice p {
    margin-bottom: 0.5rem;
}

.baptism-button {
    padding: 8px 16px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.baptism-button:hover {
    background-color: #1976D2;
}
</style>