<div class="gia-behavior-shell">
  <div class="is-flex is-justify-content-space-between is-align-items-center is-flex-wrap-wrap mb-3">
    <div>
      <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">{{ metric.state_label }} · {{ metric.group|upper }}</p>
      <h3 class="title is-5 mb-1">{{ metric.title }}</h3>
      <p class="is-size-7">{{ metric.calculation }}</p>
    </div>
    {% include "partials/behavioral-range-tabs.html" %}
  </div>

  <div class="columns is-multiline">
    <div class="column is-12">
      {% include "partials/behavioral-graph-card.html" with graph=metric person=person graphs_widget_url=graphs_widget_url %}
    </div>
    <div class="column is-12-tablet is-6-desktop">
      <article class="message is-light">
        <div class="message-body">
          <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">Psychological Reading</p>
          <p>{{ metric.psychology }}</p>
        </div>
      </article>
    </div>
    <div class="column is-12-tablet is-6-desktop">
      <article class="message is-light">
        <div class="message-body">
          <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">Coverage</p>
          <p class="mb-2">{{ coverage.message_count }} messages · {{ coverage.event_count }} events</p>
          <p class="is-size-7">Latest value: {{ metric.current_value_label }}</p>
          {% if metric.delta_label %}
            <p class="is-size-7">Latest shift: {{ metric.delta_label }}</p>
          {% endif %}
        </div>
      </article>
    </div>
  </div>
</div>
