<script lang="ts">
  import type { UpEntry } from "upend";
  import { attributeLabels } from "../../util/labels";
  import UpObject from "./UpObject.svelte";

  export let entry: UpEntry;
</script>

<div class="entry">
  <div class="entity">
    <UpObject link address={entry.entity} />
  </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} />
    {:else}
      {entry.value.c}
    {/if}
  </div>
</div>

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

    & > * {
      flex: 33%;
      min-width: 0;
      word-break: break-all;
    }
  }

  .attribute {
    font-weight: bold;
    flex-grow: 1;
    text-align: center;
  }

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