<template>
	<div :class="wrapperClass">
		<h4 v-if="showHeader">{{ headerTitle }}</h4>
		<router-view></router-view>
	</div>
</template>

<script>
export default {
	computed: {
		showHeader: function () {
			// Keep header hidden only for "Tambah Pengundi" (it has its own page header)
			return this.$route.name !== 'Tambah Pengundi';
		},
		headerTitle: function () {
			if (this.$route.name === 'Kehadiran Calon') return 'Kehadiran';
			return 'Maklumat Pengundi';
		},
		isWideVoterRoute: function () {
			// Give more room for heavy pages, but keep it boxed (not edge-to-edge)
			return this.$route.name === 'Tambah Pengundi'
				|| this.$route.name === 'Kehadiran Calon';
		},
		wrapperClass: function () {
			if (this.isWideVoterRoute) {
				return 'container-fluid voter-admin-wrap voter-admin-wrap--boxed voter-admin-wrap--wide';
			}
			return 'container col-md-8 col-md-offset-2 voter-admin-wrap voter-admin-wrap--boxed';
		}
	},
	created: function () {
		this.util.setTitle('MyKoPKB - Maklumat Pengundi');
	}
}
</script>

<style>
/* Boxed card-style wrapper for all voter admin pages */
.voter-admin-wrap--boxed {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	padding: 16px;
	margin-top: 12px;
	margin-bottom: 24px;
}

/* Wide pages: not full screen, but wider than centered 8-col layout */
.voter-admin-wrap--wide {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
</style>