<script lang="ts">
	import Ellipsis from '../utils/Ellipsis.svelte';

	export let label: string;
	export let backpath: string[] = [];
</script>

<div class="upobject-label">
	<Ellipsis value={label}>
		{#if backpath.length}
			<span class="backpath">
				{#each backpath as component}
					<span class="component">
						{component}
					</span>
				{/each}
			</span>
		{/if}
		<span class="label">
			{label}
		</span>
	</Ellipsis>
</div>

<style lang="scss">
	.upobject-label {
		max-width: 100%;
	}

	.backpath {
		opacity: 0.66;
		margin-right: 0.25em;

		.component::after {
			content: '∋';
			margin-left: 0.2em;
			margin-right: 0.4em;
			font-size: 0.66em;
			font-weight: bold;
			position: relative;
			top: -0.125em;
		}

		.component:last-child::after {
			content: '';
		}
	}
</style>
