<script lang="ts">
	import type { UpEntry } from '@upnd/upend';
	import { attributeLabels } from '../../util/labels';
	import UpObject from './UpObject.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}>
		{$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}
			{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 {
		flex-grow: 1;
		text-align: center;
		font-weight: 300;
		&::before {
			content: '→\00a0';
		}
		&::after {
			content: '\00a0→';
		}
	}

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