<ListAccordion data-test-scale-events @source={{@events}} @key="time" as |a|>
  <a.head
    @buttonLabel="details"
    @isExpandable={{a.item.hasMeta}}
    class="with-columns"
  >
    <div class="columns inline-definitions">
      <div class="column is-3">
        <span class="icon-field">
          <span
            class="icon-container"
            title="{{if a.item.error "Error event"}}"
            data-test-error={{a.item.error}}
          >
            {{#if a.item.error}}
              {{x-icon "cancel-circle-fill" class="is-danger"}}
            {{/if}}
          </span>
          <span data-test-time title="{{format-ts a.item.time}}">
            {{format-month-ts a.item.time}}
          </span>
        </span>
      </div>
      <div class="column is-2">
        {{#if a.item.hasCount}}
          <span
            data-test-count-icon
            class="tooltip"
            aria-label="Count
              {{if a.item.increased "increased" "decreased"}}
               to
              {{a.item.count}}"
          >
            {{#if a.item.increased}}
              {{x-icon "arrow-up" class="is-danger"}}
            {{else}}
              {{x-icon "arrow-down" class="is-primary"}}
            {{/if}}
          </span>
          <span data-test-count>
            {{a.item.count}}
          </span>
        {{/if}}
      </div>
      <div class="column" data-test-message>
        {{a.item.message}}
      </div>
    </div>
  </a.head>
  <a.body @fullBleed={{true}}>
    <JsonViewer @json={{a.item.meta}} @fluidHeight={{true}} />
  </a.body>
</ListAccordion>