<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">MS / PS Information</p>
      <p class="mb-0">Current timing signals for {{ person.name }} across message state and presence state.</p>
    </div>
    {% include "partials/behavioral-range-tabs.html" %}
  </div>

  <div class="columns is-multiline">
    {% for card in summary_cards %}
      <div class="column is-12-mobile is-6-tablet is-4-desktop">
        {% include "partials/behavioral-summary-card.html" with card=card %}
      </div>
    {% endfor %}
  </div>

  {% for group_key, group in behavioral_groups.items %}
    <section class="box mb-4">
      <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">{{ group.eyebrow }}</p>
      <h3 class="title is-5 mb-2">{{ group.title }}</h3>
      <p class="mb-3">{{ group.summary }}</p>
      <div class="table-container">
        <table class="table is-fullwidth is-hoverable">
          <thead>
            <tr>
              <th>Metric</th>
              <th>Current</th>
              <th>Meaning</th>
            </tr>
          </thead>
          <tbody>
            {% for graph in graph_cards %}
              {% if graph.group == group_key %}
                <tr>
                  <td>
                    <a href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}?range={{ range_key }}">
                      {{ graph.title }}
                    </a>
                  </td>
                  <td>{{ graph.current_value_label }}</td>
                  <td>{{ graph.psychology }}</td>
                </tr>
              {% endif %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  {% endfor %}
</div>
