<article class="card gia-behavior-graph-card">
  <header class="card-header">
    <div class="card-header-title is-flex is-justify-content-space-between is-align-items-flex-start">
      <div>
        <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">
          {{ graph.state_label }} · {{ graph.group|upper }}
        </p>
        <p class="mb-0">
          <span class="icon is-small mr-1"><i class="{{ graph.icon }}"></i></span>
          <span>{{ graph.title }}</span>
        </p>
      </div>
      <span class="tag is-light gia-badge">{{ graph.current_value_label }}</span>
    </div>
  </header>
  <div class="card-content">
    <p class="is-size-7 has-text-grey mb-2">
      {{ graph.raw_count }} sample{{ graph.raw_count|pluralize }} in this range{% if graph.delta_label %} · {{ graph.delta_label }}{% endif %}
    </p>
    {% if graph.has_data %}
      <div class="gia-behavior-chart-shell">
        <svg
          class="gia-behavior-chart"
          viewBox="0 0 100 48"
          preserveAspectRatio="none"
          role="img"
          aria-label="{{ graph.title }} graph">
          {% if graph.area_path %}
            <path class="gia-behavior-chart-area" d="{{ graph.area_path }}"></path>
          {% endif %}
          {% if graph.polyline %}
            <polyline class="gia-behavior-chart-line" points="{{ graph.polyline }}"></polyline>
          {% endif %}
          {% for marker in graph.markers|slice:"-1:" %}
            <circle class="gia-behavior-chart-point" cx="{{ marker.x }}" cy="{{ marker.y }}" r="1.8"></circle>
          {% endfor %}
        </svg>
        <div class="is-flex is-justify-content-space-between is-size-7 has-text-grey mt-1">
          <span>{{ graph.y_min_label }}</span>
          <span>{{ graph.latest_bucket_label }}</span>
          <span>{{ graph.y_max_label }}</span>
        </div>
      </div>
    {% else %}
      <article class="message is-light">
        <div class="message-body is-size-7">
          No samples for this metric in the selected range.
        </div>
      </article>
    {% endif %}
    <p class="is-size-7 mt-3">{{ graph.psychology }}</p>
    <div class="buttons are-small mt-3 mb-0">
      <a
        class="button is-light"
        href="{% url 'ai_workspace_insight_detail' type='page' person_id=person.id metric=graph.slug %}?range={{ range_key }}">
        Page
      </a>
      {% if behavioral_show_widget_actions %}
        <button
          type="button"
          class="button is-light js-widget-spawn-trigger"
          data-widget-url="{% url 'ai_workspace_insight_detail' type='widget' person_id=person.id metric=graph.slug %}?range={{ range_key }}"
          hx-get="{% url 'ai_workspace_insight_detail' type='widget' person_id=person.id metric=graph.slug %}?range={{ range_key }}"
          hx-target="#widgets-here"
          hx-swap="beforeend">
          Widget
        </button>
      {% endif %}
    </div>
  </div>
</article>
