{#if massagedFields.length}
  <h2 class="sr-only">{'intl.fields'}</h2>
  <div class="account-profile-meta">
    {#each massagedFields as field, i}
      <div
        id="account-profile-meta-name-{i}"
        class="account-profile-meta-cell account-profile-meta-name"
        role="term"
      >
        {field.name}
      </div>
      <div
        class="account-profile-meta-cell account-profile-meta-value {field.verified ? 'account-profile-meta-cell-verified' : ''}"
        role="definition"
        aria-labelledby="account-profile-meta-name-{i}"
      >
        {@html field.value}
        {#if field.verified}
          <span class="account-profile-meta-verified">
            <SvgIcon
              ariaLabel="verified"
              className="account-profile-meta-verified-svg"
              href="#fa-check"
            />
            {'intl.verified'}
          </span>
        {/if}
      </div>
    {/each}
  </div>
{/if}
<style>
  .account-profile-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-row-gap: 0;
    align-items: center;
    padding: 10px 0;
    margin-top: 5px;
    margin-bottom: 5px;
    border-top: 1px solid var(--main-border);
    border-bottom: 1px solid var(--main-border);
  }

  .account-profile-meta-cell {
    padding: 4px 0;
    word-wrap: break-word;
    overflow: hidden;
    font-size: 1.1em;
  }

  .account-profile-meta-name {
    color: var(--deemphasized-text-color);
    position: relative;
    max-width: 300px;
    padding-right: 15px;
  }

  .account-profile-meta-name:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 60%;
    border-right: 1px solid;
    opacity: 0.2;
  }

  .account-profile-meta-value {
    padding-inline-start: 15px;
  }

  :global(.underline-links .account-profile-meta a) {
    text-decoration: underline;
  }

  @media (max-width: 767px) {
    .account-profile-meta {
      padding: 5px 0;
    }
    .account-profile-meta-name {
      padding: 5px 10px 5px 0;
      max-width: 40vw;
    }
    .account-profile-meta-value {
      padding: 5px 10px 5px 10px;
    }
  }

  .account-profile-meta-cell-verified {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 0.8em;
  }
  .account-profile-meta-verified {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    white-space: nowrap;
    gap: 0.2em;
    padding: 2px 0;
    padding-inline-start: 4px;
    padding-inline-end: 5px;
    font-size: 0.9em;
    color: var(--verified-text-color);
    background: var(--verified-bg-color);
    border: 1px solid var(--verified-border-color, currentColor);
    border-radius: 4px;
  }

  :global(.account-profile-meta-verified-svg) {
    display: inline-block;
    width: .9em;
    height: .9em;
    fill: currentColor;
    opacity: 0.95;
  }
</style>
<script>
  import SvgIcon from '../SvgIcon.html'
  import { emojifyText } from '../../_utils/emojifyText.js'
  import { store } from '../../_store/store.js'

  export default {
    store: () => store,
    computed: {
      emojis: ({ account }) => account.emojis || [],
      fields: ({ account }) => account.fields || [],
      massagedFields: ({ fields, emojis, $autoplayGifs }) => (fields.map(field => ({
        name: field.name,
        value: emojifyText(field.value, emojis, $autoplayGifs),
        verified: !!field.verified_at
      })))
    },
    components: {
      SvgIcon
    }
  }
</script>