<template>
	<div class="breadcrumb">
		<nuxt-link
			v-for="item in breadcrumb"
			:key="item.href"
			:to="localePath(item.href)"
			class="breadcrumb__link"
			active-class="breadcrumb__link--active"
			:exact="true"
		>
			{{ item.name }}
		</nuxt-link>
	</div>
</template>
<script>
export default {
	name: "BreadcrumbBase",
	computed: {
		breadcrumb() {
			let currentPath = this.$route.path;
			let routeSection = currentPath.split("/");
			let sectionsCount = routeSection.length;

			let result = [];
			for (let i = 0; i < sectionsCount; i++) {
				let originalName = decodeURI(routeSection[i].trim());
				let tempSection = originalName.toLowerCase();
				let isLastItem = i + 1 == sectionsCount;
				let isHome = tempSection == "";
				let name = isHome ? "home" : tempSection;
				let tempName = this.$t(name);

				if (name == "post") continue;
				if (name == "category") continue;
				if (name == "en") continue;
				if (name == "fa") continue;

				let href = isLastItem ? currentPath : `/${tempSection}`;

				result.push({
					name: tempName,
					href: href,
				});
			}

			return result;
		},
	},
	methods: {
		getCurrentLanguage() {},
		replaceDash(name) {
			return name.replace(new RegExp("-", "g"), " ");
		},
	},
};
</script>
<style lang="scss" scoped>
.breadcrumb {
	display: block;
	overflow-x: auto;
	padding: $padding-default;
	position: relative;
	white-space: nowrap;

	&__link {
		color: $color-text--light;
		display: inline-block;
		font-size: 14px;
		margin: 0 2px;
		text-decoration: none;
		vertical-align: middle;

		&:after {
			content: "/";
			display: inline-block;
			font-size: 10px;
			margin: 0 5px;
			vertical-align: middle;
		}

		&--active {
			color: $color-primary;
			&:after {
				display: none;
			}
		}

		&:last-child::after {
			display: none;
		}
	}
}

[data-lang="en"] {
	.breadcrumb {
		&__link {
			&:after {
				content: "\\";
			}
		}
	}
}
</style>