<script lang="ts">
	import type { UpEntry } from '@upnd/upend';
	import { attributeLabels } from '$lib/util/labels';
	import UpObject from './UpObject.svelte';
	import Ellipsis from '$lib/components/utils/Ellipsis.svelte';
	export let resolve = true;

	export let entry: UpEntry;
</script>

<div class="entry">
	<div class="entity">
		<UpObject plain link address={entry.entity} labels={resolve ? undefined : []} />
	</div>
	<div class="attribute" title={entry.attribute}>
		<Ellipsis value={$attributeLabels[entry.attribute] || entry.attribute} />
	</div>
	<div class="value value-{entry.value.t.toLowerCase()}">
		{#if entry.value.t === 'Address'}
			<UpObject link address={entry.value.c} labels={resolve ? undefined : []} />
		{:else}
			<Ellipsis value={entry.value.c} />
		{/if}
	</div>
</div>

<style lang="scss">
	.entry {
		border: 1px solid var(--foreground);
		background: var(--background-lighter);
		border-radius: 4px;
		padding: 0.1em 0.5em 0.1em 0.25em;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		gap: 1em;

		& > * {
			min-width: 0;
		}
	}

	.attribute {
		position: relative;
		top: 0.2em;
		flex-grow: 1;
		text-align: center;
		font-weight: 300;
		&::after {
			content: '\00a0→';

			position: absolute;
			top: calc(-50% + 2px);
			left: calc(50% - 2px);

			transform: translateX(-50%);
			font-size: 0.66em;
			font-weight: normal;
		}
	}

	:global(.value-value) {
		font-family: var(--monospace-font);
	}
</style>
