{#if mentions.length}
  <div class="status-mentions {isStatusInOwnThread ? 'status-in-own-thread' : ''}">
    <p>
      {#each mentions as mention, i}
        {#if i > 0}
          <!-- empty space -->
          &nbsp;
          <!-- empty space -->
        {/if}
        <a href="/accounts/{mention.id}"
           title="@{mention.acct}"
           focus-key="status-mention-link-{uuid}-{mention.id}">
          @{mention.username}
        </a>
      {/each}
    </p>
  </div>
{/if}
<style>
  .status-mentions {
    grid-area: mentions;
    margin: 10px 0 10px 5px;
    font-size: 0.9em;
  }

  .status-mentions.status-in-own-thread {
    font-size: 1.3em;
    margin: 20px 10px 20px 5px;
  }

  :global(.underline-links .status-mentions a) {
    text-decoration: underline;
  }

</style>
<script>
  export default {
    computed: {
      mentions: ({ originalStatus }) => originalStatus.mentions || []
    }
  }
</script>